import { useEffect, useState } from "react";
import { useRouter } from "@tanstack/react-router";
import { Pencil, Sparkles } from "lucide-react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Input, Textarea } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { grokStatus, reviewOrgProfile } from "@/lib/server/api-ai";
import { getAppSettings, updateOrgProfile, updateSettings } from "@/lib/server/api-core";
import type { OrgProfile } from "@/lib/types";
import { ORG_TYPE } from "@/lib/constants";
import { formatEin } from "@/lib/utils";

export function OrgProfileCard({ org }: { org: OrgProfile }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
        <div>
          <p className="text-[11px] font-medium tracking-[0.16em] text-muted-foreground uppercase">
            Org profile · Version {org.version}
          </p>
          <p className="mt-1 font-display text-xl">{org.name}</p>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <Badge variant="outline">{ORG_TYPE}</Badge>
          <Button size="default" variant="gold" onClick={() => setOpen(true)}>
            <Pencil className="size-4" />
            Edit
          </Button>
        </div>
      </div>
      <p className="max-w-3xl text-sm leading-relaxed">{org.mission_text}</p>
      <p className="mt-2 text-xs text-muted-foreground">
        EIN {formatEin(org.ein)} · {org.geography}
      </p>
      {org.focus_keywords.length ? (
        <ul className="mt-3 flex flex-wrap gap-1.5">
          {org.focus_keywords.slice(0, 12).map((k) => (
            <li key={k}>
              <Badge variant="muted">{k}</Badge>
            </li>
          ))}
        </ul>
      ) : null}
      <OrgProfileEditDialog org={org} open={open} onOpenChange={setOpen} />
    </>
  );
}

export function OrgProfileEditDialog({
  org,
  open,
  onOpenChange,
}: {
  org: OrgProfile;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  const router = useRouter();
  const [mission, setMission] = useState(org.mission_text);
  const [keywords, setKeywords] = useState(org.focus_keywords.join(", "));
  const [zero, setZero] = useState(org.zero_equity_language);
  const [geo, setGeo] = useState(org.geography);
  const [notes, setNotes] = useState("");
  const [dealAi, setDealAi] = useState(true);
  const [grokOn, setGrokOn] = useState<boolean | null>(null);
  const [busy, setBusy] = useState<"save" | "grok" | null>(null);

  useEffect(() => {
    if (!open) return;
    setMission(org.mission_text);
    setKeywords(org.focus_keywords.join(", "));
    setZero(org.zero_equity_language);
    setGeo(org.geography);
    setNotes("");
    void Promise.all([grokStatus(), getAppSettings()]).then(([g, s]) => {
      setGrokOn(g.available);
      setDealAi(s.deal_ai_enabled !== false);
    });
  }, [open, org]);

  async function save() {
    setBusy("save");
    try {
      const res = await updateOrgProfile({
        data: {
          mission_text: mission,
          focus_keywords: keywords
            .split(",")
            .map((s) => s.trim())
            .filter(Boolean),
          zero_equity_language: zero,
          geography: geo,
        },
      });
      await updateSettings({ data: { deal_ai_enabled: dealAi } });
      toast.success(`Org profile versioned · catalog rescored (${res.opportunities} listings)`);
      onOpenChange(false);
      await router.invalidate();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Could not save the profile.");
    } finally {
      setBusy(null);
    }
  }

  async function grokReview() {
    setBusy("grok");
    try {
      const res = await reviewOrgProfile({
        data: {
          mission_text: mission,
          focus_keywords: keywords
            .split(",")
            .map((s) => s.trim())
            .filter(Boolean),
          zero_equity_language: zero,
          geography: geo,
        },
      });
      setMission(res.mission_text);
      setKeywords(res.focus_keywords.join(", "));
      setZero(res.zero_equity_language);
      setGeo(res.geography);
      setNotes(res.notes);
      toast.success(
        res.available
          ? "Grok reviewed the profile. Check the notes, then save."
          : "Offline review applied. Save if you want the version.",
      );
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Grok could not review the profile.");
    } finally {
      setBusy(null);
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        title="Edit org profile"
        description={`${org.name} · EIN ${formatEin(org.ein)}. Version ${org.version}. Grok can tighten language; it will not change the legal name or EIN.`}
        className="max-h-[85dvh] max-w-2xl overflow-y-auto"
      >
        <div className="flex flex-col gap-4">
          <div className="rounded-xl border border-primary/30 bg-primary/8 p-4">
            <div className="flex flex-wrap items-start justify-between gap-3">
              <div>
                <p className="flex items-center gap-2 text-sm font-semibold">
                  <Sparkles className="size-4 text-primary" />
                  AI feature capabilities
                </p>
                <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
                  Grok reviews deal-room packets for donor-facing mistakes — invented numbers, medical claims,
                  equity language — then offers an enhanced copy. The student original is always kept. Instructors
                  see both.
                </p>
              </div>
              {grokOn === null ? (
                <Badge variant="muted">Checking Grok…</Badge>
              ) : grokOn ? (
                <Badge variant="success">Grok live</Badge>
              ) : (
                <Badge variant="warning">Offline fallback</Badge>
              )}
            </div>
            <div className="mt-3 flex items-center justify-between gap-3 rounded-lg bg-card px-3 py-3">
              <div>
                <p className="text-sm font-medium">Deal-room packet review</p>
                <p className="text-xs text-muted-foreground">
                  Every category: executive summary, business plan, financials, packet sections.
                </p>
              </div>
              <Switch checked={dealAi} onCheckedChange={setDealAi} aria-label="Enable deal-room Grok review" />
            </div>
          </div>

          <div className="flex flex-col gap-1.5">
            <Label>Mission</Label>
            <Textarea className="min-h-20" value={mission} onChange={(e) => setMission(e.target.value)} />
          </div>
          <div className="flex flex-col gap-1.5">
            <Label>Focus keywords</Label>
            <Textarea className="min-h-14" value={keywords} onChange={(e) => setKeywords(e.target.value)} />
          </div>
          <div className="flex flex-col gap-1.5">
            <Label>Zero-equity / claim boundary</Label>
            <Textarea className="min-h-16" value={zero} onChange={(e) => setZero(e.target.value)} />
          </div>
          <div className="flex flex-col gap-1.5">
            <Label>Geography</Label>
            <Input value={geo} onChange={(e) => setGeo(e.target.value)} />
          </div>
          {notes ? (
            <p className="rounded-lg bg-muted px-3 py-2 text-sm text-muted-foreground">{notes}</p>
          ) : null}
          <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
            <Button type="button" variant="outline" size="lg" disabled={busy !== null} onClick={() => void grokReview()}>
              <Sparkles className="size-4" />
              {busy === "grok" ? "Grok is reading…" : "Ask Grok to review"}
            </Button>
            <Button type="button" variant="gold" size="lg" disabled={busy !== null} onClick={() => void save()}>
              {busy === "save" ? "Saving…" : "Save and version"}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}