"use client";

/**
 * TASK-0124 — "Generate column with formula" dialog.
 *
 * Flow: the user types a description of the column → the dialog calls the
 * formula endpoint (JSON, non-streamed — `dbAiApi.generateFormula`). The
 * engine VALIDATES the candidate expression (parse + type-check + evaluate
 * on the database's own first ≤5 rows) BEFORE saving; the response carries
 * the validated `expression` + `returnType` + the `samples` (recordId →
 * value/error) so the UI previews the evaluated values.
 *
 * NOTE on "Save": the server SAVES the formula as part of the endpoint (the
 * expression is engine-validated before the write, so the UI never has to
 * confirm an unvalidated expression — the preview IS the saved formula). The
 * dialog therefore shows the expression + the sample evaluation table and
 * closes; the new FORMULA column appears in the database (the query cache is
 * invalidated). A `422 formula_invalid` (after the server's retry-once) shows
 * the parse error and the formula is NOT written.
 *
 * Pinned testids (tests/e2e/specs/ai-database.spec.ts — do not rename):
 *   db-formula            the dialog
 *   db-formula-desc       the description textarea
 *   db-formula-generate   the Generate button
 *   db-formula-expression the validated expression
 *   db-formula-table      the sample evaluation table
 *   db-formula-done       the success summary
 *   db-ai-error-banner / db-ai-loading  (shared chrome)
 */
import { useCallback, useEffect, useRef, useState } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { CheckCheck, Loader2, Sigma } from "lucide-react";
import { dbAiApi, displayStoredValue, type DbFormulaResult } from "@/lib/ai-database";
import { ApiError } from "@/lib/api";
import { recordTitle, type DatabaseProperty, type RecordDto } from "@/hooks/use-database";
import { DbAiDialog, DbAiErrorBanner, DbAiLoading } from "@/components/ai/db-ai-dialog";

export interface AiFormulaDialogProps {
  open: boolean;
  workspaceId: string;
  databaseId: string;
  /** The database's properties (to resolve the FORMULA column + display). */
  properties: DatabaseProperty[];
  /** The loaded record rows (for the sample table's row labels). */
  records?: RecordDto[];
  onClose: () => void;
}

const MAX_DESC_CHARS = 500;

