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

const SITE_NAME = 'Avria Community Management'

interface Props {
  ownerName?: string
  electionTitle?: string
  associationName?: string
  deadline?: string
  votingUrl?: string
}

const ElectionInviteEmail = ({ ownerName, electionTitle, associationName, deadline, votingUrl }: Props) => (
  <Html lang="en" dir="ltr">
    <Head />
    <Preview>Cast your vote — {electionTitle || 'Election'}</Preview>
    <Body style={main}>
      <Container style={container}>
        <Heading style={h1}>Election Ballot — {electionTitle || 'Election'}</Heading>
        <Text style={text}>Dear {ownerName || 'Owner'},</Text>
        <Text style={text}>
          You are eligible to vote in the <strong>{electionTitle || 'election'}</strong>
          {associationName ? ` for ${associationName}` : ''}.
        </Text>
        {deadline && <Text style={text}>⏰ <strong>Deadline:</strong> {deadline}</Text>}
        <Button href={votingUrl || '#'} style={button}>Cast Your Vote</Button>
        <Text style={smallText}>This is a secure, tokenized link tied to your unit. Your vote is anonymous — we record that you voted but not how you voted.</Text>
        <Text style={smallText}>You may change your vote until the deadline by clicking the link again.</Text>
        <Text style={footer}>If you did not expect this email, please contact your association manager. — {SITE_NAME}</Text>
      </Container>
    </Body>
  </Html>
)

export const template = {
  component: ElectionInviteEmail,
  subject: (d: Record<string, any>) =>
    `Vote Now: ${d.electionTitle || 'Election'}${d.associationName ? ` — ${d.associationName}` : ''}`,
  displayName: 'Election invite',
  previewData: { ownerName: 'Jane Owner', electionTitle: '2026 Board Election', associationName: 'Sample HOA', deadline: 'January 15, 2026 5:00 PM', votingUrl: 'https://avria.cloud/vote/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 h1 = { color: '#111827', fontSize: '22px', lineHeight: '30px', margin: '0 0 14px', fontWeight: '700' }
const text = { color: '#374151', fontSize: '15px', lineHeight: '24px', margin: '0 0 14px' }
const smallText = { color: '#6b7280', fontSize: '13px', lineHeight: '20px', margin: '0 0 10px' }
const button = { backgroundColor: '#2941a4', color: '#ffffff', borderRadius: '6px', fontSize: '14px', fontWeight: '600', textDecoration: 'none', padding: '12px 18px', margin: '12px 0 18px' }
const footer = { color: '#6b7280', fontSize: '12px', lineHeight: '18px', margin: '28px 0 0' }
