"use client";

import { useState } from "react";

import { Mail, ToggleLeft, ToggleRight } from "lucide-react";
import { toast } from "sonner";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";
import { EMAIL_TEMPLATES } from "@/data/email-templates";
import type { EmailTemplate } from "@/types/novalife";

const TRIGGER_LABELS: Record<string, string> = {
  day_0: "Day 0 (Immediate)",
  day_3: "Day 3",
  day_7: "Day 7",
  day_14: "Day 14",
  day_30: "Day 30",
  quiz_started: "Quiz Started",
  payment_success: "Payment Success",
  subscription_cancel: "Subscription Cancelled",
  glp1_eligible: "GLP-1 Eligible",
};

const SEQUENCE_ORDER = ["day_0", "day_3", "day_7", "day_14", "day_30"];
const EVENT_TRIGGERS = ["quiz_started", "payment_success", "subscription_cancel"];

export default function EmailAutomationPage() {
  const [editTemplate, setEditTemplate] = useState<EmailTemplate | null>(null);
  const [activeStates, setActiveStates] = useState<Record<string, boolean>>(
    Object.fromEntries(EMAIL_TEMPLATES.map((t) => [t.id, t.isActive])),
  );

  const sequenceTemplates = SEQUENCE_ORDER.map((trigger) =>
    EMAIL_TEMPLATES.find((t) => t.trigger === trigger),
  ).filter(Boolean) as EmailTemplate[];

  const eventTemplates = EVENT_TRIGGERS.map((trigger) =>
    EMAIL_TEMPLATES.find((t) => t.trigger === trigger),
  ).filter(Boolean) as EmailTemplate[];

  const totalSent = EMAIL_TEMPLATES.reduce((s, t) => s + t.sentCount, 0);
  const avgOpen = Math.round(EMAIL_TEMPLATES.reduce((s, t) => s + t.openRate, 0) / EMAIL_TEMPLATES.length);
  const avgClick = Math.round(EMAIL_TEMPLATES.reduce((s, t) => s + t.clickRate, 0) / EMAIL_TEMPLATES.length);

  return (
    <div className="space-y-6 p-6">
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Email Automation</h1>
        <p className="text-sm text-gray-500 mt-1">Manage automated email sequences and event-triggered campaigns.</p>
      </div>

      {/* Stats */}
      <div className="grid gap-4 sm:grid-cols-3">
        {[
          { label: "Total Emails Sent", value: totalSent.toLocaleString() },
          { label: "Average Open Rate", value: `${avgOpen}%` },
          { label: "Average Click Rate", value: `${avgClick}%` },
        ].map((s) => (
          <Card key={s.label} className="border-gray-100">
            <CardContent className="p-5">
              <p className="text-xs text-gray-500">{s.label}</p>
              <p className="text-2xl font-bold text-gray-900 mt-1">{s.value}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Nurture Sequence */}
      <Card className="border-gray-100">
        <CardHeader className="pb-3">
          <CardTitle className="text-base">Post-Purchase Nurture Sequence</CardTitle>
          <p className="text-xs text-gray-400">Automated emails sent after report purchase</p>
        </CardHeader>
        <CardContent className="space-y-0 p-0">
          {sequenceTemplates.map((template, i) => (
            <div key={template.id}>
              {i > 0 && (
                <div className="flex items-center px-5 py-1">
                  <div className="h-6 w-0.5 bg-gray-200 ml-5" />
                </div>
              )}
              <TemplateRow
                template={template}
                isActive={activeStates[template.id]}
                onToggle={() => { setActiveStates((s) => ({ ...s, [template.id]: !s[template.id] })); toast.success(`Template ${activeStates[template.id] ? "deactivated" : "activated"}`); }}
                onEdit={() => setEditTemplate(template)}
              />
            </div>
          ))}
        </CardContent>
      </Card>

      {/* Event Triggers */}
      <Card className="border-gray-100">
        <CardHeader className="pb-3">
          <CardTitle className="text-base">Event-Triggered Emails</CardTitle>
          <p className="text-xs text-gray-400">Sent when specific user actions occur</p>
        </CardHeader>
        <CardContent className="divide-y divide-gray-50 p-0">
          {eventTemplates.map((template) => (
            <TemplateRow
              key={template.id}
              template={template}
              isActive={activeStates[template.id]}
              onToggle={() => { setActiveStates((s) => ({ ...s, [template.id]: !s[template.id] })); toast.success("Template toggled"); }}
              onEdit={() => setEditTemplate(template)}
            />
          ))}
        </CardContent>
      </Card>

      {/* Edit Dialog */}
      <Dialog open={!!editTemplate} onOpenChange={() => setEditTemplate(null)}>
        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Edit Email Template — {editTemplate?.name}</DialogTitle>
          </DialogHeader>
          {editTemplate && (
            <div className="space-y-4 mt-2">
              <div className="space-y-1.5">
                <Label className="text-sm font-medium">Subject Line</Label>
                <Input defaultValue={editTemplate.subject} />
              </div>
              <div className="space-y-1.5">
                <Label className="text-sm font-medium">Preview Text</Label>
                <Input defaultValue={editTemplate.previewText} />
              </div>
              <div className="space-y-1.5">
                <Label className="text-sm font-medium">Body HTML</Label>
                <Textarea defaultValue={editTemplate.bodyHtml} rows={10} className="font-mono text-xs" />
              </div>
              <Separator />
              <div className="flex gap-2 justify-end">
                <Button variant="outline" onClick={() => { toast.info("Test email sent to admin@novalife.com (PoC simulation)"); }}>Send Test</Button>
                <Button className="bg-teal-600 hover:bg-teal-700 text-white" onClick={() => { toast.success("Template saved (PoC — not persisted)"); setEditTemplate(null); }}>Save Template</Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}

function TemplateRow({ template, isActive, onToggle, onEdit }: {
  template: EmailTemplate;
  isActive: boolean;
  onToggle: () => void;
  onEdit: () => void;
}) {
  return (
    <div className="flex items-center gap-4 px-5 py-4 hover:bg-gray-50/50">
      <div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${isActive ? "bg-teal-100" : "bg-gray-100"}`}>
        <Mail className={`h-4 w-4 ${isActive ? "text-teal-600" : "text-gray-400"}`} />
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 flex-wrap">
          <p className="font-medium text-gray-900 text-sm">{template.name}</p>
          <Badge variant="outline" className="text-xs">
            {TRIGGER_LABELS[template.trigger] ?? template.trigger}
          </Badge>
        </div>
        <p className="text-xs text-gray-400 mt-0.5 truncate">{template.subject}</p>
      </div>
      <div className="hidden md:flex items-center gap-6 text-xs text-gray-500 shrink-0">
        <div className="text-center"><p className="font-medium text-gray-900">{template.sentCount.toLocaleString()}</p><p>Sent</p></div>
        <div className="text-center"><p className="font-medium text-green-600">{template.openRate}%</p><p>Open</p></div>
        <div className="text-center"><p className="font-medium text-teal-600">{template.clickRate}%</p><p>Click</p></div>
      </div>
      <div className="flex items-center gap-2 shrink-0">
        <button onClick={onToggle} className={`transition-colors ${isActive ? "text-teal-600" : "text-gray-300"}`}>
          {isActive ? <ToggleRight className="h-6 w-6" /> : <ToggleLeft className="h-6 w-6" />}
        </button>
        <Button size="sm" variant="outline" className="h-7 text-xs" onClick={onEdit}>Edit</Button>
      </div>
    </div>
  );
}