export function AiFormulaDialog({ open, workspaceId, databaseId, properties, records, onClose }: AiFormulaDialogProps) {
  const qc = useQueryClient();
  const [description, setDescription] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<{ code: string; message: string; parseError?: string } | null>(null);
  const [result, setResult] = useState<DbFormulaResult | null>(null);
  const lastDesc = useRef("");

  useEffect(() => {
    if (open) {
      setDescription("");
      setResult(null);
      setError(null);
      setLoading(false);
    }
  }, [open]);

  const recordById = useRef(new Map<string, { title: string | null }>());
  recordById.current = new Map((records ?? []).map((r) => [r.id, { title: recordTitle(r, properties) }]));
  const propertyById = useRef(new Map<string, DatabaseProperty>());
  propertyById.current = new Map(properties.map((p) => [p.id, p]));

  const invalid = description.trim().length === 0;

  const run = useCallback(
    async (desc: string) => {
      lastDesc.current = desc;
      setLoading(true);
      setError(null);
      setResult(null);
      try {
        const res = await dbAiApi.generateFormula(workspaceId, { databaseId, description: desc });
        setResult(res);
        void qc.invalidateQueries({ queryKey: ["database", databaseId] });
      } catch (err) {
        if (err instanceof ApiError) {
          const detail = (err.details as Array<Record<string, unknown>> | undefined)?.[0];
          setError({
            code: err.code,
            message: err.message,
            ...(typeof detail?.parseError === "string" ? { parseError: detail.parseError } : {})
          });
        } else {
          setError({ code: "NETWORK_ERROR", message: "Could not reach the server." });
        }
      } finally {
        setLoading(false);
      }
    },
    [workspaceId, databaseId, qc]
  );

  const generate = useCallback(() => {
    void run(description.trim());
  }, [run, description]);

  const retry = useCallback(() => {
    void run(lastDesc.current);
  }, [run]);

  const close = useCallback(() => {
    onClose();
  }, [onClose]);

  const formulaProp = result ? propertyById.current.get(result.propertyId) : undefined;
  const budget = error?.code === "AI_BUDGET_EXCEEDED" || error?.code === "AI_BUDGET_MONTHLY_EXCEEDED";
  const invalidStructure = error?.code === "UNPROCESSABLE_ENTITY";

  const live = loading
    ? "AI is generating a formula"
    : result
      ? `Formula generated: ${result.expression}`
      : error
        ? `Error: ${error.message}`
        : "";

  return (
    <DbAiDialog
      open={open}
      title="Generate column with formula"
      testId="db-formula"
      onClose={close}
      live={live}
      footer={
        <>
          <span className="min-w-0 truncate text-[11px] text-muted-foreground">
            {result ? "Formula validated and saved" : "Validated by the formula engine before it is saved"}
          </span>
          <button
            type="button"
            data-testid="db-formula-generate"
            onClick={() => void generate()}
            disabled={invalid || loading}
            className="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
          >
            {loading ? <Loader2 className="size-3.5 animate-spin" aria-hidden /> : <Sigma className="size-3.5" aria-hidden />}
            Generate
          </button>
        </>
      }
    >
      <label className="block text-xs font-medium text-muted-foreground" htmlFor="db-formula-desc">
        Describe the column to create
      </label>
      <textarea
        id="db-formula-desc"
        data-testid="db-formula-desc"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !invalid && !loading) {
            e.preventDefault();
            void generate();
          }
        }}
        rows={3}
        placeholder={'e.g. "a 100-point score when the title says Done, otherwise 0"'}
        maxLength={MAX_DESC_CHARS}
        className="w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-sm outline-none focus:border-primary"
      />

      {loading ? <DbAiLoading text="Generating formula…" rows={1} /> : null}

      {error ? (
        <DbAiErrorBanner
          code={error.code}
          message={invalidStructure && error.parseError ? `Formula invalid: ${error.parseError}` : error.message}
          budget={budget}
          retryable={budget}
          onRetry={retry}
        />
      ) : null}

      {result ? (
        <div className="space-y-3" data-testid="db-formula-done">
          <div className="rounded-md border border-border">
            <div className="flex items-center justify-between border-b border-border px-3 py-1.5 text-[11px] text-muted-foreground">
              <span className="font-medium">Formula</span>
              <span className="rounded bg-muted px-1.5 py-0.5 text-[10px]">returns {result.returnType}</span>
            </div>
            <code data-testid="db-formula-expression" className="block break-all px-3 py-2 font-mono text-xs">
              {result.expression}
            </code>
            {result.explanation ? <p className="border-t border-border px-3 py-1.5 text-[11px] text-muted-foreground">{result.explanation}</p> : null}
          </div>

          {result.samples.length > 0 ? (
            <div className="overflow-hidden rounded-md border border-border">
              <div className="border-b border-border bg-muted/30 px-3 py-1.5 text-[11px] font-medium text-muted-foreground">
                Sample values ({result.samples.length} row{result.samples.length === 1 ? "" : "s"})
              </div>
              <table data-testid="db-formula-table" className="w-full text-left text-xs">
                <thead>
                  <tr className="border-b border-border text-[10px] uppercase tracking-wide text-muted-foreground">
                    <th className="px-3 py-1 font-medium">Record</th>
                    <th className="px-3 py-1 font-medium">{formulaProp?.name ?? "Formula"}</th>
                  </tr>
                </thead>
                <tbody>
                  {result.samples.map((s) => {
                    const rec = recordById.current.get(s.recordId);
                    return (
                      <tr key={s.recordId} className="border-b border-border last:border-0">
                        <td className="max-w-[16rem] truncate px-3 py-1.5">{rec?.title?.trim() || s.recordId.slice(0, 8)}</td>
                        <td className="px-3 py-1.5">
                          {s.error ? (
                            <span className="text-amber-600 dark:text-amber-400" title={s.error}>
                              error: {s.error}
                            </span>
                          ) : (
                            displayStoredValue(s.value)
                          )}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          ) : (
            <p className="text-[11px] text-muted-foreground">No records yet — the column will compute as rows are added.</p>
          )}

          <div
            role="status"
            className="flex items-center gap-2 rounded-md border border-green-300 bg-green-50 px-3 py-2 text-xs text-green-900 dark:border-green-800 dark:bg-green-950/40 dark:text-green-200"
          >
            <CheckCheck className="size-3.5 shrink-0" aria-hidden />
            <span className="min-w-0 flex-1">
              The formula column “{formulaProp?.name ?? "Formula"}” is now in the database.
            </span>
          </div>
        </div>
      ) : null}
    </DbAiDialog>
  );
}