"use client";

import { useState } from "react";
import { Download, Eye, FileText, FolderTree } from "lucide-react";
import { FilePreviewDrawer } from "@/components/chat/FilePreviewDrawer";
import { fileRawUrl } from "@/lib/api";
import { fileAccent } from "@/lib/file-accent";

// Grouped attachment card for the files an agent generated in one exchange.
// The chat otherwise buries file_write/file_patch calls inside the collapsed
// tool group, so this surfaces every generated file as one card with a row
// per file (icon swatch, filename, directory, Download + View file). "View
// file" opens the right-side preview drawer for that path.
export function GeneratedFilesCard({ files }: { files: { path: string; toolName: string }[] }) {
  const [openPath, setOpenPath] = useState<string | null>(null);

  return (
    <>
      <div className="flex flex-col rounded-xl border border-border bg-card">
        <div className="flex items-center gap-2.5 border-b border-border px-4 py-3">
          <FolderTree className="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
          <span className="text-xs font-semibold text-muted-foreground">
            {files.length} file{files.length === 1 ? "" : "s"} generated
          </span>
        </div>
        {files.map((file, index) => (
          <FileRow
            key={file.path}
            path={file.path}
            first={index === 0}
            onView={() => setOpenPath(file.path)}
          />
        ))}
      </div>
      <FilePreviewDrawer path={openPath} onOpenChange={(open) => !open && setOpenPath(null)} />
    </>
  );
}

function FileRow({ path, first, onView }: { path: string; first: boolean; onView: () => void }) {
  const lastSlash = path.lastIndexOf("/");
  const filename = lastSlash >= 0 ? path.slice(lastSlash + 1) : path;
  const dir = lastSlash > 0 ? path.slice(0, lastSlash) : "";
  const accent = fileAccent(path);

  return (
    <div
      className={`flex items-center gap-3.5 px-4 py-3.5 ${first ? "" : "border-t border-border"}`}
    >
      <span
        className="flex size-10 shrink-0 items-center justify-center rounded-[9px]"
        style={{ backgroundColor: accent.bg }}
        aria-hidden="true"
      >
        <FileText className="size-[19px]" style={{ color: accent.fg }} />
      </span>
      <span className="flex min-w-0 flex-1 flex-col gap-[3px]">
        <span className="truncate font-mono text-[13px] font-semibold text-foreground">{filename}</span>
        {dir ? <span className="truncate text-xs text-muted-foreground">{dir}</span> : null}
      </span>
      <div className="flex shrink-0 items-center gap-1.5">
        <a
          href={fileRawUrl(path)}
          download={filename}
          className="flex items-center gap-1.5 rounded-[7px] border border-border bg-transparent px-2.5 py-1.5 text-xs font-semibold text-foreground transition-colors hover:bg-muted"
        >
          <Download className="size-3.5" aria-hidden="true" />
          Download
        </a>
        <button
          type="button"
          onClick={onView}
          className="flex items-center gap-1.5 rounded-[7px] border border-[#D7DEFA] bg-[#EEF2FF] px-2.5 py-1.5 text-xs font-semibold text-[#4277FB] transition-colors hover:bg-[#E0E8FF] dark:border-[#2A3A6A] dark:bg-[#1B2540] dark:text-[#8FB1FF] dark:hover:bg-[#22305A]"
        >
          <Eye className="size-3.5" aria-hidden="true" />
          View file
        </button>
      </div>
    </div>
  );
}
