"use client";

import {
  Alert,
  Badge,
  Button,
  Container,
  FileButton,
  Group,
  Modal,
  Paper,
  Stack,
  Switch,
  Tabs,
  TagsInput,
  Text,
  Textarea,
  TextInput,
  Title,
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { notifications } from "@mantine/notifications";
import {
  IconAlertCircle,
  IconArrowLeft,
  IconChecklist,
  IconCode,
  IconDeviceFloppy,
  IconDownload,
  IconEye,
  IconFileUpload,
  IconHistory,
  IconInfoCircle,
  IconLink,
  IconMail,
  IconProgressCheck,
  IconSend,
  IconTrash,
  IconRefresh,
} from "@tabler/icons-react";
import moment from "moment";
import React, { useRef, useState } from "react";
import { useNavigate } from "react-router";
import { createEDMTemplate, deleteEDMTemplate, sendEDMTestEmail, updateEDMTemplate } from "@/lib/features/edm/action";
import type { AccessScope } from "@/lib/features/types";
import type { EDMTemplate } from "@/lib/features/edm/types";
import { useRoleAccess } from "@/hooks/useRoleAccess";
import { WorkflowSidebar } from "@/components/WorkflowSidebar";
import { EDMLogsPanel } from "../_components/EDMLogsPanel";
import { EDMHtmlEditor } from "../_components/EDMHtmlEditor";
import { TestFlowPanel } from "./test-flow/TestFlowPanel";

interface Props {
  initialTemplate: EDMTemplate | null;
  isNew: boolean;
  initialError?: string;
  accessScope: AccessScope;
}

export default function EDMEditorClientPage({ initialTemplate, isNew, initialError, accessScope }: Props) {
  const navigate = useNavigate();
  const { checkClientAccess } = useRoleAccess();
  const canViewAdminLogs = checkClientAccess("read", "admin-logs");
  const activeVer = initialTemplate?.versions.find((v) => v.active === 1) ?? initialTemplate?.versions[0] ?? null;

  const [name, setName] = useState(initialTemplate?.name ?? "");
  const [subject, setSubject] = useState(activeVer?.subject ?? "");
  const [htmlContent, setHtmlContent] = useState(activeVer?.html_content ?? "");
  const [plainContent, setPlainContent] = useState(activeVer?.plain_content ?? "");
  const [active, setActive] = useState<0 | 1>(activeVer?.active ?? 1);
  const [generatePlain, setGeneratePlain] = useState(activeVer?.generate_plain_content ?? true);
  const [saving, setSaving] = useState(false);
  const [partialError, setPartialError] = useState<{ templateId: string; message: string } | null>(null);

  const [deleteOpened, { open: openDelete, close: closeDelete }] = useDisclosure(false);
  const [deleting, setDeleting] = useState(false);

  const [sendEmailOpened, { open: openSendEmail, close: closeSendEmail }] = useDisclosure(false);
  const [sendToEmails, setSendToEmails] = useState<string[]>([]);
  const [sending, setSending] = useState(false);

  const [sentSuccessOpened, { open: openSentSuccess, close: closeSentSuccess }] = useDisclosure(false);
  const [lastSentTo, setLastSentTo] = useState("");

  const htmlFileResetRef = useRef<() => void>(null);
  const plainFileResetRef = useRef<() => void>(null);

  const handleHtmlFileUpload = (file: File | null) => {
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (e) => {
      const text = e.target?.result as string;
      setHtmlContent(text);
    };
    reader.readAsText(file);
  };

  const handlePlainFileUpload = (file: File | null) => {
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (e) => {
      const text = e.target?.result as string;
      setPlainContent(text);
    };
    reader.readAsText(file);
  };

  const handleSave = async () => {
    if (!name.trim()) {
      notifications.show({ color: "red", message: "Template name is required" });
      return;
    }
    if (!subject.trim()) {
      notifications.show({ color: "red", message: "Subject line is required" });
      return;
    }
    setSaving(true);
    setPartialError(null);
    try {
      if (isNew) {
        const res = await createEDMTemplate({ name: name.trim(), subject: subject.trim(), html_content: htmlContent, plain_content: plainContent || undefined, active, generate_plain_content: generatePlain });
        if (res.success && res.data) {
          notifications.show({ color: "green", message: "Template created" });
          navigate(`/admin/edm/${res.data.id}`);
        } else if ((res as any).partial) {
          setPartialError({ templateId: (res as any).templateId, message: res.message ?? "Template shell created but version failed. Edit to retry." });
        } else {
          notifications.show({ color: "red", message: res.message || "Create failed" });
        }
      } else {
        const res = await updateEDMTemplate(initialTemplate!.id, { name: name.trim(), subject: subject.trim(), html_content: htmlContent, plain_content: plainContent || undefined, active, generate_plain_content: generatePlain });
        if (res.success) {
          notifications.show({ color: "green", message: "Template saved" });
        } else {
          notifications.show({ color: "red", message: res.message || "Save failed" });
        }
      }
    } catch {
      notifications.show({ color: "red", message: "Save failed" });
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async () => {
    if (!initialTemplate) return;
    setDeleting(true);
    try {
      const res = await deleteEDMTemplate(initialTemplate.id);
      if (res.success) {
        notifications.show({ color: "green", message: "Template deleted" });
        navigate("/admin/edm");
      } else {
        notifications.show({ color: "red", message: res.message || "Delete failed" });
      }
    } catch {
      notifications.show({ color: "red", message: "Delete failed" });
    } finally {
      setDeleting(false);
    }
  };

  const handleDownloadHtml = () => {
    const blob = new Blob([htmlContent], { type: "text/html" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `${name.trim() || "email-template"}.html`;
    a.click();
    URL.revokeObjectURL(url);
  };

  const handleRegeneratePlain = () => {
    if (!htmlContent) {
      notifications.show({ color: "orange", message: "No HTML content to generate from" });
      return;
    }
    const tempDiv = document.createElement("div");
    tempDiv.innerHTML = htmlContent;

    // Remove scripts and styles so they don't appear in plain text
    const scriptsAndStyles = tempDiv.querySelectorAll("script, style");
    scriptsAndStyles.forEach((el) => el.remove());

    const text = tempDiv.innerText || tempDiv.textContent || "";
    const cleanedText = text.replace(/\n\s*\n/g, '\n\n').trim();
    setPlainContent(cleanedText);
    notifications.show({ color: "blue", message: "Plain text generated from HTML" });
  };

  const handleSendEmail = async () => {
    if (sendToEmails.length === 0) {
      notifications.show({ color: "red", message: "At least one email address is required" });
      return;
    }
    setSending(true);
    try {
      const res = await sendEDMTestEmail(initialTemplate!.id, sendToEmails.join(","));
      if (res.success) {
        setLastSentTo(sendToEmails.join(", "));
        openSentSuccess();
        closeSendEmail();
        setSendToEmails([]);
      } else {
        notifications.show({ color: "red", message: res.message || "Send failed" });
      }
    } catch {
      notifications.show({ color: "red", message: "Send failed" });
    } finally {
      setSending(false);
    }
  };

  const canEdit = isNew ? accessScope.create : accessScope.update;

  /** Approval drawer. Only meaningful once the template exists. */
  const [workflowOpen, setWorkflowOpen] = useState(false);

  return (
    <Container fluid px="xl" py="xl">
      {/* Header */}
      <Group justify="space-between" mb="lg">
        <Group gap="sm">
          <Button variant="subtle" size="compact-sm" leftSection={<IconArrowLeft size={14} />} onClick={() => navigate("/admin/edm")}>
            Back
          </Button>
          <IconMail size={24} />
          <Title order={2}>{isNew ? "New Email Template" : name || "Email Template"}</Title>
          {!isNew && activeVer && (
            <Badge color={activeVer.active === 1 ? "green" : "gray"} variant="light">
              {activeVer.active === 1 ? "Active" : "Inactive"}
            </Badge>
          )}
        </Group>
        <Group>
          {!isNew && initialTemplate?.id && (
            <Button
              variant="light"
              color="grape"
              leftSection={<IconProgressCheck size={16} />}
              onClick={() => setWorkflowOpen(true)}
            >
              Approval
            </Button>
          )}
          {!isNew && accessScope.delete && (
            <Button variant="subtle" color="red" leftSection={<IconTrash size={16} />} onClick={openDelete}>
              Delete
            </Button>
          )}
          {!isNew && htmlContent && (
            <Button variant="light" color="blue" leftSection={<IconSend size={16} />} onClick={openSendEmail}>
              Send as Email
            </Button>
          )}
          {canEdit && (
            <Button leftSection={<IconDeviceFloppy size={16} />} onClick={handleSave} loading={saving}>
              {isNew ? "Create Template" : "Save Changes"}
            </Button>
          )}
        </Group>
      </Group>

      {initialError && <Alert color="red" icon={<IconAlertCircle size={16} />} mb="lg">{initialError}</Alert>}

      {partialError && (
        <Alert color="orange" icon={<IconAlertCircle size={16} />} mb="lg" title="Partial creation — template shell created">
          <Text size="sm">{partialError.message}</Text>
          <Text size="xs" c="dimmed" ff="monospace" mt={4}>{partialError.templateId}</Text>
          <Text size="xs" mt={4}>The template was created in SendGrid but the version (HTML/subject) failed. You can still edit and save to retry.</Text>
        </Alert>
      )}

      <Tabs defaultValue="details">
        <Tabs.List mb="md">
          <Tabs.Tab value="details" leftSection={<IconInfoCircle size={14} />}>Details</Tabs.Tab>
          <Tabs.Tab value="html" leftSection={<IconCode size={14} />}>HTML Content</Tabs.Tab>
          <Tabs.Tab value="plain" leftSection={<IconFileUpload size={14} />}>Plain Content</Tabs.Tab>
          {!isNew && <Tabs.Tab value="info" leftSection={<IconEye size={14} />}>Template Info</Tabs.Tab>}
          {!isNew && canViewAdminLogs && <Tabs.Tab value="logs" leftSection={<IconHistory size={14} />}>Logs</Tabs.Tab>}
          {!isNew && accessScope.read && <Tabs.Tab value="test" leftSection={<IconChecklist size={14} />}>Test the Template</Tabs.Tab>}
        </Tabs.List>

        {/* Details tab */}
        <Tabs.Panel value="details">
          <Paper withBorder radius="md" p="lg">
            <Stack gap="md" style={{ maxWidth: 560 }}>
              <TextInput
                label="Template Name"
                placeholder="e.g. Welcome Email"
                value={name}
                onChange={(e) => setName(e.currentTarget.value)}
                required
                readOnly={!canEdit}
              />
              <TextInput
                label="Subject Line"
                placeholder="e.g. Welcome to Karma!"
                value={subject}
                onChange={(e) => setSubject(e.currentTarget.value)}
                required
                readOnly={!canEdit}
              />
              <Switch
                label="Active"
                description="Only one version can be active per template"
                checked={active === 1}
                onChange={(e) => setActive(e.currentTarget.checked ? 1 : 0)}
                disabled={!canEdit}
              />
            </Stack>
          </Paper>
        </Tabs.Panel>

        {/* HTML Content tab */}
        <Tabs.Panel value="html">
          <Stack gap="md">
            {canEdit && (
              <Paper withBorder radius="md" p="md">
                <Group>
                  <FileButton resetRef={htmlFileResetRef} onChange={handleHtmlFileUpload} accept=".html,.htm">
                    {(props) => (
                      <Button {...props} variant="light" leftSection={<IconFileUpload size={16} />}>
                        Upload HTML File
                      </Button>
                    )}
                  </FileButton>
                  {htmlContent && (
                    <Button variant="subtle" color="gray" size="compact-sm" onClick={() => { setHtmlContent(""); htmlFileResetRef.current?.(); }}>
                      Clear
                    </Button>
                  )}
                  <Text size="sm" c="dimmed">.html or .htm files only</Text>
                </Group>
              </Paper>
            )}

            {htmlContent ? (
              <Paper withBorder radius="md" p={0} style={{ overflow: "hidden" }}>
                <Group px="md" py="xs" justify="space-between" style={{ borderBottom: "1px solid var(--mantine-color-default-border)" }}>
                  <Group gap="xs">
                    <IconEye size={14} />
                    <Text size="sm" fw={500}>HTML Preview</Text>
                  </Group>
                  <Group gap="xs">
                    <Button variant="subtle" size="compact-sm" leftSection={<IconEye size={14} />} onClick={() => {
                      if (!isNew && initialTemplate) {
                        window.open(`/public/edm/preview/${initialTemplate.id}`, '_blank');
                      } else {
                        localStorage.setItem('edm_preview_html', htmlContent);
                        window.open('/admin/edm/preview', '_blank');
                      }
                    }}>
                      View in Browser
                    </Button>
                    <Button variant="subtle" size="compact-sm" leftSection={<IconDownload size={14} />} onClick={handleDownloadHtml}>
                      Download HTML
                    </Button>
                  </Group>
                </Group>
                <iframe
                  srcDoc={htmlContent}
                  style={{ width: "100%", height: 600, border: "none", display: "block" }}
                  sandbox="allow-scripts allow-same-origin"
                  title="HTML Preview"
                />
              </Paper>
            ) : (
              <Paper withBorder radius="md" p="xl">
                <Stack align="center" gap="xs">
                  <IconCode size={40} opacity={0.3} />
                  <Text c="dimmed" size="md">No HTML content yet.</Text>
                  {canEdit && <Text c="dimmed" size="sm">Upload an HTML file above to preview it here.</Text>}
                </Stack>
              </Paper>
            )}

            {canEdit && (
              <Paper withBorder radius="md" p="md">
                <Text size="sm" fw={500} mb="xs">Edit HTML directly</Text>
                <EDMHtmlEditor value={htmlContent} onChange={setHtmlContent} />
              </Paper>
            )}
          </Stack>
        </Tabs.Panel>

        {/* Plain Content tab */}
        <Tabs.Panel value="plain">
          <Paper withBorder radius="md" p="lg">
            <Stack gap="md">
              {canEdit && (
                <Group>
                  <FileButton resetRef={plainFileResetRef} onChange={handlePlainFileUpload} accept=".txt">
                    {(props) => (
                      <Button {...props} variant="light" leftSection={<IconFileUpload size={16} />}>
                        Upload .txt File
                      </Button>
                    )}
                  </FileButton>
                  {plainContent && (
                    <Button variant="subtle" color="gray" size="compact-sm" onClick={() => { setPlainContent(""); plainFileResetRef.current?.(); }}>
                      Clear
                    </Button>
                  )}
                </Group>
              )}
              <Switch
                label="Auto-generate plain text"
                description="Automatically convert the HTML to plain text. Check this if you don't want to write it manually."
                checked={generatePlain}
                onChange={(e) => setGeneratePlain(e.currentTarget.checked)}
                disabled={!canEdit}
              />
              <Textarea
                label="Plain Text Content"
                description="Fallback for email clients that don't support HTML"
                value={plainContent}
                onChange={(e) => setPlainContent(e.currentTarget.value)}
                readOnly={!canEdit}
                autosize
                minRows={10}
                maxRows={30}
                styles={{ input: { fontFamily: "monospace", fontSize: 13 } }}
                placeholder="Plain text version of the email…"
              />
            </Stack>
          </Paper>
        </Tabs.Panel>

        {/* Template Info tab (existing templates only) */}
        {!isNew && (
          <Tabs.Panel value="info">
            <Paper withBorder radius="md" p="lg">
              <Stack gap="md" style={{ maxWidth: 560 }}>
                <Group>
                  <Text size="sm" fw={500} w={160}>Template ID</Text>
                  <Text size="sm" ff="monospace" c="dimmed">{initialTemplate?.id ?? "—"}</Text>
                </Group>
                <Group>
                  <Text size="sm" fw={500} w={160}>Version ID</Text>
                  <Text size="sm" ff="monospace" c="dimmed">{activeVer?.id ?? "—"}</Text>
                </Group>
                <Group>
                  <Text size="sm" fw={500} w={160}>Generation</Text>
                  <Badge variant="outline" size="sm">{initialTemplate?.generation ?? "—"}</Badge>
                </Group>
                <Group>
                  <Text size="sm" fw={500} w={160}>Version Name</Text>
                  <Text size="sm" c="dimmed">{activeVer?.name ?? "—"}</Text>
                </Group>
                <Group>
                  <Text size="sm" fw={500} w={160}>Editor</Text>
                  <Text size="sm" c="dimmed">{activeVer?.editor ?? "—"}</Text>
                </Group>
                <Group>
                  <Text size="sm" fw={500} w={160}>Template Updated</Text>
                  <Text size="sm" c="dimmed">
                    {initialTemplate?.updated_at ? moment(initialTemplate.updated_at).format("DD MMM YYYY, HH:mm") : "—"}
                  </Text>
                </Group>
                <Group>
                  <Text size="sm" fw={500} w={160}>Version Updated</Text>
                  <Text size="sm" c="dimmed">
                    {activeVer?.updated_at ? moment(activeVer.updated_at).format("DD MMM YYYY, HH:mm") : "—"}
                  </Text>
                </Group>
                {initialTemplate && initialTemplate.versions.length > 1 && (
                  <>
                    <Text size="sm" fw={500} mt="xs">All Versions ({initialTemplate.versions.length})</Text>
                    {initialTemplate.versions.map((v) => (
                      <Paper key={v.id} withBorder radius="sm" p="sm">
                        <Group justify="space-between">
                          <Stack gap={2}>
                            <Text size="sm" fw={500}>{v.name}</Text>
                            <Text size="xs" ff="monospace" c="dimmed">{v.id}</Text>
                            <Text size="xs" c="dimmed">{v.subject}</Text>
                          </Stack>
                          <Badge color={v.active === 1 ? "green" : "gray"} variant="light" size="sm">
                            {v.active === 1 ? "Active" : "Inactive"}
                          </Badge>
                        </Group>
                      </Paper>
                    ))}
                  </>
                )}
              </Stack>
            </Paper>
          </Tabs.Panel>
        )}

        {/* Logs tab */}
        {!isNew && canViewAdminLogs && (
          <Tabs.Panel value="logs">
            <Paper withBorder radius="md" p="lg">
              <EDMLogsPanel templateId={initialTemplate?.id} />
            </Paper>
          </Tabs.Panel>
        )}

        {/* Test the Template tab — QA checks against the current editor content */}
        {!isNew && accessScope.read && (
          <Tabs.Panel value="test">
            <TestFlowPanel
              template={{ name, subject, htmlContent, plainContent }}
              canRun={accessScope.update}
            />
          </Tabs.Panel>
        )}
      </Tabs>

      {/* Delete confirmation modal */}
      <Modal opened={deleteOpened} onClose={closeDelete} title="Delete Email Template" centered size="sm">
        <Stack>
          <Text size="sm">
            Are you sure you want to delete{" "}
            <Text span fw={700}>{initialTemplate?.name}</Text>?
            This will permanently delete the template and all its versions from SendGrid.
          </Text>
          <Text size="xs" c="dimmed" ff="monospace">{initialTemplate?.id}</Text>
          <Group justify="flex-end">
            <Button variant="subtle" onClick={closeDelete}>Cancel</Button>
            <Button color="red" onClick={handleDelete} loading={deleting}>Delete</Button>
          </Group>
        </Stack>
      </Modal>

      {/* Send as Email modal */}
      <Modal
        opened={sendEmailOpened}
        onClose={() => { closeSendEmail(); setSendToEmails([]); }}
        title="Send as Email"
        centered
        size="sm"
      >
        <Stack>
          <Text size="sm">Send this EDM template as a test.</Text>
          <TagsInput
            label="Recipient Emails"
            description="Type an email and press Enter"
            placeholder="e.g. test@example.com"
            value={sendToEmails}
            onChange={setSendToEmails}
            clearable
            required
          />
          <Group justify="flex-end">
            <Button variant="subtle" onClick={() => { closeSendEmail(); setSendToEmails([]); }}>Cancel</Button>
            <Button leftSection={<IconSend size={14} />} onClick={handleSendEmail} loading={sending}>Send</Button>
          </Group>
        </Stack>
      </Modal>

      {/* Success confirmation modal */}
      <Modal opened={sentSuccessOpened} onClose={closeSentSuccess} title="Email Sent" centered size="sm">
        <Stack align="center" gap="md" py="md">
          <IconMail size={48} color="var(--mantine-color-green-6)" />
          <Text size="md" ta="center">
            EDM Email successfully sent to:
            <br />
            <Text span fw={700}>{lastSentTo}</Text>
          </Text>
          <Button onClick={closeSentSuccess} fullWidth mt="sm">Close</Button>
        </Stack>
      </Modal>

      {workflowOpen && initialTemplate?.id && (
        <WorkflowSidebar
          opened
          onClose={() => setWorkflowOpen(false)}
          entityType="EDM_TEMPLATE"
          entityId={initialTemplate.id}
          crTargets={[
            { value: initialTemplate.id, label: initialTemplate.name ?? initialTemplate.id },
          ]}
          defaultCrTarget={initialTemplate.id}
        />
      )}
    </Container>
  );
}