"use client";

/**
 * RecordHeader — header block that the core editor's PageView renders INSTEAD
 * of the plain page title when `page.meta.isRecord` is true.
 *
 * A record's page is a normal page whose identity is 1:1 with a
 * database_record (via `database_records.pageId`). This header shows the
 * record's icon/title plus its properties in a clean, readable grid so the
 * page reads as a "record" rather than a blank doc.
 *
 * CONTRACT (core PageView → this component):
 *   <RecordHeader
 *     recordId={page.meta.recordId}      // preferred
 *     databaseId={page.meta.databaseId}
 *     [record={...}] [properties={...}]  // or pass the DTO directly
 *     readOnly={…}                        // from the page's permission level
 *   />
 * When only `recordId` is given (no databaseId), the record is fetched by id
 * and its own `databaseId` used for the property schema.
 */
import { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Loader2 } from "lucide-react";
import { apiFetch } from "@/lib/api";
import {
  DatabaseDto,
  DatabaseProperty,
  RecordDto,
  useDatabase
} from "@/hooks/use-database";
import { CellRenderer } from "@/components/database/cell-renderer";
import { CellEditor } from "@/components/database/cell-editor";

export interface RecordHeaderProps {
  /** Record id (database_records.id). */
  recordId?: string;
  /** Database the record belongs to (enables property-schema fetch). */
  databaseId?: string;
  /** Pass the full record DTO directly to skip the fetch. */
  record?: RecordDto;
  /** Pass properties directly to skip the schema fetch. */
  properties?: DatabaseProperty[];
  readOnly?: boolean;
  className?: string;
}

function unwrap<T>(body: unknown): T {
  const b = body as { data?: T } | null;
  if (b && typeof b === "object" && "data" in (b as Record<string, unknown>)) {
    return (b as { data: T }).data;
  }
  return body as T;
}

const SKIP_TYPES = new Set(["button"]);

export function RecordHeader({
  recordId,
  databaseId: dbIdProp,
  record: recordProp,
  properties: propsProp,
  readOnly,
  className
}: RecordHeaderProps) {
  // Single, unconditional fetch — always by record id (the canonical source).
  const { data: fetched, isLoading } = useQuery({
    queryKey: ["record-fresh", recordId ?? recordProp?.id],
    enabled: !!(recordId ?? recordProp?.id),
    queryFn: async () => unwrap<RecordDto>(await apiFetch(`/records/${recordId ?? recordProp!.id}`))
  });

  // Resolve database id from the record when not provided.
  const effectiveRecord: RecordDto | undefined = fetched ?? recordProp;
  const databaseId = dbIdProp ?? effectiveRecord?.databaseId;

  const { data: database } = useDatabase(databaseId);

  const properties =
    propsProp ??
    (database?.properties.filter((p) => !SKIP_TYPES.has(p.type)) as DatabaseProperty[]);

  if (!effectiveRecord) {
    return (
      <div className={className}>
        <div className="mb-2 inline-flex items-center gap-2 text-sm text-muted-foreground">
          <Loader2 className="size-4 animate-spin" aria-hidden />
          {isLoading ? "Loading record…" : "Record unavailable"}
        </div>
      </div>
    );
  }

  const titleProp = properties?.find((p) => p.isTitle) ?? properties?.find((p) => p.type === "title");

  const header = (
    <div className="flex items-start gap-3">
      <div className="text-4xl leading-none" aria-hidden>
        {effectiveRecord.icon ?? "📄"}
      </div>
      <div className="min-w-0 flex-1 pt-1">
        {titleProp ? (
          <CellEditor
            key={`title-${effectiveRecord.id}`}
            record={effectiveRecord}
            property={titleProp}
            onDone={() => undefined}
            className="text-3xl font-bold"
          />
        ) : (
          <h1 className="text-3xl font-bold">Record</h1>
        )}
      </div>
    </div>
  );

  if (!properties || properties.length === 0) return <div className={className}>{header}</div>;

  const fields = properties.filter((p) => p !== titleProp);

  return (
    <div className={className}>
      {header}
      {fields.length > 0 && (
        <div className="mt-4 divide-y divide-border/60 border-t border-border">
          {fields.map((p) => (
            <div key={p.id} className="flex items-start gap-4 py-2">
              <div className="w-40 shrink-0 truncate pt-0.5 text-sm text-muted-foreground" title={p.name}>
                {p.name}
              </div>
              <div className="min-w-0 flex-1">
                {readOnly ? (
                  <CellRenderer record={effectiveRecord} property={p} value={effectiveRecord.properties[p.id]} readOnly />
                ) : (
                  <CellEditor
                    key={`${effectiveRecord.id}-${p.id}`}
                    record={effectiveRecord}
                    property={p}
                    onDone={() => undefined}
                  />
                )}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}