import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useEffect, useMemo, useState } from "react";
import { ProtectedLayout } from "@/components/protected-layout";
import { PageContainer, PageHeader } from "@/components/app-shell";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { FL_CIRCUITS } from "@/lib/florida";
import { Packer } from "docx";
import { buildPleadingDoc, downloadPleading, type PleadingFootnote, type PleadingSignature } from "@/lib/docx-pleading";
import { downloadPleadingPdf } from "@/lib/pdf-pleading";
import { RichTextEditor } from "@/components/documents/rich-text-editor";
import { supabase } from "@/integrations/supabase/client";
import { useAuth } from "@/lib/auth";
import { toast } from "sonner";
import { Download, FileText, Save, Loader2, Plus, Trash2, PenLine } from "lucide-react";

export const Route = createFileRoute("/documents/pleading/new")({
  component: PleadingNewPage,
  validateSearch: (search: Record<string, unknown>) => ({
    from: typeof search.from === "string" ? search.from : undefined,
  }),
});

function PleadingNewPage() {
  const { user } = useAuth();
  const navigate = useNavigate();
  const { from } = Route.useSearch();
  const [courtType, setCourtType] = useState<"CIRCUIT" | "COUNTY">("CIRCUIT");
  const [circuit, setCircuit] = useState<string>("ELEVENTH");
  const [county, setCounty] = useState<string>("Miami-Dade");
  const [plaintiffs, setPlaintiffs] = useState("");
  const [defendants, setDefendants] = useState("");
  const [caseNumber, setCaseNumber] = useState("");
  const [title, setTitle] = useState("");
  const [bodyHtml, setBodyHtml] = useState("<p></p>");
  const [footnotes, setFootnotes] = useState<PleadingFootnote[]>([]);
  const [footerLeft, setFooterLeft] = useState("");
  const [footerCenter, setFooterCenter] = useState("");
  const [footerRight, setFooterRight] = useState("");
  const [docName, setDocName] = useState("Pleading");
  const [saving, setSaving] = useState(false);

  // Attorney signature (loaded from profile)
  const [includeSignature, setIncludeSignature] = useState(true);
  const [sigBlock, setSigBlock] = useState("");
  const [sigTyped, setSigTyped] = useState("");
  const [sigImagePath, setSigImagePath] = useState<string>("");
  const [sigImageBytes, setSigImageBytes] = useState<Uint8Array | null>(null);
  const [sigImageDataUrl, setSigImageDataUrl] = useState<string>("");
  const [sigImageType, setSigImageType] = useState<"png" | "jpg" | "jpeg">("png");

  useEffect(() => {
    if (!user) return;
    (async () => {
      const { data } = await supabase
        .from("profiles")
        .select("*")
        .eq("id", user.id)
        .maybeSingle();
      if (!data) return;
      const d = data as any;
      setSigBlock(d.signature_block ?? "");
      setSigTyped(d.signature_typed ?? "");
      setSigImagePath(d.signature_image_path ?? "");
      if (d.signature_image_path) {
        try {
          const url = supabase.storage
            .from("avatars")
            .getPublicUrl(d.signature_image_path).data.publicUrl;
          const res = await fetch(url);
          const blob = await res.blob();
          const buf = new Uint8Array(await blob.arrayBuffer());
          setSigImageBytes(buf);
          const reader = new FileReader();
          reader.onload = () => setSigImageDataUrl(String(reader.result || ""));
          reader.readAsDataURL(blob);
          const ext = (d.signature_image_path.split(".").pop() || "png").toLowerCase();
          setSigImageType(ext === "jpg" || ext === "jpeg" ? "jpg" : "png");
        } catch {
          // Ignore – signature image is optional
        }
      }
    })();
  }, [user?.id]);

  const buildSignature = (): PleadingSignature | undefined => {
    if (!includeSignature) return undefined;
    if (!sigBlock.trim() && !sigImageBytes && !sigTyped.trim()) return undefined;
    return {
      block: sigBlock,
      typed: sigTyped || undefined,
      imageBytes: sigImageBytes ?? undefined,
      imageDataUrl: sigImageDataUrl || undefined,
      imageType: sigImageType,
    };
  };

  useEffect(() => {
    if (!from) return;
    (async () => {
      const { data, error } = await supabase
        .from("generated_documents")
        .select("name, payload")
        .eq("id", from)
        .maybeSingle();
      if (error || !data) return;
      const p = (data.payload || {}) as any;
      if (p.courtType) setCourtType(p.courtType);
      if (p.circuit) setCircuit(p.circuit);
      if (p.county) setCounty(p.county);
      if (typeof p.plaintiffs === "string") setPlaintiffs(p.plaintiffs);
      if (typeof p.defendants === "string") setDefendants(p.defendants);
      if (typeof p.caseNumber === "string") setCaseNumber(p.caseNumber);
      if (typeof p.title === "string") setTitle(p.title);
      if (typeof p.bodyHtml === "string") setBodyHtml(p.bodyHtml);
      if (Array.isArray(p.footnotes)) setFootnotes(p.footnotes);
      if (typeof p.footerLeft === "string") setFooterLeft(p.footerLeft);
      if (typeof p.footerCenter === "string") setFooterCenter(p.footerCenter);
      if (typeof p.footerRight === "string") setFooterRight(p.footerRight);
      setDocName(`${data.name} (copy)`);
      toast.success("Loaded saved pleading");
    })();
  }, [from]);

  const counties = useMemo(() => {
    const c = FL_CIRCUITS.find((x) => x.value === circuit);
    return c?.counties ?? [];
  }, [circuit]);

  const handleCircuitChange = (v: string) => {
    setCircuit(v);
    const c = FL_CIRCUITS.find((x) => x.value === v);
    if (c && !c.counties.includes(county)) setCounty(c.counties[0]);
  };

  const input = {
    courtType, circuit, county,
    plaintiffs, defendants, caseNumber,
    title, bodyHtml, footnotes,
    footerLeft, footerCenter, footerRight,
    signature: buildSignature(),
  };

  const headerLine1 = `IN THE ${courtType} COURT OF THE ${circuit} JUDICIAL CIRCUIT,`;
  const headerLine2 = `IN AND FOR ${county.toUpperCase()} COUNTY, FLORIDA`;

  const onDownload = async () => {
    await downloadPleading(input, docName || "Pleading");
  };

  const onDownloadPdf = async () => {
    await downloadPleadingPdf(input, docName || "Pleading");
  };

  const onSave = async () => {
    setSaving(true);
    try {
      const doc = buildPleadingDoc(input);
      const blob = await Packer.toBlob(doc);
      const safe = (docName || "Pleading").replace(/[^a-zA-Z0-9._-]/g, "_");
      const path = `${user?.id}/${Date.now()}-${safe}.docx`;
      const { error: upErr } = await supabase.storage.from("generated-documents").upload(path, blob, {
        contentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      });
      if (upErr) throw upErr;
      const { error: insErr } = await supabase.from("generated_documents").insert({
        name: docName || "Pleading",
        kind: "pleading",
        payload: input as any,
        storage_path: path,
        created_by: user?.id,
      });
      if (insErr) throw insErr;
      toast.success("Pleading saved");
      navigate({ to: "/documents" });
    } catch (e: any) {
      toast.error(e.message ?? "Save failed");
    } finally {
      setSaving(false);
    }
  };

  const addFootnote = () => {
    const nextId = (footnotes[footnotes.length - 1]?.id ?? 0) + 1;
    setFootnotes([...footnotes, { id: nextId, text: "" }]);
  };
  const updateFootnote = (id: number, text: string) =>
    setFootnotes(footnotes.map((f) => (f.id === id ? { ...f, text } : f)));
  const removeFootnote = (id: number) => {
    const remaining = footnotes.filter((f) => f.id !== id).map((f, i) => ({ ...f, id: i + 1 }));
    setFootnotes(remaining);
  };

  return (
    <ProtectedLayout>
      <PageContainer>
        <PageHeader
          title="New Pleading"
          description="Florida court caption · Bookman Old Style, 12pt"
          actions={
            <>
              <Button variant="outline" onClick={onDownloadPdf}><FileText className="h-4 w-4 mr-2" /> Download PDF</Button>
              <Button variant="outline" onClick={onDownload}><Download className="h-4 w-4 mr-2" /> Download .docx</Button>
              <Button onClick={onSave} disabled={saving}>
                {saving ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Save className="h-4 w-4 mr-2" />}
                Save & download
              </Button>
            </>
          }
        />

        {/* Top row: settings + caption preview */}
        <div className="grid lg:grid-cols-2 gap-6">
          <Card>
            <CardContent className="p-5 space-y-5">
              <div className="space-y-1.5">
                <Label>Document name</Label>
                <Input value={docName} onChange={(e) => setDocName(e.target.value)} placeholder="e.g. Complaint - Smith v. Jones" />
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div className="space-y-1.5">
                  <Label>Court</Label>
                  <Select value={courtType} onValueChange={(v) => setCourtType(v as any)}>
                    <SelectTrigger><SelectValue /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="CIRCUIT">CIRCUIT</SelectItem>
                      <SelectItem value="COUNTY">COUNTY</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-1.5">
                  <Label>Judicial circuit</Label>
                  <Select value={circuit} onValueChange={handleCircuitChange}>
                    <SelectTrigger><SelectValue /></SelectTrigger>
                    <SelectContent className="max-h-72">
                      {FL_CIRCUITS.map((c) => (
                        <SelectItem key={c.value} value={c.value}>{c.label} ({c.value})</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-1.5">
                  <Label>County</Label>
                  <Select value={county} onValueChange={setCounty}>
                    <SelectTrigger><SelectValue /></SelectTrigger>
                    <SelectContent className="max-h-72">
                      {counties.map((co) => (
                        <SelectItem key={co} value={co}>{co}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <Label>Plaintiff(s)</Label>
                  <Textarea rows={3} value={plaintiffs} onChange={(e) => setPlaintiffs(e.target.value)} placeholder="One name per line" />
                </div>
                <div className="space-y-1.5">
                  <Label>Defendant(s)</Label>
                  <Textarea rows={3} value={defendants} onChange={(e) => setDefendants(e.target.value)} placeholder="One name per line" />
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div className="space-y-1.5">
                  <Label>Case No.</Label>
                  <Input value={caseNumber} onChange={(e) => setCaseNumber(e.target.value)} placeholder="e.g. 2025-CA-001234" />
                </div>
                <div className="space-y-1.5">
                  <Label>Pleading title</Label>
                  <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="e.g. COMPLAINT FOR DAMAGES" />
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Caption preview */}
          <Card>
            <CardContent className="p-0">
              <div className="bg-muted/30 px-4 py-2 border-b text-xs uppercase tracking-wider text-muted-foreground">Caption preview</div>
              <div
                className="p-8 bg-white text-black"
                style={{ fontFamily: '"Bookman Old Style", "URW Bookman", Georgia, serif', fontSize: 12 }}
              >
                <div className="text-center font-bold leading-snug">
                  <div>{headerLine1}</div>
                  <div>{headerLine2}</div>
                </div>

                <div className="mt-6 flex">
                  <div className="flex-1 pr-4 border-r border-b border-black font-bold">
                    <div className="whitespace-pre-line min-h-[1.5em]">{plaintiffs || " "}</div>
                    <div className="mt-3">Plaintiff(s),</div>
                    <div className="mt-3">v.</div>
                    <div className="mt-3 whitespace-pre-line min-h-[1.5em]">{defendants || " "}</div>
                    <div className="mt-3">Defendant(s).</div>
                  </div>
                  <div className="w-[40%] pl-4">
                    <div className="font-bold">CASE NO.: {caseNumber}</div>
                  </div>
                </div>

                {title && (
                  <div className="text-center font-bold mt-8">{title.toUpperCase()}</div>
                )}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Full-width body editor */}
        <Card className="mt-6">
          <CardContent className="p-5 space-y-3">
            <div className="flex items-center justify-between">
              <div>
                <Label className="text-base">Body</Label>
                <p className="text-xs text-muted-foreground mt-0.5">
                  Bookman Old Style, 12pt · formatting and lists carry into the .docx
                </p>
              </div>
            </div>
            <RichTextEditor
              value={bodyHtml}
              onChange={setBodyHtml}
              minHeight={500}
            />
          </CardContent>
        </Card>

        {/* Footnotes */}
        <Card className="mt-6">
          <CardContent className="p-5 space-y-3">
            <div className="flex items-center justify-between">
              <div>
                <Label className="text-base">Footnotes</Label>
                <p className="text-xs text-muted-foreground mt-0.5">
                  Reference them in the body with <code className="px-1 rounded bg-muted">[1]</code>, <code className="px-1 rounded bg-muted">[2]</code>… (use the Footnote toolbar button to insert a superscript marker)
                </p>
              </div>
              <Button variant="outline" size="sm" onClick={addFootnote}>
                <Plus className="h-4 w-4 mr-1" /> Add footnote
              </Button>
            </div>

            {footnotes.length === 0 ? (
              <div className="text-sm text-muted-foreground italic py-4 text-center border border-dashed rounded">
                No footnotes yet.
              </div>
            ) : (
              <div className="space-y-2">
                {footnotes.map((f) => (
                  <div key={f.id} className="flex gap-2 items-start">
                    <div className="font-bold text-sm pt-2 w-8 text-right">{f.id}.</div>
                    <Textarea
                      rows={2}
                      value={f.text}
                      onChange={(e) => updateFootnote(f.id, e.target.value)}
                      placeholder="Footnote text…"
                      className="flex-1"
                    />
                    <Button variant="ghost" size="icon" onClick={() => removeFootnote(f.id)} title="Remove">
                      <Trash2 className="h-4 w-4 text-destructive" />
                    </Button>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

        {/* Attorney signature */}
        <Card className="mt-6">
          <CardContent className="p-5 space-y-4">
            <div className="flex items-start justify-between gap-4">
              <div>
                <Label className="text-base flex items-center gap-2">
                  <PenLine className="h-4 w-4 text-muted-foreground" /> Attorney signature
                </Label>
                <p className="text-xs text-muted-foreground mt-0.5">
                  Pulled from your profile. Toggle off to omit. Edit it in{" "}
                  <a className="underline" href="/settings/profile">Settings → Profile</a>.
                </p>
              </div>
              <div className="flex items-center gap-2">
                <Switch checked={includeSignature} onCheckedChange={setIncludeSignature} />
                <span className="text-xs text-muted-foreground">
                  {includeSignature ? "Included" : "Omitted"}
                </span>
              </div>
            </div>

            {includeSignature ? (
              !sigBlock.trim() && !sigImagePath && !sigTyped.trim() ? (
                <div className="text-sm italic text-muted-foreground border border-dashed rounded p-3">
                  No signature found on your profile yet. Add one in Settings → Profile.
                </div>
              ) : (
                <div
                  className="border rounded-md p-4 bg-white text-black"
                  style={{ fontFamily: '"Bookman Old Style", Georgia, serif', fontSize: 12 }}
                >
                  <div style={{ marginLeft: "66.6%" }}>
                    {sigImagePath && sigImageDataUrl ? (
                      <img
                        src={sigImageDataUrl}
                        alt="Signature"
                        className="mb-1 max-h-[50px] object-contain"
                      />
                    ) : sigTyped.trim() ? (
                      <div
                        className="mb-1"
                        style={{ fontFamily: '"Lucida Handwriting", "Brush Script MT", cursive', fontSize: 18 }}
                      >
                        {sigTyped}
                      </div>
                    ) : (
                      <div className="h-10" />
                    )}
                    <div>_______________________________</div>
                    <pre className="whitespace-pre-wrap font-[inherit] text-[12px] leading-snug mt-1">
                      {sigBlock || <span className="text-muted-foreground italic">(no block text)</span>}
                    </pre>
                  </div>
                </div>
              )
            ) : null}
          </CardContent>
        </Card>

        {/* Footer */}
        <Card className="mt-6">
          <CardContent className="p-5 space-y-3">
            <div>
              <Label className="text-base">Page footer</Label>
              <p className="text-xs text-muted-foreground mt-0.5">
                Three columns. The right column always ends with <code className="px-1 rounded bg-muted">Page X of Y</code>.
              </p>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
              <div className="space-y-1.5">
                <Label className="text-xs">Left</Label>
                <Input value={footerLeft} onChange={(e) => setFooterLeft(e.target.value)} placeholder="e.g. Smith v. Jones" />
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs">Center</Label>
                <Input value={footerCenter} onChange={(e) => setFooterCenter(e.target.value)} placeholder="e.g. Case No. 2025-CA-001234" />
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs">Right (prefix)</Label>
                <Input value={footerRight} onChange={(e) => setFooterRight(e.target.value)} placeholder="(optional text before Page X of Y)" />
              </div>
            </div>
            <div className="border rounded-md p-3 bg-muted/20 grid grid-cols-3 text-xs" style={{ fontFamily: '"Bookman Old Style", Georgia, serif' }}>
              <div className="text-left truncate">{footerLeft || <span className="text-muted-foreground italic">left</span>}</div>
              <div className="text-center truncate">{footerCenter || <span className="text-muted-foreground italic">center</span>}</div>
              <div className="text-right truncate">{footerRight ? `${footerRight} ` : ""}Page 1 of N</div>
            </div>
          </CardContent>
        </Card>
      </PageContainer>
    </ProtectedLayout>
  );
}