"use client";

import { useEffect, useMemo, useState } from "react";
import { ChatPane } from "@/components/ChatPane";
import { HeaderToggles } from "@/components/HeaderToggles";
import { ProcessStepper } from "@/components/ProcessStepper";
import { ProfilePane } from "@/components/ProfilePane";
import { emptyProfile, type ApplicantProfile } from "@/lib/mortgage/schema";
import type { ProcessStep } from "@/lib/mortgage/gates";

type CasePayload = {
  caseId: string;
  status: string;
  stopPath?: string | null;
  process: { step: ProcessStep; missingRequired: string[]; blocked?: boolean };
  profile: ApplicantProfile;
  messages: {
    id: string;
    role: "user" | "assistant";
    content: string;
    citations?: { source_path: string; title?: string }[] | null;
  }[];
};

export default function MortgagePage() {
  const [showProfile, setShowProfile] = useState(true);
  const [showProgress, setShowProgress] = useState(true);
  const [data, setData] = useState<CasePayload | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const p = localStorage.getItem("showProfile");
    const g = localStorage.getItem("showProgress");
    if (p != null) setShowProfile(p === "1");
    if (g != null) setShowProgress(g === "1");
  }, []);

  useEffect(() => {
    localStorage.setItem("showProfile", showProfile ? "1" : "0");
    localStorage.setItem("showProgress", showProgress ? "1" : "0");
  }, [showProfile, showProgress]);

  function applyCase(d: CasePayload) {
    setData(d);
    setError(null);
    sessionStorage.setItem("mortgageCaseId", d.caseId);
    const u = new URL(window.location.href);
    u.searchParams.delete("new");
    u.searchParams.set("case", d.caseId);
    window.history.replaceState({}, "", u);
  }

  async function startNewCase() {
    if (sessionStorage.getItem("mortgageCaseBooting") === "1") return;
    sessionStorage.removeItem("mortgageCaseId");
    sessionStorage.setItem("mortgageCaseBooting", "1");
    setData(null);
    setError(null);
    try {
      const res = await fetch("/api/mortgage/case", { method: "POST" });
      const d = await res.json();
      if (d.error) {
        setError(d.error + (d.hint ? ` (${d.hint})` : ""));
        return;
      }
      applyCase(d);
    } catch (e) {
      setError(String(e));
    } finally {
      sessionStorage.removeItem("mortgageCaseBooting");
    }
  }

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    if (params.get("new") === "1") {
      void startNewCase();
      return;
    }
    const id = params.get("case") || sessionStorage.getItem("mortgageCaseId");
    if (id) {
      fetch(`/api/mortgage/case?id=${id}`)
        .then((r) => r.json())
        .then((d) => {
          if (d.error) {
            sessionStorage.removeItem("mortgageCaseId");
            setError(d.error);
          } else {
            applyCase(d);
          }
        });
      return;
    }
    if (sessionStorage.getItem("mortgageCaseBooting") === "1") return;
    sessionStorage.setItem("mortgageCaseBooting", "1");
    fetch("/api/mortgage/case", { method: "POST" })
      .then((r) => r.json())
      .then((d) => {
        sessionStorage.removeItem("mortgageCaseBooting");
        if (d.error) setError(d.error + (d.hint ? ` (${d.hint})` : ""));
        else {
          applyCase(d);
        }
      })
      .catch((e) => {
        sessionStorage.removeItem("mortgageCaseBooting");
        setError(String(e));
      });
  }, []);

  const grid = useMemo(() => {
    if (showProgress && showProfile) return "grid-cols-[220px_1fr_280px]";
    if (showProgress) return "grid-cols-[220px_1fr]";
    if (showProfile) return "grid-cols-[1fr_280px]";
    return "grid-cols-1";
  }, [showProgress, showProfile]);

  const profile = data?.profile || emptyProfile();
  const step = data?.process.step ?? 0;

  return (
    <div className="flex h-screen flex-col bg-[#0b1220] text-slate-100">
      <HeaderToggles
        showProfile={showProfile}
        showProgress={showProgress}
        onToggleProfile={() => setShowProfile((v) => !v)}
        onToggleProgress={() => setShowProgress((v) => !v)}
        onNewChat={() => void startNewCase()}
      />
      {error && <p className="bg-red-950 px-4 py-2 text-sm text-red-200">{error}</p>}
      <div className={`grid min-h-0 flex-1 ${grid}`}>
        {showProgress && (
          <ProcessStepper
            step={step}
            missing={data?.process.missingRequired || []}
            blocked={data?.process.blocked || data?.status === "stopped"}
          />
        )}
        <ChatPane
          caseId={data?.caseId || null}
          messages={data?.messages || []}
          disabled={data?.status === "stopped"}
          onUpdated={(d) => setData(d as CasePayload)}
        />
        {showProfile && <ProfilePane profile={profile} step={step} />}
      </div>
    </div>
  );
}