"use client";

import { useState, type ReactNode } from "react";

import { clsx } from "@/lib/cx";

import { Card } from "@/components/ui";

export type Column = {

  key: string;

  header: ReactNode;

  align?: "left" | "right";

  cardTitle?: boolean;

  hideOnCard?: boolean;

  width?: string;

};

export type Row = { key: string; cells: Record<string, ReactNode> };

export function DataTable({

  caption,

  columns,

  rows,

  className,

  cardLabel,

  pageSize,

}: {

  caption: string;

  columns: Column[];

  rows: Row[];

  className?: string;

  cardLabel?: string;

  pageSize?: number;

}) {

  const [shown, setShown] = useState(pageSize ?? rows.length);

  if (rows.length === 0) return null;

  const titleCol = columns.find((c) => c.cardTitle);

  const cardCols = columns.filter((c) => !c.cardTitle && !c.hideOnCard);

  const cap = pageSize ? shown : rows.length;

  const visibleRows = pageSize ? rows.slice(0, cap) : rows;

  const remaining = rows.length - cap;

  return (

    <Card className={clsx("overflow-hidden [contain:layout]", className)}>

      {

}

      <div className="hidden w-full overflow-x-auto lg:block">

        <table className="w-full table-fixed border-collapse text-left">

          <caption className="sr-only">{caption}</caption>

          <colgroup>

            {columns.map((c) => {

              const w = c.width ?? (c.align === "right" ? "10rem" : undefined);

              return <col key={c.key} style={w ? { width: w } : undefined} />;

            })}

          </colgroup>

          <thead>

            <tr className="border-b border-line">

              {columns.map((c) => (

                <th

                  key={c.key}

                  scope="col"

                  className={clsx(

                    "label px-4 py-2.5 font-normal",

                    c.align === "right" ? "text-right" : "text-left"

                  )}

                >

                  {c.header}

                </th>

              ))}

            </tr>

          </thead>

          <tbody>

            {visibleRows.map((r) => (

              <tr

                key={r.key}

                className="border-b border-line font-mono text-[13px] transition-colors last:border-0 hover:bg-graphite/60"

              >

                {columns.map((c) => (

                  <td

                    key={c.key}

                    className={clsx(

                      "break-words align-middle px-4 py-3",

                      c.align === "right" ? "text-right" : "text-left"

                    )}

                  >

                    {r.cells[c.key]}

                  </td>

                ))}

              </tr>

            ))}

          </tbody>

        </table>

      </div>

      {

}

      <ul

        className="divide-y divide-[color:var(--dk-line)] lg:hidden"

        aria-label={cardLabel ?? caption}

      >

        {visibleRows.map((r) => (

          <li key={r.key} className="p-4">

            {titleCol ? (

              <div className="mb-2.5 min-w-0 break-words font-mono text-[13px] text-paper">

                {r.cells[titleCol.key]}

              </div>

            ) : null}

            <dl className="grid grid-cols-1 gap-2">

              {cardCols.map((c) => {

                const val = r.cells[c.key];

                if (val == null) return null;

                return (

                  <div key={c.key} className="flex items-start gap-3">

                    <dt className="label w-[5.5rem] shrink-0 pt-0.5 normal-case">

                      {c.header}

                    </dt>

                    <dd className="min-w-0 flex-1 break-words text-left font-mono text-[13px] text-ash">

                      {val}

                    </dd>

                  </div>

                );

              })}

            </dl>

          </li>

        ))}

      </ul>

      {pageSize && remaining > 0 ? (

        <div className="flex items-center justify-between gap-3 border-t border-line px-4 py-3">

          <span className="label text-ash-2">

            Showing {cap.toLocaleString()} of {rows.length.toLocaleString()}

          </span>

          <button

            type="button"

            onClick={() => setShown((n) => n + (pageSize ?? 0))}

            className="focus-ring label inline-flex min-h-[44px] items-center rounded-[3px] border border-line px-3 text-ash underline underline-offset-4 transition-colors hover:border-paper hover:text-paper"

          >

            Show {Math.min(pageSize, remaining).toLocaleString()} more

          </button>

        </div>

      ) : null}

    </Card>

  );

}