"use client";

/**
 * CellRenderer — renders a RecordPropertyValue by property.type.
 *
 * Covers all 24 PropertyType values from prisma/schema.prisma (docs/api/
 * databases.md §3.4 "Property Types — Config Shapes"). Display formatting
 * lives here; the query/filter/formula *engine* stays in
 * @factory/database-engine + the server — nothing is re-evaluated locally.
 *
 * Read-only types: created_time, created_by, last_edited_time,
 * last_edited_by, rollup, formula, unique_id. The `button` type renders an
 * actionable chip (executed via record mutations, see the handler table).
 */
import { memo, useMemo, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import {
  AlertTriangle,
  Check,
  ChevronRight,
  ExternalLink,
  File as FileIcon,
  Link2,
  Mail,
  Paperclip,
  Phone,
  User as UserIcon
} from "lucide-react";
import { cn } from "@/lib/utils";
import { apiFetch } from "@/lib/api";
import {
  DatabaseProperty,
  RecordDto,
  RecordValue,
  findOption,
  useRelations,
  useUpdateRecord
} from "@/hooks/use-database";

export interface UserRef {
  id: string;
  name: string;
  avatarUrl?: string | null;
}

/** 18-swatch color palette → fallback hex (tokens map to CSS vars at runtime). */
const COLOR_FALLBACK: Record<string, string> = {
  default: "transparent",
  gray: "#f1f1ef",
  brown: "#f7e9e7",
  orange: "#fbecdd",
  yellow: "#fdf3d0",
  green: "#edf3ec",
  blue: "#e7f0f6",
  purple: "#f1edf7",
  pink: "#faedf3",
  red: "#fdebec"
};
const COLOR_DOT: Record<string, string> = {
  gray: "#787774",
  brown: "#9f6b53",
  orange: "#d9730d",
  yellow: "#cb912f",
  green: "#448361",
  blue: "#337ea9",
  purple: "#9065b0",
  pink: "#c14c8a",
  red: "#d44c47"
};

function optionStyle(color?: string): React.CSSProperties {
  const c = color ?? "default";
  return {
    backgroundColor: `var(--factory-color-${c}_bg, ${COLOR_FALLBACK[c] ?? "transparent"})`,
    color: `var(--factory-color-${c}, inherit)`
  };
}

// ---------------------------------------------------------------------------
// Formatting helpers
// ---------------------------------------------------------------------------

/**
 * Number formatting per property.config:
 * { format: "number"|"decimal"|"currency"|"percent"|"scientific", currency, precision }.
 * Convention: percent values are stored as fractions (0.75 → 75%).
 */
export function formatNumberValue(value: unknown, config?: { format?: string; currency?: string; precision?: number }): string {
  if (value == null || value === "") return "—";
  const n = typeof value === "number" ? value : Number(value);
  if (!Number.isFinite(n)) return String(value);
  const precision = config?.precision ?? 2;
  switch (config?.format) {
    case "currency":
      return new Intl.NumberFormat(undefined, {
        style: "currency",
        currency: config?.currency ?? "USD",
        maximumFractionDigits: precision
      }).format(n);
    case "percent":
      return new Intl.NumberFormat(undefined, {
        style: "percent",
        maximumFractionDigits: precision
      }).format(n);
    case "decimal":
      return new Intl.NumberFormat(undefined, {
        minimumFractionDigits: 0,
        maximumFractionDigits: precision
      }).format(n);
    case "scientific":
      return n.toExponential(precision);
    default:
      return new Intl.NumberFormat(undefined, { maximumFractionDigits: precision }).format(n);
  }
}

/** Date formatting: config { includeTime, timeZone } — defaults to UTC. */
export function formatDateValue(iso: string | null | undefined, config?: { includeTime?: boolean; timeZone?: string | null }): string {
  if (!iso) return "";
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return "";
  const timeZone = config?.timeZone ?? "UTC";
  const date = new Intl.DateTimeFormat("en-CA", {
    timeZone,
    year: "numeric",
    month: "short",
    day: "2-digit"
  }).format(d);
  if (!config?.includeTime) return date;
  const time = new Intl.DateTimeFormat("en-GB", {
    timeZone,
    hour: "2-digit",
    minute: "2-digit"
  }).format(d);
  return `${date} ${time}`;
}

function formatBytes(bytes: number): string {
  if (!Number.isFinite(bytes) || bytes < 0) return "";
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
}

// ---------------------------------------------------------------------------
// Small presentational atoms
// ---------------------------------------------------------------------------

export function UserAvatar({ user, size = 20 }: { user: UserRef; size?: number }) {
  if (user.avatarUrl) {
    return (
      <img
        src={user.avatarUrl}
        alt={user.name}
        className="rounded-full object-cover shrink-0"
        style={{ width: size, height: size }}
      />
    );
  }
  return (
    <span
      className="inline-flex items-center justify-center rounded-full bg-muted text-muted-foreground shrink-0"
      style={{ width: size, height: size, fontSize: size * 0.5 }}
      aria-hidden
    >
      {(user.name ?? "?").slice(0, 1).toUpperCase()}
    </span>
  );
}

function PersonCellContent({ userIds, users }: { userIds?: string[]; users?: Record<string, UserRef> }) {
  const ids = userIds ?? [];
  if (ids.length === 0) return null;
  return (
    <span className="flex flex-wrap items-center gap-1">
      {ids.slice(0, 3).map((id) => {
        const u = users?.[id];
        return (
          <span key={id} className="inline-flex items-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-xs">
            {u ? <UserAvatar user={u} size={14} /> : <UserIcon className="size-3" aria-hidden />}
            {u?.name ?? id.slice(-4)}
          </span>
        );
      })}
      {ids.length > 3 && <span className="text-xs text-muted-foreground">+{ids.length - 3}</span>}
    </span>
  );
}

// ---------------------------------------------------------------------------
// File cells
// ---------------------------------------------------------------------------

interface FileMeta {
  id: string;
  name: string;
  size: number;
  mimeType: string;
  url?: string | null;
  thumbnailUrl?: string | null;
}

/** Lightweight file metadata for Files cells (GET /files/:id). */
function useFileMeta(fileId: string | undefined): FileMeta | null {
  const q = useQuery({
    queryKey: ["file", fileId ?? "none"],
    enabled: !!fileId,
    queryFn: async () => {
      const b = await apiFetch(`/files/${fileId}`);
      const d = b && typeof b === "object" && "data" in (b as Record<string, unknown>)
        ? (b as { data: FileMeta }).data
        : (b as FileMeta);
      return d;
    },
    staleTime: 5 * 60 * 1000
  });
  return q.data ?? null;
}

function FileChip({ fileId }: { fileId: string }) {
  const meta = useFileMeta(fileId);
  const [preview, setPreview] = useState(false);
  return (
    <button
      type="button"
      className="inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-xs hover:bg-muted"
      onClick={() => {
        // "Click → preview": open the canonical preview proxy (BFF) when the
        // file has a URL, else fall back to the download endpoint.
        const url = meta?.url ?? `/api/preview/file/${fileId}`;
        setPreview(true);
        window.open(url, "_blank", "noopener");
        setPreview(false);
      }}
      title={meta?.name ?? fileId}
    >
      {meta?.mimeType?.startsWith("image/") ? (
        meta.thumbnailUrl ? (
          <img src={meta.thumbnailUrl} alt="" className="size-4 rounded object-cover" />
        ) : (
          <FileIcon className="size-3.5" aria-hidden />
        )
      ) : (
        <Paperclip className="size-3.5" aria-hidden />
      )}
      <span className="max-w-32 truncate">{meta?.name ?? "file…"}</span>
      {meta && <span className="text-muted-foreground">{formatBytes(meta.size)}</span>}
    </button>
  );
}

function FilesCellContent({ fileIds }: { fileIds?: string[] }) {
  const ids = fileIds ?? [];
  if (ids.length === 0) return null;
  return (
    <span className="flex flex-wrap items-center gap-1">
      {ids.slice(0, 3).map((id) => (
        <FileChip key={id} fileId={id} />
      ))}
      {ids.length > 3 && <span className="text-xs text-muted-foreground">+{ids.length - 3}</span>}
    </span>
  );
}

// ---------------------------------------------------------------------------
// Relation cell (chips of linked record titles → click navigate)
// ---------------------------------------------------------------------------

function RelationCellContent({
  value,
  property,
  onOpenRecord,
  titleOf
}: {
  value?: RecordValue;
  property: DatabaseProperty;
  onOpenRecord?: (record: RecordDto) => void;
  /** Fallback resolver when the lazy fetch hasn't landed yet. */
  titleOf?: (recordId: string) => string;
}) {
  const ids = value?.recordIds ?? [];
  const targetDatabaseId = property.config.targetDatabaseId;
  const { data: resolved } = useRelations(targetDatabaseId, targetDatabaseId, ids);
  if (ids.length === 0) return null;
  return (
    <span className="flex flex-wrap items-center gap-1">
      {ids.slice(0, 3).map((id) => {
        const r = resolved?.find((x) => x.recordId === id)?.record;
        const label = r
          ? titleOf?.(id) ?? r.title ?? "Record"
          : titleOf?.(id) ?? "…";
        return (
          <button
            key={id}
            type="button"
            className="inline-flex items-center gap-0.5 rounded-full border px-2 py-0.5 text-xs hover:bg-muted"
            onClick={(e) => {
              e.stopPropagation();
              if (r && onOpenRecord) onOpenRecord(r);
            }}
          >
            {label}
            <ChevronRight className="size-3" aria-hidden />
          </button>
        );
      })}
      {ids.length > 3 && <span className="text-xs text-muted-foreground">+{ids.length - 3}</span>}
    </span>
  );
}

// ---------------------------------------------------------------------------
// Per-type display
// ---------------------------------------------------------------------------

export interface CellRendererProps {
  record: RecordDto;
  property: DatabaseProperty;
  value?: RecordValue | null;
  /** Read-only context (shared pages, locked levels) — no edit affordance. */
  readOnly?: boolean;
  /** Called when the user clicks an editable cell. */
  onEdit?: (record: RecordDto, property: DatabaseProperty) => void;
  /** userId → {name, avatarUrl} for person cells. */
  users?: Record<string, UserRef>;
  /** Open a record page (title links, relation chips). */
  onOpenRecord?: (record: RecordDto) => void;
}

const READ_ONLY_TYPES = new Set([
  "created_time",
  "created_by",
  "last_edited_time",
  "last_edited_by",
  "rollup",
  "formula",
  "unique_id"
]);

export const isEditableProperty = (p: DatabaseProperty) => !READ_ONLY_TYPES.has(p.type) && p.type !== "button";

/**
 * Cell types whose display already carries its own interactive controls:
 * relation (per-record chips), files (file chips). Wrapping those in the
 * outer click-to-edit <button> would nest a <button> inside a <button> —
 * invalid HTML that triggers a React hydration error and breaks click
 * targeting. For these we render a plain (non-button) container instead;
 * their own controls handle clicks and stopPropagation.
 *
 * NOTE: title is NOT in this set. The title cell IS editable (click → inline
 * editor) — that's the primary way to rename a record. Earlier the title
 * rendered its own "open page" <button>, which (a) nested a button in the
 * click-to-edit wrapper and (b) made the cell navigate instead of edit; both
 * were removed and the title value now renders as a plain span. Navigating
 * to the record's page is still one click away via the row's "Open record"
 * hover action and the record panel's "Open page" link.
 */
const INTERACTIVE_CELL_TYPES = new Set(["relation", "files"]);

function renderValue(props: CellRendererProps): React.ReactNode {
  const { record, property: p, value, users, onOpenRecord } = props;
  const v = value ?? null;

  switch (p.type) {
    case "title":
    case "heading": {
      const text = v?.text ?? "";
      if (!text) return <span className="text-muted-foreground">Untitled</span>;
      // Plain text — NOT a button. The cell's click-to-edit wrapper (a
      // <button>) owns the click; a nested <button> would be invalid HTML and
      // break hit-testing. Opening the record page lives on the row's hover
      // actions / record panel, not here.
      return (
        <span className="block truncate font-medium" title={text}>
          {record.icon ? `${record.icon} ` : ""}
          {text}
        </span>
      );
    }
    case "text":
    case "rich_text":
      return <span className="block truncate" title={v?.text}>{v?.text ?? null}</span>;
    case "number": {
      // "progress" is a percent-formatted number → render a bar + %.
      if (p.config.format === "percent") {
        const n = typeof v?.value === "number" ? v.value : Number(v?.value ?? 0);
        const pct = Number.isFinite(n) ? Math.max(0, Math.min(100, n * 100)) : 0;
        return (
          <span className="flex w-full items-center gap-2" title={`${pct.toFixed(0)}%`}>
            <span className="h-1.5 flex-1 overflow-hidden rounded-full bg-muted">
              <span
                className="block h-full rounded-full bg-primary transition-all"
                style={{ width: `${pct}%` }}
              />
            </span>
            <span className="w-9 text-right text-xs tabular-nums text-muted-foreground">{pct.toFixed(0)}%</span>
          </span>
        );
      }
      return <span className="tabular-nums">{formatNumberValue(v?.value, p.config)}</span>;
    }
    case "select": {
      const opt = findOption(p.config.options, v?.optionId);
      if (!opt) return null;
      return (
        <span className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs" style={optionStyle(opt.color)}>
          {opt.name}
        </span>
      );
    }
    case "multi_select": {
      const opts = (v?.optionIds ?? [])
        .map((id) => findOption(p.config.options, id))
        .filter((o): o is NonNullable<typeof o> => Boolean(o));
      if (opts.length === 0) return null;
      return (
        <span className="flex flex-wrap items-center gap-1">
          {opts.slice(0, 3).map((o) => (
            <span key={o!.id} className="rounded-full px-2 py-0.5 text-xs" style={optionStyle(o!.color)}>
              {o!.name}
            </span>
          ))}
          {opts.length > 3 && <span className="text-xs text-muted-foreground">+{opts.length - 3}</span>}
        </span>
      );
    }
    case "status": {
      const opt = findOption(p.config.options, v?.optionId);
      if (!opt) return null;
      return (
        <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs" style={optionStyle(opt.color)}>
          <span
            className="size-2 rounded-full"
            style={{ backgroundColor: `var(--factory-color-${opt.color}, ${COLOR_DOT[opt.color] ?? "#999"})` }}
            aria-hidden
          />
          {opt.name}
        </span>
      );
    }
    case "date":
      return <span className="text-sm">{formatDateValue(v?.start, p.config)}</span>;
    case "date_range":
      return (
        <span className="text-sm">
          {formatDateValue(v?.start, p.config)}
          {v?.end ? ` → ${formatDateValue(v.end, p.config)}` : ""}
        </span>
      );
    case "person":
      return <PersonCellContent userIds={v?.userIds} users={users} />;
    case "created_by":
    case "last_edited_by": {
      const id = v?.userId ?? (p.type === "created_by" ? record.createdBy : record.lastEditedBy) ?? undefined;
      if (!id) return null;
      return <PersonCellContent userIds={[id]} users={users} />;
    }
    // NOTE (email/phone/url): the value renders as link-styled text, but the
    // click is NOT swallowed — it must bubble to the CellRenderer button so
    // the cell editor opens. Anchors here with stopPropagation made the cell
    // look editable but never open the editor (existing values couldn't be
    // re-edited at all). Opening the link lives in the cell editor ("Open")
    // and the record property panel.
    case "email":
      return v?.value ? (
        <span className="inline-flex items-center gap-1 text-sm">
          <Mail className="size-3.5 text-muted-foreground" aria-hidden />
          {v.value}
        </span>
      ) : null;
    case "phone":
      return v?.value ? (
        <span className="inline-flex items-center gap-1 text-sm">
          <Phone className="size-3.5 text-muted-foreground" aria-hidden />
          {v.value}
        </span>
      ) : null;
    case "url":
      return v?.value ? (
        <span className="inline-flex items-center gap-1 text-sm text-primary">
          <Link2 className="size-3.5" aria-hidden />
          {v.title || v.value}
        </span>
      ) : null;
    case "checkbox":
      return (
        <span
          className={cn(
            "inline-flex size-4 items-center justify-center rounded border",
            v?.value ? "border-primary bg-primary text-primary-foreground" : "bg-background"
          )}
          aria-hidden
        >
          {v?.value ? <Check className="size-3" /> : null}
        </span>
      );
    case "files":
      return <FilesCellContent fileIds={v?.fileIds} />;
    case "created_time":
      return <span className="text-sm text-muted-foreground">{formatDateValue(record.createdTime, p.config)}</span>;
    case "last_edited_time":
      return <span className="text-sm text-muted-foreground">{formatDateValue(record.lastEditedTime, p.config)}</span>;
    case "relation":
      return <RelationCellContent value={v} property={p} onOpenRecord={onOpenRecord} />;
    case "rollup": {
      // Computed server-side (rollups table); render or "—".
      if (v?.value != null) {
        if (p.config.aggregate === "PERCENT") return <span className="tabular-nums">{formatNumberValue(v.value, { format: "percent" })}</span>;
        return <span className="tabular-nums">{formatNumberValue(v.value, { format: "number", precision: 2 })}</span>;
      }
      if (Array.isArray(v?.values)) return <span className="tabular-nums">{(v?.values as unknown[]).length}</span>;
      return <span className="text-muted-foreground">—</span>;
    }
    case "formula": {
      // Computed server-side (safe AST evaluator). Broken formulas surface an
      // error marker in the value — show it, never swallow it.
      if (v?.error) {
        return (
          <span title={`formula error: ${String(v.error)}`} className="inline-flex items-center gap-1 text-sm text-destructive">
            <AlertTriangle className="size-3.5" aria-hidden />
            error
          </span>
        );
      }
      if (v?.value == null) return <span className="text-muted-foreground">—</span>;
      if (typeof v.value === "boolean") return <span>{v.value ? "Yes" : "No"}</span>;
      if (typeof v.value === "number") {
        return (
          <span className="tabular-nums">
            {formatNumberValue(v.value, v.type === "percent" ? { format: "percent" } : { format: "number", precision: 2 })}
          </span>
        );
      }
      if (typeof v.value === "string") {
        if (/^\d{4}-\d{2}-\d{2}/.test(v.value)) return <span className="text-sm">{formatDateValue(v.value, p.config)}</span>;
        return <span className="block truncate">{v.value}</span>;
      }
      return <span className="block truncate" title={JSON.stringify(v.value)}>{JSON.stringify(v.value)}</span>;
    }
    case "button":
      // BUTTON property: the chip is interactive (see ButtonsCell below);
      // display-only contexts show the name as a disabled chip.
      return <span className="rounded-full border px-2 py-0.5 text-xs text-muted-foreground">{p.name}</span>;
    case "unique_id":
      return <span className="font-mono text-xs text-muted-foreground">{v?.value ?? ""}</span>;
    default: {
      // Unknown/forward-compat: raw JSON in the tooltip, never crash.
      const raw = v ? JSON.stringify(v) : "";
      return raw ? (
        <span className="block truncate font-mono text-xs text-muted-foreground" title={raw}>
          {raw}
        </span>
      ) : null;
    }
  }
}

// ---------------------------------------------------------------------------
// Button property cell — executes simple documented actions client-side.
// ---------------------------------------------------------------------------

function ButtonsCell({ record, property }: { record: RecordDto; property: DatabaseProperty }) {
  const updateRecord = useUpdateRecord(record.databaseId);
  const actions = (property.config.actions ?? []) as {
    type: string;
    config?: { propertyId?: string; value?: RecordValue; url?: string; pageId?: string };
  }[];

  const run = async () => {
    for (const a of actions) {
      if (a.type === "set_property" && a.config?.propertyId) {
        await updateRecord.mutateAsync({
          recordId: record.id,
          version: record.version,
          properties: { [a.config.propertyId]: a.config.value ?? {} }
        });
      } else if (a.type === "navigate" && a.config) {
        if (a.config.url) window.open(a.config.url, "_blank", "noopener");
        if (a.config.pageId) window.location.assign(`/page/${a.config.pageId}`);
      } else {
        // send_webhook / trigger_automation: server-side only; no-op in client.
        console.info("button action not client-executable", a.type);
      }
    }
  };

  if (actions.length === 0) return null;
  return (
    <button
      type="button"
      disabled={updateRecord.isPending}
      className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium hover:bg-muted disabled:opacity-50"
      onClick={(e) => {
        e.stopPropagation();
        void run();
      }}
    >
      {property.config.actions && "⚡ "}
      {property.name}
    </button>
  );
}

// ---------------------------------------------------------------------------

export const CellRenderer = memo(function CellRenderer(props: CellRendererProps) {
  const { record, property, readOnly, onEdit } = props;

  if (property.type === "button") {
    return readOnly ? renderValue(props) : <ButtonsCell record={record} property={property} />;
  }

  const editable = !readOnly && isEditableProperty(property);

  // Intrinsically-interactive cells (title/relation/files) render their own
  // <button> content — never wrap them in the outer <button> (see
  // INTERACTIVE_CELL_TYPES). A plain container preserves the same box model
  // (h-full w-full) and lets the inner controls own their clicks.
  if (INTERACTIVE_CELL_TYPES.has(property.type)) {
    return (
      <div
        className="flex h-full w-full items-center overflow-hidden rounded px-1 text-left text-sm"
        aria-label={`${property.name} cell`}
      >
        {renderValue(props)}
      </div>
    );
  }

  return (
    <button
      type="button"
      disabled={!editable}
      className={cn(
        "flex h-full w-full items-center overflow-hidden rounded px-1 text-left text-sm",
        editable ? "cursor-text hover:bg-muted/60 focus-visible:ring-1 focus-visible:ring-ring" : "cursor-default"
      )}
      onClick={(e) => {
        e.stopPropagation();
        if (editable) onEdit?.(record, property);
      }}
      aria-label={`${property.name} cell${editable ? " (click to edit)" : ""}`}
      title={editable ? undefined : undefined}
    >
      {renderValue(props)}
    </button>
  );
});

/**
 * Convenience: value + property → display string (used by list/board/gallery
 * cards and record headers). Avoids mounting a full cell for tiny chips.
 */
export function cellToText(
  value: RecordValue | undefined | null,
  property: DatabaseProperty,
  users?: Record<string, UserRef>
): string {
  if (value == null) return "";
  if (value.text != null) return value.text;
  if (value.value != null) {
    if (property.type === "checkbox") return value.value ? "Yes" : "No";
    if (property.type === "number") return formatNumberValue(value.value, property.config);
    return String(value.value);
  }
  if (value.optionId && property.config.options) {
    return findOption(property.config.options, value.optionId)?.name ?? "";
  }
  if (value.optionIds?.length && property.config.options) {
    return value.optionIds
      .map((id) => findOption(property.config.options, id)?.name)
      .filter(Boolean)
      .join(", ");
  }
  if (value.start) return formatDateValue(value.start, property.config);
  if (value.end) return `${formatDateValue(value.start, property.config)} → ${formatDateValue(value.end, property.config)}`;
  if (value.userIds?.length) {
    return value.userIds.map((id) => users?.[id]?.name ?? id).join(", ");
  }
  if (value.recordIds) return `${value.recordIds.length} linked`;
  if (value.fileIds) return `${value.fileIds.length} file(s)`;
  if (value.error) return "⚠ formula error";
  return "";
}