"use client";

import * as React from "react";
import { Bot, Loader2, SendHorizontal, Sparkles, X } from "lucide-react";

import { streamPortfolioAsk, type RagSseEvent } from "@/app/customer/[tenant]/rag/_lib/portfolio-agent-client";
import { SoftMarkdown } from "@/components/sidebar/portfolio-agent/soft-markdown";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

/** POC starter asks — matches tools the stub router already handles. */
const POC_PREDEFINED_ASKS = [
  "Summarise my portfolio",
  "What’s my AUM today?",
  "Which names are most profitable?",
  "What qty of US0378331005 (Apple) do I have?",
  "How is US0378331005 performing?",
  "Which client holds the most US0378331005?",
  "Analyze my book against TSML",
  "Should I sell Apple?",
] as const;

type StepCard = {
  id: string;
  title: string;
  resultCount?: number;
  status?: string;
  queryLabel?: string;
};

type ThreadItem =
  | { kind: "user"; id: string; text: string }
  | { kind: "steps"; id: string; steps: StepCard[] }
  | { kind: "assistant"; id: string; text: string }
  | { kind: "clarify"; id: string; text: string }
  | { kind: "refused"; id: string; text: string }
  | { kind: "error"; id: string; text: string };

type PortfolioAgentPanelProps = {
  tenant: string;
  open: boolean;
  onOpenChange: (open: boolean) => void;
};

