"use client";

/**
 * GalleryView — card grid for GALLERY views.
 *
 * Cover = first FILES/image property (or record cover/icon), title, up to 2
 * secondary properties. Masonry-ish via CSS grid auto rows. Card click →
 * record panel.
 */
import { useMemo } from "react";
import { LayoutGrid, Plus } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  DatabaseProperty,
  DatabaseView,
  RecordDto,
  UseDatabaseRecordsResult,
  useCreateRecord,
  valueToText
} from "@/hooks/use-database";
import { cellToText } from "@/components/database/cell-renderer";

export interface GalleryProps {
  databaseId: string;
  view: DatabaseView;
  properties: DatabaseProperty[];
  records: UseDatabaseRecordsResult;
  onOpenRecord: (record: RecordDto) => void;
  readOnly?: boolean;
}

function coverOf(record: RecordDto, properties: DatabaseProperty[]): string | null {
  if (record.coverUrl) return record.coverUrl;
  const fileProp = properties.find(
    (p) => p.type === "files" && (record.properties[p.id]?.fileIds?.length ?? 0) > 0
  );
  if (fileProp) {
    const id = record.properties[fileProp.id]?.fileIds?.[0];
    if (id) return `/api/preview/file/${id}`;
  }
  return null;
}

export function GalleryView({ databaseId, view, properties, records, onOpenRecord, readOnly }: GalleryProps) {
  const { data, isLoading } = records;
  const createRecord = useCreateRecord(databaseId);
  const titleProp = properties.find((p) => p.isTitle);
  const perRow = view.config.cardsPerRow ?? 4;

  const chips = useMemo(
    () => properties.filter((p) => p !== titleProp && p.type !== "files" && p.type !== "relation").slice(0, 2),
    [properties, titleProp]
  );

  const addCard = () => {
    createRecord.mutate({ properties: titleProp ? { [titleProp.id]: { text: "New card", marks: [] } } : {} });
  };

  if (isLoading) {
    return (
      <div className="grid gap-3 p-4" style={{ gridTemplateColumns: `repeat(${perRow}, minmax(0, 1fr))` }}>
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className="h-40 animate-pulse rounded-lg bg-muted" />
        ))}
      </div>
    );
  }

  return (
    <div className="h-full overflow-y-auto p-4">
      {data.records.length === 0 ? (
        <div className="flex flex-col items-center gap-3 py-16 text-center">
          <LayoutGrid className="size-8 text-muted-foreground" aria-hidden />
          <p className="text-sm text-muted-foreground">No cards in this view yet.</p>
          {!readOnly && (
            <button type="button" className="inline-flex items-center gap-1 rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:bg-primary/90" onClick={addCard}>
              <Plus className="size-4" /> Add card
            </button>
          )}
        </div>
      ) : (
        <div
          className="grid gap-3"
          style={{ gridTemplateColumns: `repeat(${perRow}, minmax(0, 1fr))`, gridAutoRows: "auto" }}
        >
          {data.records.map((r) => {
            const cover = coverOf(r, properties);
            return (
              <button
                key={r.id}
                type="button"
                className="group overflow-hidden rounded-lg border bg-card text-left shadow-sm transition-shadow hover:shadow-md"
                onClick={() => onOpenRecord(r)}
              >
                {cover && (
                  <div className="aspect-[16/9] w-full overflow-hidden bg-muted">
                    <img src={cover} alt="" className="size-full object-cover transition-transform group-hover:scale-[1.02]" loading="lazy" />
                  </div>
                )}
                <div className="p-2.5">
                  <p className="truncate text-sm font-medium">
                    {r.icon ? `${r.icon} ` : ""}
                    {titleProp ? valueToText(r.properties[titleProp.id], titleProp) || "Untitled" : r.id.slice(-6)}
                  </p>
                  <div className="mt-1.5 flex flex-wrap gap-1">
                    {chips.map((p) => {
                      const text = cellToText(r.properties[p.id], p);
                      if (!text) return null;
                      return (
                        <span key={p.id} className={cn("inline-flex max-w-full items-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground")}>
                          <span className="opacity-70">{p.name}:</span>
                          <span className="truncate">{text}</span>
                        </span>
                      );
                    })}
                  </div>
                </div>
              </button>
            );
          })}
          {!readOnly && (
            <button type="button" className="flex min-h-24 items-center justify-center gap-1 rounded-lg border border-dashed text-sm text-muted-foreground hover:bg-muted" onClick={addCard}>
              <Plus className="size-4" /> Add card
            </button>
          )}
        </div>
      )}
    </div>
  );
}