import { useState } from 'react'
import { LayoutShell } from './components/LayoutShell'
import { ConfigForm } from './components/ConfigForm'
import { PreviewFrame } from './components/PreviewFrame'
import { EmailSender } from './components/EmailSender'
import type {
  CompanyConfig,
  InvitationInfo,
  InvoiceInfo,
  PaymentInfo,
  ReportConfig,
  PasswordResetInfo,
  TemplateId,
} from './lib/types'

const navItems: { id: TemplateId; label: string }[] = [
  { id: 'invitation', label: 'Invitation' },
  { id: 'proforma', label: 'Proforma invoice' },
  { id: 'paymentRequest', label: 'Payment request' },
  { id: 'vatSummary', label: 'VAT summary' },
  { id: 'vatDetailed', label: 'VAT detailed' },
  { id: 'withholdingSummary', label: 'Withholding summary' },
  { id: 'withholdingDetailed', label: 'Withholding detailed' },
  { id: 'newsletter', label: 'Newsletter' },
  { id: 'passwordReset', label: 'Password reset' },
]

function App() {
  const [activeTemplate, setActiveTemplate] = useState<TemplateId>('invitation')

  const [company, setCompany] = useState<CompanyConfig>({
    name: 'Yaltopia Ticket',
    primaryColor: '#f97316',
    logoUrl: '',
    paymentLink: '',
    bankDetails: {
      bankName: 'Example Bank',
      accountName: 'Yaltopia Ticket Ltd',
      accountNumber: '123456789',
    },
  })

  const [invitation, setInvitation] = useState<InvitationInfo>({
    eventName: 'Yaltopia Product Launch',
    dateTime: '24 March 2026, 15:00',
    location: 'Online webinar',
    ctaLabel: 'Reserve my seat',
    ctaUrl: 'https://example.com/rsvp',
  })

  const [payment, setPayment] = useState<PaymentInfo>({
    amount: 150,
    currency: 'USD',
    description: 'Yaltopia Ticket subscription',
    dueDate: '31 March 2026',
  })

  const [invoice, setInvoice] = useState<InvoiceInfo>({
    invoiceNumber: 'INV-2026-001',
    issueDate: '11 March 2026',
    dueDate: '31 March 2026',
    currency: 'USD',
    items: [
      { description: 'Yaltopia Ticket Pro (12 months)', quantity: 1, unitPrice: 150 },
      { description: 'Onboarding & configuration', quantity: 1, unitPrice: 0 },
    ],
  })

  const [vatReport, setVatReport] = useState<ReportConfig>({
    periodLabel: 'Q1 2026',
    totalAmount: 12000,
    taxAmount: 1800,
    currency: 'USD',
  })

  const [withholdingReport, setWithholdingReport] = useState<ReportConfig>({
    periodLabel: 'Q1 2026',
    totalAmount: 8000,
    taxAmount: 800,
    currency: 'USD',
  })

  const [passwordReset, setPasswordReset] = useState<PasswordResetInfo>({
    resetLink: 'https://example.com/reset?token=demo',
    recipientName: 'Customer',
  })

  return (
    <LayoutShell
      navItems={navItems}
      activeId={activeTemplate}
      onChange={(id: TemplateId) => setActiveTemplate(id)}
      leftPanel={
        <div className="space-y-6">
          <ConfigForm
            company={company}
            onCompanyChange={setCompany}
            payment={payment}
            onPaymentChange={setPayment}
            invoice={invoice}
            onInvoiceChange={setInvoice}
            vatReport={vatReport}
            onVatReportChange={setVatReport}
            withholdingReport={withholdingReport}
            onWithholdingReportChange={setWithholdingReport}
            invitation={invitation}
            onInvitationChange={setInvitation}
            passwordReset={passwordReset}
            onPasswordResetChange={setPasswordReset}
          />
          <EmailSender
            activeTemplate={activeTemplate}
            templateProps={{
              company,
              invitation,
              invoice,
              payment,
              enhancedPayment: { paymentRequestNumber: '', amount: 0, currency: 'USD' },
              teamInvitation: { recipientName: '', inviterName: '', teamName: '', invitationLink: '' },
              invoiceShare: { senderName: '', invoiceNumber: '', customerName: '', amount: 0, currency: 'USD', status: 'DRAFT', shareLink: '' },
              vatReport,
              withholdingReport,
              passwordReset,
            }}
          />
        </div>
      }
      rightPanel={
        <PreviewFrame
          activeTemplate={activeTemplate}
          templateProps={{
            company,
            invitation,
            invoice,
            payment,
            enhancedPayment: { paymentRequestNumber: '', amount: 0, currency: 'USD' },
            teamInvitation: { recipientName: '', inviterName: '', teamName: '', invitationLink: '' },
            invoiceShare: { senderName: '', invoiceNumber: '', customerName: '', amount: 0, currency: 'USD', status: 'DRAFT', shareLink: '' },
            vatReport,
            withholdingReport,
            passwordReset,
          }}
        />
      }
    />
  )
}

export default App