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 TicketResponseProps {
  recipientName?: string
  responderName?: string
  ticketTitle?: string
  response?: string
  link?: string
}

const SITE_NAME = 'Avria Community Management'

const TicketResponseEmail = ({ recipientName, responderName, ticketTitle, response, link }: TicketResponseProps) => (
  <Html lang="en" dir="ltr">
    <Head />
    <Preview>New response on your ticket: {ticketTitle || 'Support request'}</Preview>
    <Body style={main}>
      <Container style={container}>
        <Section style={brandBar} />
        <Heading style={h1}>New response on your ticket</Heading>
        <Text style={text}>{recipientName ? `${recipientName}, ` : ''}{responderName || 'Staff'} replied to your homeowner ticket.</Text>
        <Section style={panel}>
          <Text style={label}>Ticket</Text>
          <Text style={value}>{ticketTitle || 'Support request'}</Text>
        </Section>
        {response && <Text style={quote}>{response}</Text>}
        {link && <Button href={link} style={button}>View ticket</Button>}
        <Text style={footer}>This notification was sent by {SITE_NAME}.</Text>
      </Container>
    </Body>
  </Html>
)

export const template = {
  component: TicketResponseEmail,
  subject: (data: Record<string, any>) => `New response: ${data.ticketTitle || 'Your homeowner ticket'}`,
  displayName: 'Ticket response notification',
  previewData: {
    recipientName: 'Demo Homeowner',
    responderName: 'Avria Staff',
    ticketTitle: 'Gate access issue',
    response: 'Thanks for the details. We are reviewing this now and will follow up shortly.',
    link: 'https://avria.cloud/homeowner/tickets',
  },
} 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 panel = { backgroundColor: '#f8fafc', border: '1px solid #e5e7eb', borderRadius: '8px', padding: '16px', margin: '20px 0' }
const label = { color: '#6b7280', fontSize: '12px', textTransform: 'uppercase' as const, letterSpacing: '0.04em', margin: '0 0 6px' }
const value = { color: '#111827', fontSize: '17px', lineHeight: '24px', fontWeight: '700', margin: '0' }
const quote = { color: '#374151', fontSize: '14px', lineHeight: '22px', backgroundColor: '#f8fafc', borderLeft: '4px solid #2563eb', padding: '12px 14px', margin: '0 0 22px', whiteSpace: 'pre-wrap' as const }
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' }
