"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

/**
 * The panel's data table.
 *
 * From md up it's an ordinary table. Below xl, long values (emails, URLs)
 * may wrap anywhere so the columns fit a tablet; if they still can't, the
 * table scrolls sideways inside its card as a last resort.
 *
 * On a phone (below md) each row becomes a stacked card: one line per cell, labelled
 * with its column heading. The labels are read from the table's own <th>s
 * and stamped onto the cells as `data-label`, so pages need no extra markup
 * — every table in the panel gets the card layout for free. Cells under an
 * empty heading (an actions column) simply go unlabelled.
 */
export function Table({ children }: { children: React.ReactNode }) {
  const ref = React.useRef<HTMLTableElement>(null);

  // Runs after every render: rows arrive and change with the data.
  React.useLayoutEffect(() => {
    const table = ref.current;
    if (!table) return;
    const heads = Array.from(table.querySelectorAll("thead th")).map(
      (th) => th.textContent?.trim() ?? "",
    );
    table.querySelectorAll("tbody tr").forEach((tr) => {
      let col = 0;
      Array.from(tr.children).forEach((cell) => {
        const td = cell as HTMLTableCellElement;
        const label = td.colSpan > 1 ? "" : (heads[col] ?? "");
        if (label) td.dataset.label = label;
        else delete td.dataset.label;
        col += td.colSpan || 1;
      });
    });
  });

  return (
    <div className="rounded-xl border border-border bg-card md:overflow-x-auto md:overscroll-x-contain">
      <table
        ref={ref}
        className="w-full border-collapse text-sm max-md:block"
      >
        {children}
      </table>
    </div>
  );
}

export function THead({ children }: { children: React.ReactNode }) {
  return (
    <thead className="border-b border-border bg-muted/50 text-left text-xs uppercase tracking-wide text-muted-foreground max-md:hidden">
      {children}
    </thead>
  );
}

export function TH({
  children,
  className,
}: {
  children?: React.ReactNode;
  className?: string;
}) {
  return (
    <th className={cn("whitespace-nowrap px-4 py-3 font-medium", className)}>
      {children}
    </th>
  );
}

export function TR({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <tr
      className={cn(
        "border-b border-border last:border-0 align-top",
        // Phone: a card per row.
        "max-md:block max-md:px-4 max-md:py-3",
        className,
      )}
    >
      {children}
    </tr>
  );
}

export function TD({
  children,
  className,
}: {
  children?: React.ReactNode;
  className?: string;
}) {
  return (
    <td
      className={cn(
        "px-4 py-3 text-foreground",
        // Phone: one labelled block per cell — the label pinned on the left,
        // the cell's own content flowing beside it exactly as it would in the
        // table (stacked lines stay stacked). Alignment classes meant for a
        // column (text-right on actions) give way to the card's flow.
        "max-md:relative max-md:block max-md:px-0 max-md:py-1.5 max-md:text-left",
        "max-md:data-label:pl-28",
        "max-md:data-label:before:absolute max-md:data-label:before:left-0 max-md:data-label:before:top-2 max-md:data-label:before:w-24 max-md:data-label:before:text-[11px] max-md:data-label:before:font-medium max-md:data-label:before:uppercase max-md:data-label:before:leading-4 max-md:data-label:before:tracking-wide max-md:data-label:before:text-muted-foreground max-md:data-label:before:content-[attr(data-label)]",
        // Long values (emails, URLs) wrap rather than widen the table or card.
        "max-xl:[overflow-wrap:anywhere]",
        className,
      )}
    >
      {children}
    </td>
  );
}