"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { Braces, Download, Eye, FileCode2, FileSpreadsheet, FileText, FolderInput, FolderKanban, Image as ImageIcon, MessageSquarePlus, Pencil, Trash2 } from "lucide-react";
import { toast } from "@/components/ui/toast";
import { Skeleton, EmptyState } from "@/components/ui/misc";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { ConfirmDialog } from "@/components/common/confirm-dialog";
import { PromptDialog } from "@/components/common/prompt-dialog";
import { RowMenu } from "@/components/projects/row-menu";
import { ProjectIcon } from "@/components/projects/project-icon";
import { api } from "@/lib/client/api";
import { errorMessage } from "@/lib/client/humanize";
import { useIsMobile, useLongPress } from "@/lib/client/hooks";
import { formatRelative, formatTokens, cn } from "@/lib/utils";
import type { PublicProjectFile, PublicProject } from "@/lib/client/types";
import type { ActionSheetItem } from "@/components/ui/sheet";
import { formatBytes, kindLabel } from "./format";
import { prepareFilesForNewChat } from "./use-in-chat";

export function FileKindIcon({ kind, className }: { kind: string; className?: string }) {
  const c = cn("size-4", className);
  switch (kind) {
    case "image":
      return <ImageIcon className={c} />;
    case "csv":
      return <FileSpreadsheet className={c} />;
    case "json":
      return <Braces className={c} />;
    case "code":
      return <FileCode2 className={c} />;
    default:
      return <FileText className={c} />;
  }
}

/** 40 px thumbnail: real image preview for images, kind glyph otherwise. */
export function FileThumb({ file, size = "md" }: { file: PublicProjectFile; size?: "sm" | "md" }) {
  const dim = size === "sm" ? "size-8 rounded-md" : "size-10 rounded-lg";
  if (file.kind === "image") {
    // eslint-disable-next-line @next/next/no-img-element
    return <img src={`/api/library/files/${file.id}`} alt="" className={cn("shrink-0 object-cover bg-bg-muted", dim)} loading="lazy" />;
  }
  return (
    <span className={cn("flex shrink-0 items-center justify-center bg-bg-muted text-fg-muted", dim)} aria-hidden>
      <FileKindIcon kind={file.kind} />
    </span>
  );
}

export interface FileListProps {
  files: PublicProjectFile[] | undefined;
  loading?: boolean;
  /** Known projects, for the project label and the "Move to…" actions. */
  projects?: PublicProject[];
  /** Show the project chip on each row (global library view). */
  showProject?: boolean;
  onChanged?: () => void | Promise<unknown>;
  /** When set, "Use in new chat" also activates this project. */
  contextProjectId?: string | null;
  emptyTitle?: string;
  emptyDescription?: string;
  emptyAction?: React.ReactNode;
  className?: string;
}

