apps/web/components/shell/ChatShell.tsx

"use client";

import { useEffect, useState, useRef } from "react";
import Image from "next/image";
import { Send, History, Sparkles, Trash2, MessageSquare, Clock, ChevronLeft, Menu, X, Activity, Database } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import type { UIPlan } from "@/components/dynamic/types";

type Health = {
  status: string;
  duckdb_ok: boolean;
  tables: number;
  llm_keys: number;
  mode: string;
};

type HistoryEntry = { q: string; plan: UIPlan; ts: number };

type Props = {
  history: HistoryEntry[];
  onAsk: (q: string) => void;
  onSelect: (e: HistoryEntry) => void;
  onClear?: () => void;
  loading: boolean;
  children: React.ReactNode;
  liveMode?: boolean;
  onToggleLive?: () => void;
  onOpenKB?: () => void;
};

export function ChatShell({ history, onAsk, onSelect, onClear, loading, children, liveMode, onToggleLive, onOpenKB }: Props) {
  const [q, setQ] = useState("");
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const submit = () => {
    if (!q.trim() || loading) return;
    onAsk(q);
    setQ("");
  };

  return (
    <div className="grid min-h-screen max-w-full overflow-x-hidden grid-cols-1 lg:grid-cols-[280px_1fr]">

      {/* Mobile sidebar overlay */}

      <AnimatePresence>

        {sidebarOpen && (

          <motion.div

            initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}

            className="fixed inset-0 z-40 bg-black/30 backdrop-blur-sm lg:hidden"

            onClick={() => setSidebarOpen(false)}

          />

        )}

      </AnimatePresence>



      <Sidebar

        history={history}

        onSelect={(e) => { onSelect(e); setSidebarOpen(false); }}

        onClear={onClear}

        mobileOpen={sidebarOpen}

        onCloseMobile={() => setSidebarOpen(false)}

        liveMode={liveMode}

        onToggleLive={onToggleLive ? () => { onToggleLive(); setSidebarOpen(false); } : undefined}

        onOpenKB={onOpenKB ? () => { onOpenKB(); setSidebarOpen(false); } : undefined}

      />



      <main className="flex min-h-screen flex-col">

        <Topbar onMenuClick={() => setSidebarOpen(true)} />

        <section className={`flex-1 overflow-x-hidden ${liveMode ? "" : "px-4 py-6 sm:px-6"}`}>{children}</section>



        {/* ── Enhanced Input Bar ──────────────────────────────── */}

        <div className="sticky bottom-0 z-10 border-t border-mb-mist bg-white/85 px-4 py-3 backdrop-blur-lg">

          <form

            onSubmit={(e) => { e.preventDefault(); submit(); }}

            className="mx-auto max-w-4xl"

          >

            <div className="flex items-center gap-3 rounded-2xl border border-mb-amber-200/80 bg-white px-4 py-2 shadow-lg shadow-mb-orange/5 ring-1 ring-mb-orange/10 transition-shadow focus-within:shadow-xl focus-within:shadow-mb-orange/10 focus-within:ring-mb-orange/20">

              <Sparkles className="h-4 w-4 shrink-0 text-mb-orange" />

              <input

                ref={inputRef}

                value={q}

                onChange={(e) => setQ(e.target.value)}

                placeholder="Ask about budgets, programs, regional trends…"

                className="h-10 flex-1 bg-transparent text-[15px] text-mb-ink outline-none placeholder:text-mb-slate/40"

                suppressHydrationWarning

                autoComplete="off"

              />

              <div className="flex items-center gap-2">

                {q.trim() && (

                  <span className="hidden sm:inline text-[10px] text-mb-slate/40 font-mono">

                    ↵ Enter

                  </span>

                )}

                <button

                  type="submit"

                  disabled={loading || !q.trim()}

                  suppressHydrationWarning

                  className="flex h-9 items-center gap-2 rounded-xl bg-gradient-to-r from-mb-orange to-mb-yellow px-4 text-sm font-semibold text-white shadow-lg shadow-mb-orange/30 transition-all hover:brightness-105 hover:shadow-xl disabled:opacity-40 disabled:shadow-none"

                >

                  <Send className="h-4 w-4" />

                  <span className="hidden sm:inline">{loading ? "Thinking…" : "Ask"}</span>

                </button>

              </div>

            </div>

            <div className="mt-1.5 flex justify-center">

              <span className="text-[10px] text-mb-slate/35">

                Results include provenance citations from your database · No hallucinated data

              </span>

            </div>

          </form>

        </div>

      </main>

    </div>
  );
}

