"use client";

/**
 * ListView — compact rows for LIST views: icon, title, 1–2 inline properties,
 * comment count, date. Row click → record panel.
 */
import { useMemo } from "react";
import { Inbox, MessageSquare, Plus } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  DatabaseProperty,
  DatabaseView,
  RecordDto,
  UseDatabaseRecordsResult,
  useCreateRecord,
  valueToText
} from "@/hooks/use-database";
import { cellToText, formatDateValue } from "@/components/database/cell-renderer";

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

export function ListView({ databaseId, view, properties, records, onOpenRecord, readOnly }: ListProps) {
  const { data, isLoading } = records;
  const createRecord = useCreateRecord(databaseId);
  const titleProp = properties.find((p) => p.isTitle);

  const inline = useMemo(() => {
    const subs = view.config.subtitlePropertyId
      ? properties.filter((p) => p.id === view.config.subtitlePropertyId)
      : [];
    const rest = properties.filter(
      (p) => p !== titleProp && p.type !== "files" && p.type !== "relation" && !subs.includes(p)
    );
    return [...subs, ...rest].slice(0, 2);
  }, [properties, titleProp, view.config.subtitlePropertyId]);

  const dateProp = properties.find((p) => p.type === "date");

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

  if (isLoading) {
    return (
      <div className="space-y-1.5 p-4">
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className="h-9 animate-pulse rounded bg-muted" />
        ))}
      </div>
    );
  }

  return (
    <div className="h-full overflow-y-auto">
      {data.records.length === 0 ? (
        <div className="flex flex-col items-center gap-3 py-16 text-center">
          <Inbox className="size-8 text-muted-foreground" aria-hidden />
          <p className="text-sm text-muted-foreground">No items in this list.</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={addRow}>
              <Plus className="size-4" /> Add item
            </button>
          )}
        </div>
      ) : (
        <ul className="divide-y divide-border/60">
          {data.records.map((r) => (
            <li key={r.id}>
              <button
                type="button"
                className={cn("flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm hover:bg-muted/50")}
                onClick={() => onOpenRecord(r)}
              >
                <span className="w-5 text-center text-base" aria-hidden>
                  {r.icon ?? "•"}
                </span>
                <span className="min-w-0 flex-1 truncate font-medium">
                  {titleProp ? valueToText(r.properties[titleProp.id], titleProp) || "Untitled" : r.id.slice(-6)}
                </span>
                <span className="hidden max-w-md flex-1 truncate text-xs text-muted-foreground sm:inline">
                  {inline
                    .map((p) => {
                      const t = cellToText(r.properties[p.id], p);
                      return t ? `${p.name}: ${t}` : null;
                    })
                    .filter(Boolean)
                    .join("  ·  ")}
                </span>
                {r.subItemCount ? (
                  <span className="inline-flex items-center gap-1 text-xs text-muted-foreground" title="Sub-items">
                    <Inbox className="size-3" aria-hidden /> {r.subItemCount}
                  </span>
                ) : null}
                {dateProp && (
                  <span className="hidden w-24 text-right text-xs text-muted-foreground md:inline">
                    {formatDateValue(r.properties[dateProp.id]?.start)}
                  </span>
                )}
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}