import { Button } from "@repo/shadcn-ui/components/button";
import { useState } from "react";
import { createRoot } from "react-dom/client";

import type { EntityColumn } from "./components/entity-list";
import { EntityTable } from "./components/entity-list";

/** Fixture importada solo por Vite desde las pruebas MCP; no registra rutas ni endpoints. */
function ColumnBrowserFixture({ locale }: { locale: string }) {
  const [catalog, setCatalog] = useState("initial");
  const english = locale.startsWith("en");
  const columns: EntityColumn<{ id: string; name: string }>[] = [
    {
      id: "name",
      label: english ? "Name" : "Nombre",
      hideable: false,
      value: (item) => item.name,
      render: (item) => item.name,
    },
    ...(catalog === "removed"
      ? []
      : [
          {
            id: "detail",
            label: english ? "Notes" : "Notas",
            keywords: ["revisión técnica"],
            defaultVisible: false,
            render: () => "Detalles",
          },
        ]),
    { id: "year", label: english ? "Year" : "Año", value: () => 2026, render: () => 2026 },
    ...(catalog === "new"
      ? [
          {
            id: "late",
            label: english ? "New field" : "Campo nuevo",
            defaultVisible: false,
            render: () => "Campo posterior",
          },
        ]
      : []),
  ];

  return (
    <div className="flex flex-col gap-4 p-4">
      <div className="flex gap-2">
        <Button onClick={() => setCatalog("new")}>Añadir campo</Button>
        <Button onClick={() => setCatalog("removed")}>Retirar campo</Button>
      </div>
      <EntityTable
        columns={columns}
        columnVisibilityStorageKey="columns-test-current"
        items={[{ id: "one", name: "Identidad" }]}
        locale={locale}
        title={english ? "Sample" : "Muestra"}
      />
    </div>
  );
}

export function mountColumnFixture(target: HTMLElement, locale: string) {
  const root = createRoot(target);

  root.render(<ColumnBrowserFixture locale={locale} />);

  return root;
}