import Link from "next/link";
import { Markdown } from "@/lib/markdown";
import { fmtAgo, fmtBytes } from "@/lib/format";
import type { OpenedFile, WorkspaceListing } from "@/lib/articles/files";

// The files an article was written from, and the one that is open. Zero JS:
// each file is a link that sets `?ws=&rel=` on the page it sits on; markdown
// renders, a draft's JSON is pretty-printed with each top-level key folded,
// and HTML opens in a sandboxed iframe (no scripts, no same origin).

export default function WorkspacePanel({
  workspaces,
  opened,
  hrefFor,
  highlight,
}: {
  workspaces: WorkspaceListing[];
  opened: OpenedFile | null;
  hrefFor: (ws: string, rel: string) => string;
  /** A file to mark (the article's own draft), as `<ws>/<rel>`. */
  highlight?: string | null;
}) {
  if (workspaces.length === 0) return <p className="text-[12px] text-[var(--color-dim)]">no workspace found</p>;
  return (
    <div className="grid gap-4 min-[1100px]:grid-cols-[minmax(240px,320px)_1fr]" data-testid="workspace-panel">
      <div className="space-y-3">
        {workspaces.map((w) => (
          <div key={w.name} data-workspace={w.name}>
            <div className="mb-1 font-mono text-[11px] text-[var(--color-dim)]">{w.dir}</div>
            <ul className="space-y-0.5">
              {w.files.map((f) => {
                const on = opened?.ws === w.name && opened.rel === f.rel;
                const mine = highlight === `${w.name}/${f.rel}`;
                return (
                  <li key={f.rel} className="flex items-baseline gap-2 text-[12px]">
                    <Link
                      href={hrefFor(w.name, f.rel)}
                      aria-current={on ? "true" : undefined}
                      data-file={f.rel}
                      className={`truncate font-mono ${on ? "text-[var(--color-sel)]" : mine ? "text-[var(--color-text)]" : "text-[var(--color-dim)] hover:text-[var(--color-text)]"}`}
                    >
                      {f.rel}
                    </Link>
                    {mine && <span className="micro">this article</span>}
                    <span className="num ml-auto shrink-0 text-[10px] text-[var(--color-dim)]">
                      {fmtBytes(f.bytes)} · {fmtAgo(f.mtimeMs)}
                    </span>
                  </li>
                );
              })}
            </ul>
          </div>
        ))}
      </div>
      <div className="min-w-0">{opened ? <Opened file={opened} /> : <p className="text-[12px] text-[var(--color-dim)]">pick a file</p>}</div>
    </div>
  );
}

function Opened({ file }: { file: OpenedFile }) {
  const head = <div className="mb-2 font-mono text-[11px] text-[var(--color-dim)]">{file.rel}</div>;
  if (file.kind === "error") {
    return (
      <div>
        {head}
        <p className="text-[12px] text-[var(--color-bad)]">{file.message}</p>
      </div>
    );
  }
  if (file.kind === "html") {
    return (
      <div>
        {head}
        <iframe title={file.rel} src={file.url} sandbox="" className="h-[70vh] w-full rounded border border-[var(--color-line)] bg-white" />
      </div>
    );
  }
  if (file.kind === "json") {
    const v = file.value;
    const entries = v && typeof v === "object" && !Array.isArray(v) ? Object.entries(v as Record<string, unknown>) : null;
    return (
      <div data-opened="json">
        {head}
        {entries ? (
          <div className="space-y-1">
            {entries.map(([k, val]) => (
              <details key={k} open={typeof val !== "object" || val === null} className="rounded border border-[var(--color-line)] bg-[var(--color-panel)]">
                <summary className="cursor-pointer px-2 py-1 font-mono text-[12px] text-[var(--color-text)]">
                  {k}
                  {Array.isArray(val) ? <span className="micro ml-2">{val.length} items</span> : null}
                </summary>
                <pre className="max-h-[50vh] overflow-auto whitespace-pre-wrap px-2 pb-2 font-mono text-[11px] text-[var(--color-dim)]">
                  {JSON.stringify(val, null, 2)}
                </pre>
              </details>
            ))}
          </div>
        ) : (
          <pre className="overflow-auto whitespace-pre-wrap font-mono text-[11px]">{JSON.stringify(v, null, 2)}</pre>
        )}
      </div>
    );
  }
  return (
    <div data-opened="md">
      {head}
      <Markdown text={file.text} />
    </div>
  );
}