"use client";
import { createContext, useContext, type ReactNode } from "react";

type Align = "start" | "center" | "end";
type Column = { key: string; header: string; align?: Align; width?: string };

type TableContextValue = { columns: Column[]; striped?: boolean };
const TableContext = createContext<TableContextValue | null>(null);

function useTableContext() {
  const ctx = useContext(TableContext);
  if (!ctx) throw new Error("Table.* components must be rendered inside <Table>");
  return ctx;
}

const alignClass: Record<Align, string> = {
  start: "text-start",
  center: "text-center",
  end: "text-end",
};

export function Table({
  columns,
  striped,
  children,
}: {
  columns: Column[];
  striped?: boolean;
  children: ReactNode;
}) {
  return (
    <TableContext.Provider value={{ columns, striped }}>
      <table className="w-full border-collapse text-sm">{children}</table>
    </TableContext.Provider>
  );
}

Table.Head = function TableHead() {
  const { columns } = useTableContext();
  return (
    <thead>
      <tr className="border-b border-border">
        {columns.map((col) => (
          <th
            key={col.key}
            style={{ width: col.width }}
            className={"py-2 px-3 font-medium " + alignClass[col.align ?? "start"]}
          >
            {col.header}
          </th>
        ))}
      </tr>
    </thead>
  );
};

Table.Row = function TableRow({
  index,
  children,
}: {
  index: number;
  children: ReactNode;
}) {
  const { striped } = useTableContext();
  return (
    <tr className={striped && index % 2 === 1 ? "bg-muted/40" : undefined}>
      {children}
    </tr>
  );
};

Table.Cell = function TableCell({
  columnKey,
  children,
}: {
  columnKey: string;
  children: ReactNode;
}) {
  const { columns } = useTableContext();
  const column = columns.find((c) => c.key === columnKey);
  return (
    <td className={"py-2 px-3 " + alignClass[column?.align ?? "start"]}>
      {children}
    </td>
  );
};

const columns = [
  { key: "name", header: "Name" },
  { key: "role", header: "Role" },
  { key: "salary", header: "Salary", align: "end" as const, width: "120px" },
];

function TeamTable({ people }: { people: Person[] }) {
  return (
    <Table columns={columns} striped>
      <Table.Head />
      <tbody>
        {people.map((person, i) => (
          <Table.Row key={person.id} index={i}>
            <Table.Cell columnKey="name">{person.name}</Table.Cell>
            <Table.Cell columnKey="role">{person.role}</Table.Cell>
            <Table.Cell columnKey="salary">{person.salary}</Table.Cell>
          </Table.Row>
        ))}
      </tbody>
    </Table>
  );
}