"use client";

/**
 * DatabaseView — EMBEDDED database block (exact contract the core editor's
 * BlockRenderer relies on):
 *
 *     import { DatabaseView } from "@/components/database/db-embedded";
 *     <DatabaseView embedded databaseId="..." viewId="..." />
 *
 * Renders a database's single named view (or its first view) in a compact,
 * self-contained frame: a thin toolbar (view name, record count, open-in-full
 * link) + the view renderer (table/board/gallery/list/calendar/timeline/
 * chart/form/dashboard fallback).
 *
 * This is the ONLY export name the core depends on — keep it `DatabaseView`.
 */
import { useMemo } from "react";
import { useRouter, usePathname } from "next/navigation";
import { ExternalLink } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  DatabaseDto,
  DatabaseView as ViewDto,
  RecordDto,
  UseDatabaseRecordsResult,
  pageUrlFromPath,
  useDatabase,
  useDatabaseRecords
} from "@/hooks/use-database";
import { TableView } from "@/components/database/table-view";
import { BoardView } from "@/components/database/board-view";
import { GalleryView } from "@/components/database/gallery-view";
import { ListView } from "@/components/database/list-view";
import { CalendarView } from "@/components/database/calendar-view";
import { TimelineView } from "@/components/database/timeline-view";
import { ChartView } from "@/components/database/chart-view";
import { FormView } from "@/components/form/form-view";

export interface DatabaseViewProps {
  /** Marks this as an embedded block (vs. the full database page). */
  embedded?: boolean;
  databaseId: string;
  viewId?: string;
  className?: string;
  /** Max rendered rows for the embedded block (kept cheap). */
  limit?: number;
}

function ViewBody({
  database,
  view,
  records,
  onOpenRecord,
  onOpenRecordPage
}: {
  database: DatabaseDto;
  view: ViewDto;
  records: UseDatabaseRecordsResult;
  onOpenRecord: (record: RecordDto) => void;
  onOpenRecordPage: (record: RecordDto) => void;
}) {
  const properties = database.properties;

  switch (view.type) {
    case "table":
      return (
        <TableView
          databaseId={database.id}
          view={view}
          properties={properties}
          records={records}
          onOpenRecord={onOpenRecord}
          onOpenRecordPage={onOpenRecordPage}
          onSortChange={() => undefined}
          onFilterChange={() => undefined}
        />
      );
    case "board":
      return <BoardView databaseId={database.id} view={view} properties={properties} records={records} onOpenRecord={onOpenRecord} />;
    case "gallery":
      return <GalleryView databaseId={database.id} view={view} properties={properties} records={records} onOpenRecord={onOpenRecord} />;
    case "list":
      return <ListView databaseId={database.id} view={view} properties={properties} records={records} onOpenRecord={onOpenRecord} />;
    case "calendar":
      return <CalendarView databaseId={database.id} view={view} properties={properties} records={records} onOpenRecord={onOpenRecord} />;
    case "timeline":
      return <TimelineView databaseId={database.id} view={view} properties={properties} records={records} onOpenRecord={onOpenRecord} />;
    case "chart":
      return <ChartView databaseId={database.id} view={view} properties={properties} records={records} />;
    case "form":
      return (
        <FormView
          databaseId={database.id}
          workspaceId={database.workspaceId}
          view={view}
          properties={properties}
          onOpenRecord={onOpenRecord}
          onOpenRecordPage={onOpenRecordPage}
        />
      );
    case "dashboard":
      return <EmptyNote text="Dashboards compose multiple charts — available in a later phase." />;
    default:
      return (
        <TableView
          databaseId={database.id}
          view={view}
          properties={properties}
          records={records}
          onOpenRecord={onOpenRecord}
          onOpenRecordPage={onOpenRecordPage}
          onSortChange={() => undefined}
          onFilterChange={() => undefined}
        />
      );
  }
}

function EmptyNote({ text }: { text: string }) {
  return (
    <div className="flex h-full min-h-24 items-center justify-center p-4 text-center text-xs text-muted-foreground">
      {text}
    </div>
  );
}

export function DatabaseView({ embedded, databaseId, viewId, className, limit = 20 }: DatabaseViewProps) {
  const router = useRouter();
  const pathname = usePathname();
  const { data: database, isLoading, error } = useDatabase(databaseId);

  const view: ViewDto | undefined = useMemo(() => {
    if (!database) return undefined;
    if (viewId) return database.views.find((v) => v.id === viewId);
    return database.views[0];
  }, [database, viewId]);

  const records = useDatabaseRecords(databaseId, {
    viewId: view?.id ?? viewId ?? null,
    filter: view?.filter ?? null,
    sort: view?.sort ?? null,
    group: view?.group ?? null,
    pageSize: limit,
    enabled: !!view
  });

  // Page URLs are /w/[workspace]/page/[pageId] (see app/(app)/w/[workspace]/
  // page/[id]/page.tsx). The workspace slug is the SECOND path segment — the
  // first is the literal "w". (The old code took the first segment, producing
  // /w/p/{id} → 404 "This page does not exist".) Shared + unit-tested helper:
  // pageUrlFromPath.
  const pageUrl = (pageId: string): string => pageUrlFromPath(pathname, pageId);
  const onOpenRecordPage = (record: RecordDto) => {
    if (!record.pageId) return;
    router.push(pageUrl(record.pageId));
  };
  const onOpenRecord = (record: RecordDto) => onOpenRecordPage(record);

  if (isLoading) {
    return (
      <div className={cn("min-h-32 animate-pulse rounded-lg border border-border bg-muted/40", className)} aria-busy="true" />
    );
  }

  if (error || !database) {
    return (
      <div className={cn("rounded-lg border border-dashed p-4 text-xs text-muted-foreground", className)}>
        This database is no longer available.
      </div>
    );
  }

  if (!view) {
    return (
      <div className={cn("rounded-lg border border-dashed p-4 text-xs text-muted-foreground", className)}>
        This database has no views yet.
      </div>
    );
  }

  return (
    <figure className={cn("overflow-hidden rounded-lg border border-border bg-background", className)}>
      <figcaption className="flex items-center gap-2 border-b border-border bg-muted/40 px-3 py-1.5 text-xs text-muted-foreground">
        <span className="font-medium text-foreground">{view.name}</span>
        <span aria-hidden>·</span>
        <span>{records.data.totalCount ?? records.data.records.length} records</span>
        <span
          className="ml-auto inline-flex cursor-pointer items-center gap-1 text-primary hover:underline"
          role="link"
          tabIndex={0}
          title="Open the full database in a new window"
          onClick={() => {
            // New window (the ExternalLink affordance + the user expectation):
            // the embedded block stays open on the current page.
            if (database.pageId) window.open(pageUrl(database.pageId), "_blank", "noopener,noreferrer");
          }}
          onKeyDown={(e) => {
            if (e.key === "Enter" && database.pageId) window.open(pageUrl(database.pageId), "_blank", "noopener,noreferrer");
          }}
        >
          Open
          <ExternalLink className="size-3" aria-hidden />
        </span>
      </figcaption>
      <div className={cn(embedded && "max-h-105 overflow-y-auto")}>
        <ViewBody database={database} view={view} records={records} onOpenRecord={onOpenRecord} onOpenRecordPage={onOpenRecordPage} />
      </div>
    </figure>
  );
}