"use client";

/**
 * RecordPanel — right-hand inspector for a record.
 *
 * Every non-title property renders as an editable row using the same
 * CellEditor used in table cells (one editor per type, Enter/blur commit).
 * The title is edited inline at the top. Metadata (created/edited by & time)
 * and the record page link live at the bottom.
 *
 * Opened from any view (table hover "eye", board card click, list row,
 * calendar day, timeline bar, gallery card). Closes on X / Escape /
 * clicking the backdrop.
 */
import { useEffect } from "react";
import { usePathname } from "next/navigation";
import { CalendarClock, Eye, ExternalLink, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { formatRelativeTime } from "@/lib/utils";
import {
  DatabaseProperty,
  RecordDto,
  pageUrlFromPath,
  useDatabaseRecord
} from "@/hooks/use-database";
import { formatDateValue } from "@/components/database/cell-renderer";
import { CellEditor } from "@/components/database/cell-editor";

export interface RecordPanelProps {
  databaseId: string;
  record: RecordDto;
  properties: DatabaseProperty[];
  onClose: () => void;
  readOnly?: boolean;
}

const SKIP_TYPES = new Set(["button", "created_time", "created_by", "last_edited_time", "last_edited_by", "unique_id"]);

export function RecordPanel({ databaseId, record, properties, onClose, readOnly }: RecordPanelProps) {
  // Keep the record fresh (other editors / realtime may change it).
  const { data: fresh, isLoading } = useDatabaseRecord(databaseId, record.id);
  const r = fresh ?? record;
  const titleProp = properties.find((p) => p.isTitle) ?? properties.find((p) => p.type === "title");

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onClose]);

  const editableProps = properties.filter((p) => !SKIP_TYPES.has(p.type) && p !== titleProp);

  const pathname = usePathname();

  const openPage = () => {
    if (!r.pageId) return;
    // Page route is /w/[workspace]/page/[id] — the only page route (there is
    // no /p/{id} alias). Open in a new window (ExternalLink icon).
    window.open(pageUrlFromPath(pathname, r.pageId), "_blank", "noopener,noreferrer");
  };

  return (
    <>
      {/* backdrop (click to close) */}
      <button
        type="button"
        className="fixed inset-0 z-40 cursor-default bg-black/20"
        onClick={onClose}
        aria-label="Close record panel"
        tabIndex={-1}
      />
      <aside className="fixed inset-y-0 right-0 z-50 flex w-full max-w-md flex-col border-l border-border bg-background shadow-xl" role="dialog" aria-modal="true" aria-label="Record details">
        {/* header */}
        <div className="flex items-center gap-2 border-b border-border px-4 py-3">
          <button type="button" className="flex min-w-0 flex-1 items-center gap-2 text-left" onClick={openPage} title="Open record page">
            <span className="text-lg" aria-hidden>
              {r.icon ?? "📄"}
            </span>
            <span className="truncate text-sm font-medium">{titleProp?.name ?? "Title"}</span>
            <ExternalLink className="size-3.5 shrink-0 text-muted-foreground" aria-hidden />
          </button>
          <button type="button" className="rounded p-1 text-muted-foreground hover:bg-muted" onClick={onClose} aria-label="Close">
            <X className="size-4" />
          </button>
        </div>

        <div className="min-h-0 flex-1 overflow-y-auto">
          {/* title */}
          <div className="border-b border-border px-4 py-3">
            {titleProp && (
              <CellEditor
                record={r}
                property={titleProp}
                onDone={() => undefined}
                className="text-base font-semibold"
              />
            )}
          </div>

          {/* property rows */}
          <div className="divide-y divide-border/50">
            {isLoading && <p className="px-4 py-3 text-xs text-muted-foreground">Loading…</p>}
            {editableProps.map((p) => (
              <div key={p.id} className="flex items-start gap-3 px-4 py-2.5">
                <span className="w-28 shrink-0 truncate pt-1.5 text-xs text-muted-foreground" title={p.name}>
                  {p.name}
                  {p.required && <span className="ml-0.5 text-destructive">*</span>}
                </span>
                <div className="min-w-0 flex-1">
                  {readOnly ? (
                    <span className="text-sm">{renderPlain(r, p)}</span>
                  ) : (
                    <CellEditor record={r} property={p} onDone={() => undefined} />
                  )}
                </div>
              </div>
            ))}
          </div>

          {/* metadata */}
          <div className="space-y-1.5 border-t border-border px-4 py-3 text-xs text-muted-foreground">
            <p className="inline-flex items-center gap-1.5">
              <Eye className="size-3.5" aria-hidden />
              Record · {r.id.slice(-8)}
            </p>
            <p>
              Created {formatRelativeTime(r.createdTime)}
              {r.createdBy ? ` by ${r.createdBy.slice(-8)}` : ""}
            </p>
            <p className="inline-flex items-center gap-1.5">
              <CalendarClock className="size-3.5" aria-hidden />
              Last edited {formatRelativeTime(r.lastEditedTime)}
            </p>
            <p className="text-[10px] opacity-70">v{r.version}</p>
          </div>
        </div>
      </aside>
    </>
  );
}

// Minimal plain-text fallback for read-only rows.
function renderPlain(record: RecordDto, p: DatabaseProperty): string {
  const v = record.properties[p.id];
  if (!v) return "—";
  if (typeof v.text === "string") return v.text;
  if (typeof v.value === "number" || typeof v.value === "string" || typeof v.value === "boolean") return String(v.value);
  if (v.optionId) return v.optionId.slice(-6);
  if (v.optionIds?.length) return `${v.optionIds.length} selected`;
  if (v.userIds?.length) return `${v.userIds.length} person(s)`;
  if (v.recordIds?.length) return `${v.recordIds.length} linked`;
  if (v.fileIds?.length) return `${v.fileIds.length} file(s)`;
  if (v.start) return formatDateValue(v.start);
  if (v.value != null) return String(v.value);
  return "—";
}