/** Stacked rows (phone) / dense rows (desktop) with per-file actions. */
export function FileList({ files, loading, projects = [], showProject, onChanged, contextProjectId, emptyTitle = "No files yet", emptyDescription = "Upload PDFs, images, code or data once and reuse them in any chat.", emptyAction, className }: FileListProps) {
  const router = useRouter();
  const [preview, setPreview] = React.useState<PublicProjectFile | null>(null);
  const [editing, setEditing] = React.useState<PublicProjectFile | null>(null);
  const [deleting, setDeleting] = React.useState<PublicProjectFile | null>(null);
  const [moving, setMoving] = React.useState<PublicProjectFile | null>(null);
  const projectById = React.useMemo(() => new Map(projects.map((p) => [p.id, p])), [projects]);

  const attachToNewChat = async (f: PublicProjectFile) => {
    try {
      const { href } = await prepareFilesForNewChat([f.id]);
      router.push(contextProjectId ? `${href}&project=${encodeURIComponent(contextProjectId)}` : href);
    } catch (e) {
      toast.error("Could not attach file", errorMessage(e));
    }
  };
  const download = (f: PublicProjectFile) => {
    const a = document.createElement("a");
    a.href = `/api/library/files/${f.id}?download=1`;
    a.download = f.name;
    a.click();
  };
  const move = async (f: PublicProjectFile, projectId: string | null) => {
    try {
      await api(`/api/library/files/${f.id}`, { method: "PATCH", json: { projectId } });
      await onChanged?.();
      toast.success(projectId ? `Moved to ${projectById.get(projectId)?.name ?? "project"}` : "Moved to the global library");
    } catch (e) {
      toast.error("Could not move file", errorMessage(e));
    }
  };
  const remove = async (f: PublicProjectFile) => {
    try {
      await api(`/api/library/files/${f.id}`, { method: "DELETE" });
      await onChanged?.();
      toast.success("File deleted");
    } catch (e) {
      toast.error("Could not delete file", errorMessage(e));
      throw e;
    }
  };

  const itemsFor = (f: PublicProjectFile): (ActionSheetItem | "separator")[] => [
    { key: "use", label: "Use in new chat", icon: <MessageSquarePlus />, onSelect: () => void attachToNewChat(f) },
    { key: "preview", label: f.kind === "pdf" ? "Open" : "Preview", icon: <Eye />, onSelect: () => (f.kind === "pdf" ? window.open(`/api/library/files/${f.id}`, "_blank", "noopener") : setPreview(f)) },
    { key: "download", label: "Download", icon: <Download />, onSelect: () => download(f) },
    "separator",
    { key: "move", label: f.projectId ? "Move to another project…" : "Move to a project…", icon: <FolderInput />, onSelect: () => setMoving(f), disabled: projects.length === 0 && !f.projectId },
    { key: "edit", label: "Edit description", icon: <Pencil />, onSelect: () => setEditing(f) },
    "separator",
    { key: "delete", label: "Delete", icon: <Trash2 />, destructive: true, onSelect: () => setDeleting(f) },
  ];

  if (loading && !files) {
    return (
      <div className={cn("space-y-2", className)}>
        {Array.from({ length: 5 }).map((_, i) => (
          <Skeleton key={i} className="h-14" />
        ))}
      </div>
    );
  }
  if (!files?.length) return <EmptyState icon={<FileText />} title={emptyTitle} description={emptyDescription} action={emptyAction} className={className} />;

  return (
    <>
      <ul className={cn("divide-y divide-hairline rounded-xl border border-border bg-bg-elevated", className)}>
        {files.map((f) => (
          <FileRow key={f.id} file={f} project={showProject && f.projectId ? projectById.get(f.projectId) : undefined} items={itemsFor(f)} onOpen={() => (f.kind === "pdf" ? window.open(`/api/library/files/${f.id}`, "_blank", "noopener") : setPreview(f))} />
        ))}
      </ul>

      <FilePreviewSheet file={preview} onOpenChange={(o) => !o && setPreview(null)} onUse={attachToNewChat} onDownload={download} />

      <PromptDialog
        open={editing !== null}
        onOpenChange={(o) => !o && setEditing(null)}
        title="Description"
        description="Shown in the library and used as context when the file is injected into a prompt."
        defaultValue={editing?.description ?? ""}
        multiline
        maxLength={500}
        placeholder="Q3 pricing sheet, includes EU margins…"
        onSubmit={async (v) => {
          if (!editing) return;
          await api(`/api/library/files/${editing.id}`, { method: "PATCH", json: { description: v } });
          await onChanged?.();
        }}
      />

      <ResponsiveDialog open={moving !== null} onOpenChange={(o) => !o && setMoving(null)} title="Move file" description={moving?.name} size="sm">
        <ul className="divide-y divide-hairline pt-1">
          <li>
            <button type="button" className="flex min-h-[48px] w-full items-center gap-3 px-1 text-left text-[15px] sm:text-sm" disabled={!moving?.projectId} onClick={() => moving && (setMoving(null), void move(moving, null))}>
              <span className="flex size-8 items-center justify-center rounded-md bg-bg-muted text-fg-muted">
                <FolderKanban className="size-4" />
              </span>
              <span className="flex-1">Global library</span>
              {!moving?.projectId ? <span className="text-[12px] text-fg-subtle">current</span> : null}
            </button>
          </li>
          {projects
            .filter((p) => !p.archived)
            .map((p) => (
              <li key={p.id}>
                <button type="button" className="flex min-h-[48px] w-full items-center gap-3 px-1 text-left text-[15px] sm:text-sm disabled:opacity-50" disabled={moving?.projectId === p.id} onClick={() => moving && (setMoving(null), void move(moving, p.id))}>
                  <ProjectIcon icon={p.icon} color={p.color} size="sm" className="size-8" />
                  <span className="min-w-0 flex-1 truncate">{p.name}</span>
                  {moving?.projectId === p.id ? <span className="text-[12px] text-fg-subtle">current</span> : null}
                </button>
              </li>
            ))}
        </ul>
      </ResponsiveDialog>

      <ConfirmDialog open={deleting !== null} onOpenChange={(o) => !o && setDeleting(null)} destructive title={`Delete “${deleting?.name ?? ""}”?`} description="Messages that already used this file keep their own copy." confirmLabel="Delete" onConfirm={() => (deleting ? remove(deleting) : Promise.resolve())} />
    </>
  );
}

