import { useQuery } from "@tanstack/react-query";
import { X } from "lucide-react";
import { getSessionDocuments } from "../api/sessions";
import type { SessionDocument, SessionSummary } from "../api/types";
import { Button } from "../components/ui/button";
import { SqlViewer } from "../viewers/SqlViewer";
import { SchemaLinkingViewer } from "../viewers/SchemaLinkingViewer";
import { MarkdownView } from "../viewers/MarkdownView";

interface Props {
  session: SessionSummary;
  onClose: () => void;
  onResume: (id: string) => void;
}

function statusLabel(s: SessionSummary): string {
  if (s.archived) return "Archived";
  if (s.status === "finalized") return "Completed";
  return `In progress · ${s.status}`;
}

function DocBody({ doc }: { doc: SessionDocument }) {
  if (doc.format === "sql") return <SqlViewer blocks={[{ name: doc.title, sql: doc.content }]} />;
  if (doc.format === "markdown") return <MarkdownView source={doc.content} />;
  if (doc.format === "schema-linking") {
    try {
      const linking = JSON.parse(doc.content);
      return <SchemaLinkingViewer linking={linking} />;
    } catch {
      return <pre className="whitespace-pre-wrap text-xs">{doc.content}</pre>;
    }
  }
  if (doc.format === "decisions") {
    const lines = doc.content.split("\n").filter(Boolean);
    return (
      <details>
        <summary className="cursor-pointer text-sm text-muted-foreground">{`${lines.length} decisions`}</summary>
        <ul className="mt-2 flex flex-col gap-1 text-xs">
          {lines.map((line, i) => {
            let d: { type?: string; subject?: string; detail?: string };
            try { d = JSON.parse(line); } catch { d = {}; }
            return <li key={i} className="font-mono">[{d.type}] {d.subject}{d.detail ? ` — ${d.detail}` : ""}</li>;
          })}
        </ul>
      </details>
    );
  }
  return <p className="whitespace-pre-wrap text-sm">{doc.content}</p>;
}

export function SessionDocumentsPanel({ session, onClose, onResume }: Props) {
  const { data: docs = [], isLoading } = useQuery<SessionDocument[]>({
    queryKey: ["session-documents", session.id],
    queryFn: () => getSessionDocuments(session.id),
  });
  const resumable = session.status !== "finalized" && !session.archived;

  return (
    <aside className="flex w-[380px] shrink-0 flex-col border-r border-border bg-sidebar">
      <div className="flex items-start justify-between gap-2 border-b border-border/70 px-4 py-3">
        <div className="min-w-0">
          <h2 className="truncate font-heading text-sm font-semibold text-foreground">
            {session.name || session.question}
          </h2>
          <p className="mt-0.5 text-[0.7rem] uppercase tracking-wide text-muted-foreground">{statusLabel(session)}</p>
        </div>
        <div className="flex shrink-0 items-center gap-1">
          {resumable && (
            <Button size="sm" variant="outline" onClick={() => onResume(session.id)}>Resume</Button>
          )}
          <Button size="icon-sm" variant="ghost" aria-label="Close panel" onClick={onClose}>
            <X className="size-4" />
          </Button>
        </div>
      </div>
      <div className="flex-1 overflow-y-auto px-4 py-4">
        {isLoading ? (
          <p className="text-xs text-muted-foreground">Loading…</p>
        ) : (
          <div className="flex flex-col gap-5">
            {docs.map((doc) => (
              <section key={doc.key}>
                <h3 className="mb-2 text-[0.65rem] font-bold uppercase tracking-wide text-primary">
                  {doc.title}{doc.phase !== "—" ? ` · ${doc.phase}` : ""}
                </h3>
                <DocBody doc={doc} />
              </section>
            ))}
          </div>
        )}
      </div>
    </aside>
  );
}