function Sidebar({

  history,

  onSelect,

  onClear,

  mobileOpen,

  onCloseMobile,

  liveMode,

  onToggleLive,

  onOpenKB,

}: Pick<Props, "history" | "onSelect" | "onClear" | "liveMode" | "onToggleLive" | "onOpenKB"> & {

  mobileOpen: boolean;

  onCloseMobile: () => void;

}) {
  return (
    <aside className={`

      ${mobileOpen ? "fixed inset-y-0 left-0 z-50 w-72 shadow-2xl" : "hidden"}

      border-r border-[#D4A11E]/35 bg-gradient-to-b from-[#F1C232] via-[#F6D76B] to-[#FFF1B8] p-4 backdrop-blur

      lg:relative lg:flex lg:flex-col lg:z-auto lg:w-auto lg:shadow-none

    `}>

      {/* Header */}

      <div className="flex items-center justify-between">

        <div className="flex items-center gap-2">

          <Image

            src="/magic-bus-logo.png"

            alt="Magic Bus India Foundation"

            width={36}

            height={36}

            className="rounded-lg shadow-sm"

            priority

          />

          <div>

            <div className="font-serif text-lg leading-none">FinAI</div>

            <div className="text-[10px] uppercase tracking-[0.12em] text-mb-slate/55">

              Adaptive Analytics

            </div>

          </div>

        </div>

        <button onClick={onCloseMobile} title="Close sidebar" className="rounded-md p-1 lg:hidden hover:bg-white/30">

          <X className="h-4 w-4" />

        </button>

      </div>



      {/* Live Insights toggle */}

      {onToggleLive && (

        <button

          type="button"

          onClick={onToggleLive}

          suppressHydrationWarning

          className={`mt-4 flex w-full items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold transition-all ${

            liveMode

              ? "bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-md"

              : "bg-white/50 text-mb-ink/80 ring-1 ring-mb-amber-200/40 hover:bg-white/70 hover:shadow-sm"

          }`}

        >

          <Activity className="h-4 w-4" />

          Live Insights

          <span className="relative ml-auto flex h-2.5 w-2.5">

            <span className={`absolute inline-flex h-full w-full rounded-full opacity-75 ${liveMode ? "animate-ping bg-white" : "bg-emerald-400"}`} />

            <span className={`relative inline-flex h-2.5 w-2.5 rounded-full ${liveMode ? "bg-white" : "bg-emerald-500"}`} />

          </span>

        </button>

      )}



      {/* Knowledge Base manager */}

      {onOpenKB && (

        <button

          type="button"

          onClick={onOpenKB}

          suppressHydrationWarning

          className="mt-2 flex w-full items-center gap-2 rounded-xl bg-white/50 px-3 py-2.5 text-sm font-semibold text-mb-ink/80 ring-1 ring-mb-amber-200/40 transition-all hover:bg-white/70 hover:shadow-sm"

        >

          <Database className="h-4 w-4 text-mb-amber-700" />

          Knowledge Base

          <span className="ml-auto rounded-full bg-mb-amber-100 px-2 py-0.5 text-[10px] font-medium text-mb-amber-800">

            Edit

          </span>

        </button>

      )}



      {/* History section */}

      <div className="mt-6 flex items-center justify-between">

        <div className="flex items-center gap-1.5 text-[11px] uppercase tracking-[0.12em] text-mb-slate/55 font-semibold">

          <Clock className="h-3 w-3" />

          History

          {history.length > 0 && (

            <span className="ml-1 rounded-full bg-white/50 px-1.5 py-0.5 text-[9px] font-bold text-mb-amber-800">

              {history.length}

            </span>

          )}

        </div>

        {history.length > 0 && onClear && (

          <button

            onClick={onClear}

            title="Clear history"

            className="rounded-md p-1 text-mb-slate/50 transition hover:bg-white/40 hover:text-rose-700"

          >

            <Trash2 className="h-3 w-3" />

          </button>

        )}

      </div>

      <ul className="mt-2 flex-1 space-y-0.5 overflow-y-auto pr-1 scrollbar-thin">

        {history.length === 0 ? (

          <li className="rounded-xl bg-[#F1C232]/15 p-3 text-[12px] text-mb-slate/60 leading-relaxed">

            <MessageSquare className="mb-1 h-4 w-4 text-mb-amber-700/40" />

            Your analysis history will appear here. Saved locally on this device.

          </li>

        ) : (

          history.map((h, i) => (

            <li key={`${h.q}-${i}`}>

              <button

                onClick={() => onSelect(h)}

                className="group/h w-full rounded-xl px-2.5 py-2 text-left transition-all hover:bg-gradient-to-r hover:from-[#F9E08B]/80 hover:to-[#FFF3C2]/80 hover:shadow-sm"

                title={h.q}

              >

                <div className="truncate text-[13px] font-medium text-mb-ink/90 group-hover/h:text-mb-amber-900">

                  {h.q}

                </div>

                {h.ts && (

                  <div className="mt-0.5 flex items-center gap-1 text-[10px] text-mb-slate/45 group-hover/h:text-mb-amber-700/60">

                    <Clock className="h-2.5 w-2.5" />

                    {fmtTime(h.ts)}

                  </div>

                )}

              </button>

            </li>

          ))

        )}

      </ul>

    </aside>
  );
}

