import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { EmailCustomizer } from "@/components/email-customizer"
import type { EmailContentSettings, PlaceholderCategoryLabel, PlaceholderConfig } from "@/components/email-customizer/sections"
import { Mail, Paintbrush } from "lucide-react"
import { defaultEmailTemplate, EmailVerificationSettings } from "../../config"

interface VerificationEmailTabProps {
  settings: EmailVerificationSettings
  updateSettings: <K extends keyof EmailVerificationSettings>(key: K, value: EmailVerificationSettings[K]) => void
}

const placeholders: PlaceholderConfig[] = [
  { tag: "{{user_name}}", description: "User's display name", example: "John", category: "user" },
  { tag: "{{user_email}}", description: "User's email address", example: "john@example.com", category: "user" },
  { tag: "{{verification_link}}", description: "Verification link or button", example: "https://example.com/verify", category: "verification" },
  { tag: "{{expiry_time}}", description: "Time until the link expires", example: "24 hours", category: "verification" },
  { tag: "{{site_name}}", description: "Website name", example: "My Store", category: "site" },
  { tag: "{{site_url}}", description: "Website URL", example: "https://example.com", category: "site" },
]

const categories: Record<string, PlaceholderCategoryLabel> = {
  user: { label: "User", color: "bg-blue-100 text-blue-700" },
  verification: { label: "Verification", color: "bg-green-100 text-green-700" },
  site: { label: "Site", color: "bg-orange-100 text-orange-700" },
}

export function VerificationEmailTab({ settings, updateSettings }: VerificationEmailTabProps) {
  const [editing, setEditing] = useState(false)

  const saveContent = (content: EmailContentSettings) => {
    updateSettings("emailSubject", content.subject)
    updateSettings("emailHeading", content.heading)
    if (content.body !== undefined) updateSettings("emailBody", content.body)
    updateSettings("emailAdditionalContent", content.additionalContent)
    updateSettings("emailPreheaderText", content.preheaderText)
  }

  return (
    <>
      {editing && (
        <EmailCustomizer
          onClose={() => setEditing(false)}
          emailType={{ id: "email_verification", label: "Verification Email", defaultContent: { subject: defaultEmailTemplate.subject, heading: "Verify Your Email Address", body: defaultEmailTemplate.body, additionalContent: "", preheaderText: "" } }}
          initialContent={{ subject: settings.emailSubject, heading: settings.emailHeading, body: settings.emailBody, additionalContent: settings.emailAdditionalContent, preheaderText: settings.emailPreheaderText }}
          onSaveContent={saveContent}
          placeholders={placeholders}
          placeholderCategories={categories}
          subjectPlaceholderHint="Available: {{site_name}}, {{user_name}}, {{user_email}}"
        />
      )}
      <Card>
        <CardHeader>
          <CardTitle>Verification Email</CardTitle>
          <CardDescription>This required email gives pending users their activation link.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-between rounded-lg border p-4">
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10"><Mail className="h-5 w-5 text-primary" /></div>
              <div><p className="font-medium text-sm">Verification Email</p><p className="text-sm text-muted-foreground">Customize the subject, content, preheader, and activation button.</p></div>
            </div>
            <Button className="gap-2 text-white" style={{ backgroundColor: "#00226b" }} onClick={() => setEditing(true)}><Paintbrush className="h-4 w-4" />Customize Email</Button>
          </div>
        </CardContent>
      </Card>
    </>
  )
}