import { useState } from "react";
import { Eye } from "lucide-react";
import Button from "../src/components/Button";
import Card from "../src/components/Card";
import ConnectionTree from "../src/components/ConnectionTree";
import ContentSection from "../src/components/ContentSection";
import LoadingFrame from "../src/components/LoadingFrame";
import DataGrid, { type DataGridColumn } from "../src/components/table/DataGrid";
import TableActionGroup from "../src/components/table/TableActionGroup";

type Row = { id: string; name: string; detail: string };
const rows: Row[] = ["Alpha", "Beta", "Gamma"].map((name) => ({ id: name, name, detail: "A long configured value ".repeat(12) }));

/** The real shared surfaces, without module-local inset or width overrides. */
export default function CardTableLayoutScenario() {
  const [loading, setLoading] = useState(false);
  const [inspected, setInspected] = useState("");
  const columns: DataGridColumn<Row>[] = [
    { id: "name", header: "Name", minWidth: 160, value: (row) => row.name },
    { id: "detail", header: "Details", minWidth: 220, value: (row) => row.detail },
    { id: "actions", header: "Actions", columnType: "actions", sticky: "end", render: (row) => <TableActionGroup actions={[
      { id: "inspect", label: `Inspect ${row.name}`, icon: <Eye />, onClick: () => setInspected(row.name) }
    ]} /> }
  ];
  const grid = (id: string) => <DataGrid id={`card-table-${id}`} rows={rows} columns={columns} getRowKey={(row) => row.id} />;
  const tree = () => <ConnectionTree rows={rows} columns={[{ id: "name", header: "Name", render: (row: Row) => row.name }]} getRowKey={(row) => row.id} />;
  return <main style={{ padding: 16, minWidth: 0, display: "grid", gap: 16, gridTemplateColumns: "minmax(0, 1fr)" }}>
    <Button onClick={() => setLoading((value) => !value)}>Toggle loading</Button>
    <output data-testid="card-table-inspected">{inspected}</output>
    <Card title="Direct table" data-testid="direct-table">{grid("direct")}</Card>
    <Card title="Collapsible table" data-testid="collapsible-table" collapsible persistCollapse={false}>{grid("collapsible")}</Card>
    <Card title="Loading table" data-testid="loading-table"><LoadingFrame loading={loading} indicator="none" label="Loading rows">{grid("loading")}</LoadingFrame></Card>
    <Card title="Admin table" data-testid="admin-table"><div className="admin-table-surface">{grid("admin")}</div></Card>
    <Card title="Loading admin table" data-testid="loading-admin-table"><LoadingFrame loading={loading} indicator="none" label="Loading rows"><div className="admin-table-surface">{grid("loading-admin")}</div></LoadingFrame></Card>
    <Card title="Connection table" data-testid="connection-table">{tree()}</Card>
    <Card title="Loading connection table" data-testid="loading-connection-table"><LoadingFrame loading={loading} indicator="none" label="Loading rows">{tree()}</LoadingFrame></Card>
    <Card title="Explicit table" data-testid="explicit-table" bodyLayout="table"><LoadingFrame loading={loading} indicator="none" label="Loading rows">{grid("explicit")}</LoadingFrame></Card>
    <Card title="Table with context" data-testid="table-with-context" bodyLayout="table">
      <ContentSection density="default" spacing="none">Meaningful table context</ContentSection>
      {grid("context")}
    </Card>
    <Card title="Mixed content" data-testid="mixed-content"><p>Ordinary content keeps its inset.</p>{grid("mixed")}</Card>
    <Card title="Loading mixed content" data-testid="loading-mixed-content"><LoadingFrame loading={loading} indicator="none" label="Loading rows"><p>Ordinary content keeps its inset.</p>{grid("loading-mixed")}</LoadingFrame></Card>
    <div data-testid="standalone-table">{grid("standalone")}</div>
  </main>;
}