export function PortfolioAgentPanel({ tenant, open, onOpenChange }: PortfolioAgentPanelProps) {
  const [items, setItems] = React.useState<ThreadItem[]>([]);
  const [input, setInput] = React.useState("");
  const [sessionId, setSessionId] = React.useState<string | null>(null);
  const [busy, setBusy] = React.useState(false);
  const bottomRef = React.useRef<HTMLDivElement | null>(null);
  const abortRef = React.useRef<AbortController | null>(null);

  React.useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [items, busy]);

  React.useEffect(() => {
    if (!open) {
      abortRef.current?.abort();
      abortRef.current = null;
      setBusy(false);
    }
  }, [open]);

  async function sendMessage(raw: string) {
    const message = raw.trim();
    if (!message || busy) return;

    setInput("");
    const userId = `u_${Date.now()}`;
    const stepsId = `s_${Date.now()}`;
    const assistantId = `a_${Date.now()}`;

    setItems((prev) => [
      ...prev,
      { kind: "user", id: userId, text: message },
      { kind: "steps", id: stepsId, steps: [] },
    ]);
    setBusy(true);

    const controller = new AbortController();
    abortRef.current = controller;

    let assistantText = "";
    let sawAssistant = false;

    const upsertSteps = (mutator: (steps: StepCard[]) => StepCard[]) => {
      setItems((prev) =>
        prev.map((item) =>
          item.kind === "steps" && item.id === stepsId
            ? { ...item, steps: mutator(item.steps) }
            : item,
        ),
      );
    };

    const ensureAssistant = () => {
      if (sawAssistant) return;
      sawAssistant = true;
      setItems((prev) => [...prev, { kind: "assistant", id: assistantId, text: "" }]);
    };

    try {
      await streamPortfolioAsk({
        tenant,
        message,
        sessionId,
        signal: controller.signal,
        onEvent: (event: RagSseEvent) => {
          if (event.event === "session" && typeof event.session_id === "string") {
            setSessionId(event.session_id);
            return;
          }
          if (event.event === "step_start" && typeof event.id === "string") {
            const stepId = event.id;
            const stepTitle = String(event.title ?? event.type ?? "Working…");
            upsertSteps((steps) => [
              ...steps.filter((s) => s.id !== stepId),
              {
                id: stepId,
                title: stepTitle,
              },
            ]);
            return;
          }
          if (event.event === "step_end" && typeof event.id === "string") {
            const stepId = event.id;
            const payload =
              event.payload && typeof event.payload === "object"
                ? (event.payload as Record<string, unknown>)
                : null;
            const queryLabel =
              typeof payload?.query_label === "string"
                ? payload.query_label
                : typeof payload?.isin === "string"
                  ? payload.isin
                  : typeof payload?.query === "string"
                    ? payload.query
                    : undefined;
            upsertSteps((steps) =>
              steps.map((s) =>
                s.id === stepId
                  ? {
                      ...s,
                      title: String(event.title ?? s.title),
                      resultCount:
                        typeof event.result_count === "number"
                          ? event.result_count
                          : s.resultCount,
                      status: typeof event.status === "string" ? event.status : s.status,
                      queryLabel: queryLabel ?? s.queryLabel,
                    }
                  : s,
              ),
            );
            return;
          }
          if (event.event === "token" && typeof event.text === "string") {
            ensureAssistant();
            assistantText += event.text;
            const snapshot = assistantText;
            setItems((prev) =>
              prev.map((item) =>
                item.kind === "assistant" && item.id === assistantId
                  ? { ...item, text: snapshot }
                  : item,
              ),
            );
            return;
          }
          if (event.event === "clarify" && typeof event.message === "string") {
            setItems((prev) => [
              ...prev,
              { kind: "clarify", id: `c_${Date.now()}`, text: event.message as string },
            ]);
            return;
          }
          if (event.event === "refused" && typeof event.message === "string") {
            setItems((prev) => [
              ...prev,
              { kind: "refused", id: `r_${Date.now()}`, text: event.message as string },
            ]);
            return;
          }
          if (event.event === "error") {
            setItems((prev) => [
              ...prev,
              {
                kind: "error",
                id: `e_${Date.now()}`,
                text: String(event.message ?? "Something went wrong"),
              },
            ]);
          }
        },
      });
    } catch (err) {
      if ((err as Error)?.name === "AbortError") return;
      setItems((prev) => [
        ...prev,
        {
          kind: "error",
          id: `e_${Date.now()}`,
          text: err instanceof Error ? err.message : "Ask failed",
        },
      ]);
    } finally {
      setBusy(false);
      abortRef.current = null;
    }
  }

  function clearThread() {
    if (busy) return;
    setItems([]);
    setSessionId(null);
    setInput("");
  }

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent
        side="right"
        showCloseButton={false}
        className={cn(
          "flex h-full flex-col gap-0 p-0",
          // Wider than default sheet (sm:max-w-sm) — ~560–640px on desktop.
          "w-full sm:!max-w-xl md:!max-w-2xl",
        )}
      >
        <SheetHeader className="shrink-0 space-y-0 border-b px-5 py-4 text-left">
          <div className="flex items-start justify-between gap-3">
            <div className="min-w-0 space-y-1">
              <SheetTitle className="flex items-center gap-2 text-lg font-semibold tracking-tight">
                <span className="flex size-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
                  <Bot className="size-4" />
                </span>
                Portfolio Analysis
              </SheetTitle>
              <SheetDescription className="text-sm">
                Ask anything about your live book — POC with starter questions below.
              </SheetDescription>
            </div>
            <div className="flex shrink-0 items-center gap-1">
              {items.length > 0 ? (
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="h-8 text-xs text-muted-foreground"
                  onClick={clearThread}
                  disabled={busy}
                >
                  New chat
                </Button>
              ) : null}
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="size-8"
                onClick={() => onOpenChange(false)}
                aria-label="Close"
              >
                <X className="size-4" />
              </Button>
            </div>
          </div>
        </SheetHeader>

        <ScrollArea className="min-h-0 flex-1">
          <div className="flex flex-col gap-4 px-5 py-4 pb-6">
            {items.length === 0 ? (
              <div className="space-y-4">
                <div className="flex items-center gap-2 text-sm font-medium text-foreground">
                  <Sparkles className="size-4 text-primary" />
                  Starter questions
                </div>
                <div className="grid gap-2 sm:grid-cols-2">
                  {POC_PREDEFINED_ASKS.map((ask) => (
                    <button
                      key={ask}
                      type="button"
                      disabled={busy}
                      onClick={() => void sendMessage(ask)}
                      className={cn(
                        "rounded-xl border bg-card px-3.5 py-3 text-left text-sm leading-snug shadow-sm",
                        "transition-colors hover:border-primary/40 hover:bg-muted/60",
                        "disabled:pointer-events-none disabled:opacity-50",
                      )}
                    >
                      {ask}
                    </button>
                  ))}
                </div>
              </div>
            ) : null}

            {items.map((item) => {
              if (item.kind === "user") {
                return (
                  <div
                    key={item.id}
                    className="ml-10 max-w-[90%] self-end rounded-2xl bg-primary px-4 py-2.5 text-sm leading-relaxed text-primary-foreground"
                  >
                    {item.text}
                  </div>
                );
              }
              if (item.kind === "steps") {
                if (item.steps.length === 0) return null;
                return (
                  <ul
                    key={item.id}
                    className="space-y-1.5 rounded-lg bg-sky-500/5 px-3 py-2 text-xs text-sky-700 dark:text-sky-300"
                  >
                    {item.steps.map((step) => (
                      <li key={step.id} className="flex flex-col gap-0.5">
                        <span className="flex items-center gap-2">
                          <span className="text-emerald-600 dark:text-emerald-400">✓</span>
                          <span>
                            {step.title}
                            {typeof step.resultCount === "number"
                              ? ` · ${step.resultCount} result${step.resultCount === 1 ? "" : "s"}`
                              : ""}
                          </span>
                        </span>
                        {step.queryLabel ? (
                          <span className="pl-5 text-[11px] text-muted-foreground">
                            Queried: {step.queryLabel}
                          </span>
                        ) : null}
                      </li>
                    ))}
                  </ul>
                );
              }
              if (item.kind === "assistant" || item.kind === "clarify") {
                return (
                  <div
                    key={item.id}
                    className={cn(
                      "mr-6 max-w-[95%] rounded-2xl border px-4 py-3 text-[15px] leading-relaxed shadow-sm",
                      item.kind === "clarify"
                        ? "border-amber-500/35 bg-amber-500/5"
                        : "bg-card",
                    )}
                  >
                    <SoftMarkdown text={item.text} />
                  </div>
                );
              }
              return (
                <div
                  key={item.id}
                  className="mr-6 max-w-[95%] rounded-2xl border border-destructive/35 bg-destructive/5 px-4 py-3 text-sm leading-relaxed text-destructive"
                >
                  {item.text}
                </div>
              );
            })}

            {busy ? (
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <Loader2 className="size-4 animate-spin" />
                Working…
              </div>
            ) : null}
            <div ref={bottomRef} />
          </div>
        </ScrollArea>

        <div className="shrink-0 border-t bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/80">
          {items.length > 0 ? (
            <div className="flex flex-wrap gap-2 px-5 pt-3">
              {POC_PREDEFINED_ASKS.map((ask) => (
                <button
                  key={ask}
                  type="button"
                  disabled={busy}
                  onClick={() => void sendMessage(ask)}
                  title={ask}
                  className={cn(
                    "rounded-full border bg-muted/40 px-3 py-1 text-xs text-muted-foreground",
                    "hover:bg-muted hover:text-foreground",
                    "disabled:pointer-events-none disabled:opacity-50",
                  )}
                >
                  {ask.length > 42 ? `${ask.slice(0, 40)}…` : ask}
                </button>
              ))}
            </div>
          ) : null}
          <form
            className="flex items-end gap-3 px-5 py-4"
            onSubmit={(e) => {
              e.preventDefault();
              void sendMessage(input);
            }}
          >
            <Textarea
              value={input}
              onChange={(e) => setInput(e.target.value)}
              placeholder="Ask anything about your portfolio…"
              rows={3}
              className="min-h-[4.5rem] flex-1 resize-none rounded-xl text-sm"
              onKeyDown={(e) => {
                if (e.key === "Enter" && !e.shiftKey) {
                  e.preventDefault();
                  void sendMessage(input);
                }
              }}
              disabled={busy}
            />
            <Button
              type="submit"
              size="icon"
              className="size-11 shrink-0 rounded-xl"
              disabled={busy || !input.trim()}
              aria-label="Send"
            >
              <SendHorizontal className="size-4" />
            </Button>
          </form>
        </div>
      </SheetContent>
    </Sheet>
  );
}