Supplier Table

"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export interface SupplierRow {
  name: string;
  category: string;
  share: number;
  status: "shared" | "invited" | "estimated";
  quality: 1 | 2 | 3;
}

export interface SupplierTableProps {
  rows?: SupplierRow[];
  className?: string;
}

const DEFAULT_ROWS: SupplierRow[] = [
  { name: "Moulin Paper Co.", category: "Packaging", share: 18, status: "shared", quality: 3 },
  { name: "Rhône Freight", category: "Road freight", share: 14, status: "invited", quality: 1 },
  { name: "Kiln & Clay", category: "Ceramics", share: 11, status: "shared", quality: 2 },
  { name: "Alpine Cloud", category: "Hosting", share: 7, status: "estimated", quality: 1 },
  { name: "Lumen Textiles", category: "Fabrics", share: 6, status: "invited", quality: 1 },
];

const STATUS = {
  shared: ["Data shared", "bg-da-accent text-da-accent-fg"],
  invited: ["Invited", "bg-da-secondary text-da-secondary-fg"],
  estimated: ["Estimated", "bg-da-surface-2 text-da-muted-fg"],
} as const;

/** Supplier engagement table: filter pills by status, arch avatars, share of footprint, status pill and 3-dot data quality meter, with a per-row “Nudge” pill that turns into “Sent”. */
export function SupplierTable({ rows = DEFAULT_ROWS, className }: SupplierTableProps) {
  const [filter, setFilter] = useState<"all" | SupplierRow["status"]>("all");
  const [nudged, setNudged] = useState<string[]>([]);
  const list = rows.filter((r) => filter === "all" || r.status === filter);
  return (
    <div className={cn("rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-sm", className)}>
      <div role="group" aria-label="Filter by status" className="flex flex-wrap gap-2 p-5">
        {(["all", "shared", "invited", "estimated"] as const).map((f) => (
          <button
            key={f}
            type="button"
            aria-pressed={filter === f}
            onClick={() => setFilter(f)}
            className={cn(
              "da-focus da-transition rounded-da-pill px-4 py-1.5 text-sm capitalize",
              filter === f ? "bg-da-primary text-da-primary-fg" : "bg-da-surface-2 hover:bg-da-muted",
            )}
          >
            {f}
          </button>
        ))}
      </div>
      <div className="relative overflow-x-auto" role="region" aria-label="Suppliers" tabIndex={0}>
        <table className="w-full min-w-[620px]">
          <caption className="sr-only">Suppliers ({list.length})</caption>
          <thead className="text-left text-sm text-da-muted-fg">
            <tr>
              <th scope="col" className="px-5 py-2 font-normal">
                Supplier
              </th>
              <th scope="col" className="px-3 py-2 text-right font-normal">
                Share
              </th>
              <th scope="col" className="px-3 py-2 font-normal">
                Status
              </th>
              <th scope="col" className="px-3 py-2 font-normal">
                Data quality
              </th>
              <th scope="col" className="px-5 py-2">
                <span className="sr-only">Action</span>
              </th>
            </tr>
          </thead>
          <tbody>
            {list.map((r) => (
              <tr key={r.name} className="border-t border-da-border">
                <td className="px-5 py-3">
                  <div className="flex items-center gap-3">
                    <span
                      aria-hidden
                      className="grid h-10 w-9 place-items-center rounded-t-full rounded-b-da-sm bg-da-accent font-da-display text-da-accent-fg"
                    >
                      {r.name[0]}
                    </span>
                    <span>
                      <span className="block font-medium">{r.name}</span>
                      <span className="block text-sm text-da-muted-fg">{r.category}</span>
                    </span>
                  </div>
                </td>
                <td className="px-3 py-3 text-right font-da-mono text-sm">{r.share}%</td>
                <td className="px-3 py-3">
                  <span className={cn("rounded-da-pill px-2.5 py-0.5 text-xs font-medium", STATUS[r.status][1])}>{STATUS[r.status][0]}</span>
                </td>
                <td className="px-3 py-3">
                  <span role="img" aria-label={`Quality ${r.quality} of 3`} className="flex gap-1">
                    {[1, 2, 3].map((i) => (
                      <span key={i} className={cn("size-2.5 rounded-full", i <= r.quality ? "bg-da-primary" : "bg-da-surface-2")} />
                    ))}
                  </span>
                </td>
                <td className="px-5 py-3 text-right">
                  {r.status !== "shared" && (
                    <button
                      type="button"
                      disabled={nudged.includes(r.name)}
                      onClick={() => setNudged([...nudged, r.name])}
                      className="da-focus da-transition rounded-da-pill bg-da-surface-2 px-3.5 py-1.5 text-sm hover:bg-da-muted disabled:bg-transparent disabled:text-da-primary"
                    >
                      {nudged.includes(r.name) ? "Sent ✓" : "Nudge"}
                      <span className="sr-only"> {r.name}</span>
                    </button>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default SupplierTable;