function FileRow({ file, project, items, onOpen }: { file: PublicProjectFile; project?: PublicProject; items: (ActionSheetItem | "separator")[]; onOpen: () => void }) {
  const isMobile = useIsMobile();
  const [menu, setMenu] = React.useState(false);
  const press = useLongPress({ onLongPress: () => setMenu(true), disabled: !isMobile });
  return (
    <li className="group flex min-h-[56px] items-center gap-3 px-3 py-2 sm:min-h-[52px]" {...press}>
      <button type="button" onClick={onOpen} className="flex min-w-0 flex-1 items-center gap-3 text-left" aria-label={`Preview ${file.name}`}>
        <FileThumb file={file} />
        <span className="min-w-0 flex-1">
          <span className="flex items-center gap-2">
            <span className="truncate text-[14px] font-medium leading-5">{file.name}</span>
            {project ? (
              <span className="hidden items-center gap-1 rounded-full bg-bg-muted px-1.5 py-0.5 text-[10.5px] text-fg-muted sm:inline-flex">
                <span aria-hidden>{project.icon ?? "◆"}</span> {project.name}
              </span>
            ) : null}
          </span>
          <span className="block truncate text-[12px] leading-4 text-fg-subtle tabular-nums">
            {kindLabel(file.kind)} · {formatBytes(file.sizeBytes)}
            {file.estimatedTokens ? ` · ~${formatTokens(file.estimatedTokens)} tokens` : ""} · {formatRelative(file.createdAt)}
            {project ? <span className="sm:hidden"> · {project.name}</span> : null}
          </span>
          {file.description ? <span className="mt-0.5 block truncate text-[12px] leading-4 text-fg-muted">{file.description}</span> : null}
        </span>
      </button>
      <RowMenu items={items} title={file.name} open={menu} onOpenChange={setMenu} />
    </li>
  );
}

/** Image / text preview in a sheet (PDFs open in a new tab). */
function FilePreviewSheet({ file, onOpenChange, onUse, onDownload }: { file: PublicProjectFile | null; onOpenChange: (o: boolean) => void; onUse: (f: PublicProjectFile) => void; onDownload: (f: PublicProjectFile) => void }) {
  const [text, setText] = React.useState<string | null>(null);
  const isText = file && file.kind !== "image" && file.kind !== "pdf";
  React.useEffect(() => {
    if (!file || !isText) return;
    let cancelled = false;
    fetch(`/api/library/files/${file.id}`, { credentials: "same-origin" })
      .then((r) => r.text())
      .then((t) => {
        if (!cancelled) setText(t.length > 40_000 ? `${t.slice(0, 40_000)}\n… (${formatBytes(file.sizeBytes)} total)` : t);
      })
      .catch(() => {
        if (!cancelled) setText("Could not load the file.");
      });
    return () => {
      cancelled = true;
      setText(null);
    };
  }, [file, isText]);
  return (
    <ResponsiveDialog
      open={file !== null}
      onOpenChange={onOpenChange}
      title={file?.name ?? "Preview"}
      description={file ? `${kindLabel(file.kind)} · ${formatBytes(file.sizeBytes)}${file.estimatedTokens ? ` · ~${formatTokens(file.estimatedTokens)} tokens` : ""}` : undefined}
      size="lg"
      snap="full"
      footer={
        file ? (
          <div className="flex gap-2 sm:justify-end">
            <button type="button" className="tap inline-flex h-11 flex-1 items-center justify-center gap-1.5 rounded-md bg-bg-muted px-3 text-sm font-medium sm:h-9 sm:flex-none" onClick={() => onDownload(file)}>
              <Download className="size-4" /> Download
            </button>
            <button type="button" className="tap inline-flex h-11 flex-1 items-center justify-center gap-1.5 rounded-md bg-fg px-3 text-sm font-medium text-bg sm:h-9 sm:flex-none" onClick={() => (onOpenChange(false), onUse(file))}>
              <MessageSquarePlus className="size-4" /> Use in new chat
            </button>
          </div>
        ) : undefined
      }
    >
      {file?.kind === "image" ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img src={`/api/library/files/${file.id}`} alt={file.name} className="mx-auto max-h-[70dvh] w-auto max-w-full rounded-lg bg-bg-muted object-contain" />
      ) : isText ? (
        text === null ? (
          <Skeleton className="h-40" />
        ) : (
          <pre className="max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-lg border border-border bg-bg-subtle p-3 font-mono text-[12px] leading-5 text-fg-muted">{text}</pre>
        )
      ) : null}
    </ResponsiveDialog>
  );
}