function fmtTime(ts: number): string {
  const d = new Date(ts);
  const now = new Date();
  const sameDay = d.toDateString() === now.toDateString();
  return sameDay
    ? d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })
    : d.toLocaleDateString(undefined, { month: "short", day: "numeric" }) +
        " · " +
        d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
}

function Topbar({ onMenuClick }: { onMenuClick: () => void }) {
  const [h, setH] = useState<Health | null>(null);
  useEffect(() => {
    let alive = true;
    const load = () =>
      fetch("/api/backend/health")
        .then((r) => (r.ok ? r.json() : null))
        .then((j) => alive && setH(j))
        .catch(() => alive && setH(null));
    load();
    const id = setInterval(load, 15000);
    return () => {
      alive = false;
      clearInterval(id);
    };
  }, []);

  const tables = h?.tables ?? 0;
  const keys = h?.llm_keys ?? 0;
  const mode = h?.mode ?? "…";
  const dbOk = h?.duckdb_ok;
  const loadingHealth = h === null;

  const dotColor = loadingHealth
    ? "bg-yellow-400 animate-pulse"
    : dbOk && keys > 0
    ? "bg-emerald-400"
    : "bg-rose-400";

  return (
    <header className="flex items-center justify-between border-b border-[#D4A11E]/35 bg-gradient-to-r from-[#F1C232] via-[#F6D76B] to-[#FFF1B8] px-4 py-2.5 backdrop-blur sm:px-6">

      <div className="flex items-center gap-3">

        <button onClick={onMenuClick} title="Open sidebar" className="rounded-md p-1 lg:hidden hover:bg-white/30">

          <Menu className="h-5 w-5 text-mb-ink/70" />

        </button>

        <div className="flex items-center gap-2 text-sm text-mb-slate">

          <span className={`h-2 w-2 rounded-full ${dotColor}`} />

          <span className="font-semibold text-mb-orange">finai</span>

          <span className="hidden sm:inline text-mb-slate/40">·</span>

          <span className="hidden sm:inline text-[13px]">

            {loadingHealth

              ? "connecting…"

              : dbOk === false

              ? "database unavailable"

              : `${tables} tables · Llama 3.3`}

          </span>

        </div>

      </div>

      <div className="flex items-center gap-2 text-xs">

        {!loadingHealth && keys > 0 && (

          <span className="hidden sm:inline rounded-full bg-emerald-100/70 px-2 py-0.5 text-[10px] font-medium text-emerald-800 ring-1 ring-emerald-300/30">

            {keys} keys active

          </span>

        )}

        <span className="rounded-full bg-mb-amber-100/80 px-2 py-0.5 text-[10px] font-semibold text-mb-amber-800 ring-1 ring-mb-amber-200/60">

          FY 2025–26

        </span>

      </div>

    </header>
  );
}