Actions Table

"use client";

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

export interface ActionRow {
  id: string;
  title: string;
  owner: string;
  due: string;
  saving: number;
  done?: boolean;
}

export interface ActionsTableProps {
  rows?: ActionRow[];
  target?: number;
  className?: string;
}

const DEFAULT_ROWS: ActionRow[] = [
  { id: "a1", title: "Switch offices to green electricity", owner: "Léa", due: "Mar 2026", saving: 42, done: true },
  { id: "a2", title: "Rail for trips under 5 hours", owner: "Sam", due: "Jun 2026", saving: 27 },
  { id: "a3", title: "Consolidate freight lanes", owner: "Tomás", due: "Sep 2026", saving: 38 },
  { id: "a4", title: "Right-size cloud instances", owner: "Priya", due: "Oct 2026", saving: 9, done: true },
  { id: "a5", title: "Supplier code of conduct", owner: "Ana", due: "Dec 2026", saving: 14 },
];

/** Reduction plan table: round checkboxes mark actions done (row softens), owner and due date, mono savings, and a progress header showing tonnes secured toward the target. */
export function ActionsTable({ rows = DEFAULT_ROWS, target = 120, className }: ActionsTableProps) {
  const [done, setDone] = useState(rows.filter((r) => r.done).map((r) => r.id));
  const secured = rows.filter((r) => done.includes(r.id)).reduce((s, r) => s + r.saving, 0);
  const pct = Math.min(100, Math.round((secured / target) * 100));
  return (
    <div className={cn("rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-sm", className)}>
      <div className="p-6">
        <div className="flex flex-wrap items-baseline justify-between gap-2">
          <h3 className="font-da-display text-xl">Reduction plan</h3>
          <p aria-live="polite" className="text-sm text-da-muted-fg">
            <span className="font-da-mono text-da-fg">{secured}</span> of {target} tCO₂e secured
          </p>
        </div>
        <div
          role="progressbar"
          aria-label="Target progress"
          aria-valuemin={0}
          aria-valuemax={100}
          aria-valuenow={pct}
          className="mt-3 h-3 rounded-full bg-da-surface-2"
        >
          <div className="h-full rounded-full bg-da-primary transition-[width] duration-(--da-duration-slow) ease-da" style={{ width: `${pct}%` }} />
        </div>
      </div>
      <div className="relative overflow-x-auto" role="region" aria-label="Actions" tabIndex={0}>
        <table className="w-full min-w-[560px]">
          <caption className="sr-only">Reduction actions</caption>
          <thead className="text-left text-sm text-da-muted-fg">
            <tr>
              <th scope="col" className="w-12 px-6 py-2">
                <span className="sr-only">Done</span>
              </th>
              <th scope="col" className="px-3 py-2 font-normal">
                Action
              </th>
              <th scope="col" className="px-3 py-2 font-normal">
                Owner
              </th>
              <th scope="col" className="px-3 py-2 font-normal">
                Due
              </th>
              <th scope="col" className="px-6 py-2 text-right font-normal">
                Saving
              </th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => {
              const on = done.includes(r.id);
              return (
                <tr key={r.id} className={cn("da-transition border-t border-da-border", on && "bg-da-accent/40")}>
                  <td className="px-6 py-3">
                    <label className="grid size-7 cursor-pointer place-items-center rounded-full border-2 border-da-border-strong has-checked:border-da-primary has-checked:bg-da-primary has-checked:text-da-primary-fg has-focus-visible:ring-3 has-focus-visible:ring-da-ring">
                      <input
                        type="checkbox"
                        checked={on}
                        onChange={() => setDone(on ? done.filter((x) => x !== r.id) : [...done, r.id])}
                        aria-label={`Mark “${r.title}” as done`}
                        className="sr-only"
                      />
                      {on && <Check aria-hidden className="size-4" strokeWidth={3} />}
                    </label>
                  </td>
                  <td className={cn("px-3 py-3 font-medium", on && "text-da-muted-fg line-through decoration-da-primary/60")}>{r.title}</td>
                  <td className="px-3 py-3 text-da-muted-fg">{r.owner}</td>
                  <td className="px-3 py-3 text-da-muted-fg">{r.due}</td>
                  <td className="px-6 py-3 text-right font-da-mono text-sm text-da-primary">−{r.saving} t</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default ActionsTable;