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'

interface SignupCodeInviteProps {
  recipientName?: string
  associationName?: string
  code?: string
  link?: string
  roleLabel?: string
  expiresAt?: string
}

const SITE_NAME = 'Avria Community Management'

const SignupCodeInviteEmail = ({ recipientName, associationName, code, link, roleLabel, expiresAt }: SignupCodeInviteProps) => (
  <Html lang="en" dir="ltr">
    <Head />
    <Preview>Your registration code for {associationName || SITE_NAME}</Preview>
    <Body style={main}>
      <Container style={container}>
        <Section style={brandBar} />
        <Heading style={h1}>You're invited to register</Heading>
        <Text style={text}>Hello {recipientName || 'there'},</Text>
        <Text style={text}>
          {associationName ? `${associationName}` : SITE_NAME} has set up an account for you
          {roleLabel ? ` as a ${roleLabel}` : ''}. Click the button below to complete your registration —
          your email will be verified automatically.
        </Text>
        {link && <Button href={link} style={button}>Complete registration</Button>}
        {code && (
          <Text style={meta}>
            Or enter this code manually: <strong style={{ color: '#111827' }}>{code}</strong>
          </Text>
        )}
        {expiresAt && <Text style={meta}>This invitation expires on {expiresAt}.</Text>}
        <Text style={footer}>
          If you weren't expecting this email, you can safely ignore it.
        </Text>
      </Container>
    </Body>
  </Html>
)

export const template = {
  component: SignupCodeInviteEmail,
  subject: (data: Record<string, any>) =>
    `Your registration code for ${data.associationName || SITE_NAME}`,
  displayName: 'Sign-up code invitation',
  previewData: {
    recipientName: 'Jane Smith',
    associationName: 'Sample HOA',
    code: 'ABC123XYZ9',
    link: 'https://avria.cloud/register/ABC123XYZ9',
    roleLabel: 'Homeowner',
    expiresAt: 'June 1, 2026',
  },
} 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 18px' }
const meta = { color: '#6b7280', fontSize: '13px', lineHeight: '20px', margin: '14px 0 0' }
const button = { backgroundColor: '#2563eb', color: '#ffffff', borderRadius: '6px', fontSize: '14px', fontWeight: '600', textDecoration: 'none', padding: '12px 18px' }
const footer = { color: '#6b7280', fontSize: '12px', lineHeight: '18px', margin: '28px 0 0' }
