import { Markdown } from "~/ui/Markdown";
import type { Notebook, NotebookOutput } from "~/lib/code-intel";
import { cn } from "~/utils/cn";

function Output({ output }: { output: NotebookOutput }) {
  if (output.kind === "image") {
    return <img src={`data:${output.mime};base64,${output.data}`} alt="Cell output" className="max-w-full bg-white" />;
  }
  return (
    <pre
      className={cn(
        "overflow-x-auto font-mono text-xs leading-5 whitespace-pre-wrap",
        output.kind === "error" ? "text-kumo-danger" : output.stderr ? "text-kumo-warning" : "text-kumo-default",
      )}
    >
      {output.text}
    </pre>
  );
}

function Prompt({ label }: { label: string }) {
  return <div className="w-16 shrink-0 pt-2 text-right font-mono text-xs text-kumo-inactive">{label}</div>;
}

export function NotebookView({ notebook }: { notebook: Notebook }) {
  return (
    <div className="space-y-3 p-4">
      {notebook.cells.map((cell) => {
        if (cell.kind === "markdown") {
          return (
            <div key={cell.id} className="flex gap-3">
              <Prompt label="" />
              <Markdown html={cell.html} className="min-w-0 flex-1" />
            </div>
          );
        }
        if (cell.kind === "raw") {
          return (
            <div key={cell.id} className="flex gap-3">
              <Prompt label="" />
              <pre className="min-w-0 flex-1 font-mono text-xs whitespace-pre-wrap text-kumo-subtle">{cell.text}</pre>
            </div>
          );
        }
        const label = `[${cell.executionCount ?? " "}]`;
        return (
          <div key={cell.id} className="space-y-2">
            <div className="flex gap-3">
              <Prompt label={`In ${label}`} />
              <pre className="min-w-0 flex-1 overflow-x-auto rounded-md border border-kumo-hairline bg-kumo-base/70 p-2 font-mono text-xs leading-5 text-kumo-default">
                {cell.source}
              </pre>
            </div>
            {cell.outputs.length > 0 && (
              <div className="flex gap-3">
                <Prompt label={`Out ${label}`} />
                <div className="min-w-0 flex-1 space-y-2 pt-2">
                  {cell.outputs.map((output) => (
                    <Output key={output.id} output={output} />
                  ))}
                </div>
              </div>
            )}
          </div>
        );
      })}
      {notebook.truncated && <p className="text-xs text-kumo-subtle">Only the first cells are shown.</p>}
    </div>
  );
}