import { useState } from "react";
import { Navigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useAuthStore } from "@/stores/auth-store";
import {
  getAdminTemplates,
  createTemplate,
  updateTemplate,
  deleteTemplate,
  previewTemplate,
  type PdfTemplate,
} from "@/api/pdf-templates";
import { Plus, Pencil, Trash2, Eye, FileText, Info } from "lucide-react";

export function AdminPdfTemplatesPage() {
  const { t } = useTranslation();
  const user = useAuthStore((s) => s.user);
  const queryClient = useQueryClient();
  const [editing, setEditing] = useState<PdfTemplate | null>(null);
  const [creating, setCreating] = useState(false);
  const [previewHtml, setPreviewHtml] = useState<string | null>(null);
  const [showVars, setShowVars] = useState(false);

  // Form state
  const [name, setName] = useState("");
  const [locale, setLocale] = useState("en");
  const [description, setDescription] = useState("");
  const [htmlContent, setHtmlContent] = useState("");

  const { data: templates = [] } = useQuery({
    queryKey: ["admin-pdf-templates"],
    queryFn: getAdminTemplates,
  });

  const createMut = useMutation({
    mutationFn: () => createTemplate({ name, locale, description, html_content: htmlContent }),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["admin-pdf-templates"] }); resetForm(); },
  });

  const updateMut = useMutation({
    mutationFn: () => updateTemplate(editing!.id, { name, locale, description, html_content: htmlContent }),
    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["admin-pdf-templates"] }); resetForm(); },
  });

  const deleteMut = useMutation({
    mutationFn: deleteTemplate,
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["admin-pdf-templates"] }),
  });

  if (user?.role !== "admin") return <Navigate to="/" replace />;

  function resetForm() {
    setCreating(false); setEditing(null); setPreviewHtml(null);
    setName(""); setLocale("en"); setDescription(""); setHtmlContent("");
  }

  function startEdit(t: PdfTemplate) {
    setEditing(t); setName(t.name); setLocale(t.locale);
    setDescription(t.description || ""); setHtmlContent(t.html_content);
    setPreviewHtml(null);
  }

  async function handlePreview() {
    const html = await previewTemplate(htmlContent);
    setPreviewHtml(html);
  }

  if (creating || editing) {
    return (
      <div className="space-y-4">
        <h1 className="text-2xl font-semibold">
          {creating ? t("pdf_templates.create") : t("pdf_templates.edit")}
        </h1>

        <button onClick={() => setShowVars(!showVars)} className="inline-flex items-center gap-1 text-sm text-primary hover:underline">
          <Info className="h-4 w-4" /> {t("pdf_templates.variables_ref")}
        </button>

        {showVars && (
          <div className="rounded-lg border bg-muted/50 p-4 text-sm font-mono space-y-1">
            <p><strong>{"{{ title }}"}</strong> — {t("pdf_templates.var_title")}</p>
            <p><strong>{"{{ user_name }}"}</strong> — {t("pdf_templates.var_user_name")}</p>
            <p><strong>{"{{ generated_at }}"}</strong> — {t("pdf_templates.var_generated_at")}</p>
            <p><strong>{"{{ memories }}"}</strong> — {t("pdf_templates.var_memories")}</p>
            <p><strong>{"{{ documents }}"}</strong> — {t("pdf_templates.var_documents")}</p>
            <p><strong>{"{{ ai_summary }}"}</strong> — {t("pdf_templates.var_ai_summary")}</p>
          </div>
        )}

        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-2">
            <label className="text-sm font-medium">{t("pdf_templates.name")}</label>
            <input value={name} onChange={(e) => setName(e.target.value)} required
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" />
          </div>
          <div className="space-y-2">
            <label className="text-sm font-medium">{t("pdf_templates.locale")}</label>
            <select value={locale} onChange={(e) => setLocale(e.target.value)}
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
              <option value="en">English</option>
              <option value="ru">Русский</option>
            </select>
          </div>
        </div>

        <div className="space-y-2">
          <label className="text-sm font-medium">{t("pdf_templates.description")}</label>
          <input value={description} onChange={(e) => setDescription(e.target.value)}
            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" />
        </div>

        <div className="space-y-2">
          <label className="text-sm font-medium">{t("pdf_templates.html_content")}</label>
          <textarea value={htmlContent} onChange={(e) => setHtmlContent(e.target.value)} required rows={16}
            className="w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-xs font-mono" />
        </div>

        <div className="flex gap-2">
          <button onClick={resetForm} className="h-9 rounded-md border px-4 text-sm">{t("common.cancel")}</button>
          <button onClick={handlePreview} disabled={!htmlContent.trim()}
            className="inline-flex h-9 items-center gap-1 rounded-md border px-4 text-sm hover:bg-accent">
            <Eye className="h-4 w-4" /> {t("pdf_templates.preview")}
          </button>
          <button
            onClick={() => editing ? updateMut.mutate() : createMut.mutate()}
            disabled={!name.trim() || !htmlContent.trim()}
            className="h-9 rounded-md bg-primary px-4 text-sm text-primary-foreground disabled:opacity-50">
            {t("common.save")}
          </button>
        </div>

        {previewHtml && (
          <div className="space-y-2">
            <h3 className="text-sm font-medium">{t("pdf_templates.preview")}</h3>
            <iframe srcDoc={previewHtml} className="w-full h-96 rounded-lg border" sandbox="" />
          </div>
        )}
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold">{t("pdf_templates.title")}</h1>
        <button onClick={() => setCreating(true)}
          className="inline-flex h-9 items-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground">
          <Plus className="h-4 w-4" /> {t("common.create")}
        </button>
      </div>

      {templates.length === 0 && (
        <p className="text-center text-muted-foreground py-8">{t("pdf_templates.no_templates")}</p>
      )}

      <div className="space-y-2">
        {templates.map((tmpl) => (
          <div key={tmpl.id} className="flex items-center gap-3 rounded-lg border bg-card p-4">
            <FileText className="h-5 w-5 text-primary shrink-0" />
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <p className="font-medium">{tmpl.name}</p>
                <span className="rounded-full bg-muted px-2 py-0.5 text-xs">{tmpl.locale.toUpperCase()}</span>
                {tmpl.is_default && <span className="rounded-full bg-primary/10 text-primary px-2 py-0.5 text-xs">{t("pdf_templates.default")}</span>}
                {!tmpl.is_active && <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">{t("pdf_templates.inactive")}</span>}
              </div>
              {tmpl.description && <p className="text-sm text-muted-foreground truncate">{tmpl.description}</p>}
            </div>
            <div className="flex gap-1">
              <button onClick={() => startEdit(tmpl)} className="rounded p-2 hover:bg-accent"><Pencil className="h-4 w-4" /></button>
              {!tmpl.is_default && (
                <button onClick={() => deleteMut.mutate(tmpl.id)} className="rounded p-2 hover:bg-destructive/10 hover:text-destructive">
                  <Trash2 className="h-4 w-4" />
                </button>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}