import * as React from 'npm:react@18.3.1'
import { Body, Button, Container, Head, Heading, Html, Preview, Section, Text } from 'npm:@react-email/components@0.0.22'
import type { TemplateEntry } from './registry.ts'

const SITE_NAME = 'Avria Community Management'

interface Props {
  memberName?: string
  associationName?: string
  vendorName?: string
  invoiceNumber?: string
  amount?: string
  billDate?: string
  dueDate?: string
  description?: string
  approveLink?: string
  denyLink?: string
  reviewLink?: string
}

const BillApprovalVoteInviteEmail = ({
  memberName, associationName, vendorName, invoiceNumber, amount, billDate, dueDate, description,
  approveLink, denyLink, reviewLink,
}: Props) => (
  <Html lang="en" dir="ltr">
    <Head />
    <Preview>Approve or deny: {vendorName || 'Bill'} {invoiceNumber || ''}</Preview>
    <Body style={main}>
      <Container style={container}>
        <Section style={brandBar} />
        <Heading style={h1}>Bill approval requested</Heading>
        <Text style={text}>Hello {memberName || 'Board Member'},</Text>
        <Text style={text}>
          A bill{associationName ? ` for ${associationName}` : ''} requires your approval.
        </Text>

        <Section style={panel}>
          <Text style={label}>Vendor</Text>
          <Text style={value}>{vendorName || '—'}</Text>
          {invoiceNumber && (
            <>
              <Text style={label}>Invoice #</Text>
              <Text style={value}>{invoiceNumber}</Text>
            </>
          )}
          <Text style={label}>Amount</Text>
          <Text style={value}>{amount || '—'}</Text>
          {(billDate || dueDate) && (
            <>
              <Text style={label}>{billDate ? 'Bill date' : ''}{billDate && dueDate ? ' · Due date' : (dueDate ? 'Due date' : '')}</Text>
              <Text style={meta}>
                {billDate || ''}{billDate && dueDate ? ' · ' : ''}{dueDate || ''}
              </Text>
            </>
          )}
          {description && (
            <>
              <Text style={label}>Description</Text>
              <Text style={meta}>{description}</Text>
            </>
          )}
        </Section>

        <Section style={buttonRow}>
          {approveLink && <Button href={approveLink} style={approveButton}>Approve</Button>}
          {denyLink && <Button href={denyLink} style={denyButton}>Deny</Button>}
        </Section>

        {reviewLink && (
          <Text style={smallText}>
            Prefer to review the full bill first? <a href={reviewLink} style={link}>Open it here</a>.
          </Text>
        )}
        <Text style={smallText}>
          🔒 These approve / deny links are tied uniquely to your board seat. Please do not share or forward them.
        </Text>
        <Text style={footer}>
          If you weren't expecting this email, please contact your association manager. — {SITE_NAME}
        </Text>
      </Container>
    </Body>
  </Html>
)

export const template = {
  component: BillApprovalVoteInviteEmail,
  subject: (d: Record<string, any>) =>
    `Approve or deny: ${d.vendorName || 'Bill'}${d.invoiceNumber ? ` ${d.invoiceNumber}` : ''}`,
  displayName: 'Bill approval vote invite',
  previewData: {
    memberName: 'John Director',
    associationName: 'Sunset Hills HOA',
    vendorName: 'Acme Plumbing',
    invoiceNumber: 'INV-1042',
    amount: '$1,250.00',
    billDate: '2026-05-01',
    dueDate: '2026-05-31',
    description: 'Quarterly pump-station maintenance',
    approveLink: 'https://avria.cloud/bill-approve/xxx?token=yyy&action=approve',
    denyLink: 'https://avria.cloud/bill-approve/xxx?token=yyy&action=deny',
    reviewLink: 'https://avria.cloud/bill-approve/xxx?token=yyy',
  },
} satisfies TemplateEntry

const main = { backgroundColor: '#ffffff', fontFamily: 'Inter, Arial, sans-serif' }
const container = { maxWidth: '600px', margin: '0 auto', padding: '28px 24px' }
const brandBar = { height: '5px', backgroundColor: '#2563eb', borderRadius: '6px', marginBottom: '24px' }
const h1 = { color: '#111827', fontSize: '24px', lineHeight: '32px', margin: '0 0 14px', fontWeight: '700' }
const text = { color: '#374151', fontSize: '15px', lineHeight: '24px', margin: '0 0 14px' }
const panel = { backgroundColor: '#f8fafc', border: '1px solid #e5e7eb', borderRadius: '8px', padding: '16px', margin: '14px 0 22px' }
const label = { color: '#6b7280', fontSize: '11px', textTransform: 'uppercase' as const, letterSpacing: '0.04em', margin: '8px 0 2px' }
const value = { color: '#111827', fontSize: '15px', lineHeight: '22px', fontWeight: '600', margin: '0' }
const meta = { color: '#374151', fontSize: '14px', lineHeight: '22px', margin: '0', whiteSpace: 'pre-wrap' as const }
const buttonRow = { margin: '0 0 18px' }
const approveButton = { backgroundColor: '#16a34a', color: '#ffffff', borderRadius: '6px', fontSize: '14px', fontWeight: '600', textDecoration: 'none', padding: '12px 18px', marginRight: '10px' }
const denyButton = { backgroundColor: '#dc2626', color: '#ffffff', borderRadius: '6px', fontSize: '14px', fontWeight: '600', textDecoration: 'none', padding: '12px 18px' }
const smallText = { color: '#6b7280', fontSize: '13px', lineHeight: '20px', margin: '0 0 10px' }
const link = { color: '#2563eb', textDecoration: 'underline' }
const footer = { color: '#6b7280', fontSize: '12px', lineHeight: '18px', margin: '28px 0 0' }
