CloseChecklist

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { daysBetween, formatDate } from "@/lib/ledger/fiscal-period";
import { Button } from "@/components/ledger/button";
import { HoldToConfirm } from "@/components/ledger/hold-to-confirm";
import { CheckIcon, ExclamationTriangleIcon, LockClosedIcon } from "@/components/ledger/icons";

export type CloseTask = {
  id: string;
  section: string;
  label: string;
  owner: string;
  dueDate: Date;
  state: "todo" | "in-progress" | "done" | "blocked";
  blockedBy?: string;
  /** Weighted, because ten trivial checks and one bank rec is not 91% done. */
  weight: number;
};

export interface CloseChecklistProps {
  className?: string;
  onSignOff?: () => void;
  onToggle?: (id: string) => void;
  tasks: CloseTask[];
  today?: Date;
}

/** Progress is by weighted check, not count. Sign-off is irreversible. */
export function CloseChecklist({
  tasks,
  today = new Date(),
  onToggle,
  onSignOff,
  className,
}: CloseChecklistProps) {
  const sections = React.useMemo(() => {
    const map = new Map<string, CloseTask[]>();
    for (const t of tasks) {
      const list = map.get(t.section) ?? [];
      list.push(t);
      map.set(t.section, list);
    }
    return [...map.entries()];
  }, [tasks]);

  const totalWeight = tasks.reduce((s, t) => s + t.weight, 0);
  const doneWeight = tasks.filter((t) => t.state === "done").reduce((s, t) => s + t.weight, 0);
  const percent = totalWeight === 0 ? 0 : Math.round((doneWeight / totalWeight) * 100);
  const allDone = doneWeight === totalWeight;

  return (
    <div className={cn("space-y-4", className)}>
      <div className="rounded-md border border-border bg-surface p-4">
        <div className="flex items-baseline justify-between">
          <span className="text-label font-medium">Close progress</span>
          <span className="numeric text-figure-md font-medium">{percent}%</span>
        </div>
        <div
          aria-label="Close progress, weighted"
          aria-valuemax={100}
          aria-valuemin={0}
          aria-valuenow={percent}
          className="mt-2 h-[3px] w-full bg-border-subtle"
          role="progressbar"
        >
          <div className="h-full bg-accent" style={{ width: `${percent}%` }} />
        </div>
        <p className="mt-2 text-caption text-text-tertiary">Weighted by effort, not by task count.</p>
      </div>

      {sections.map(([section, items]) => (
        <section className="overflow-hidden rounded-xl border border-border bg-surface" key={section}>
          <h3 className="border-b border-border-subtle px-4 py-3 text-label font-medium text-text-secondary">
            {section}
          </h3>
          <ul>
            {items.map((t) => {
              const overdueDays = daysBetween(t.dueDate, today);
              const overdue = overdueDays > 0 && t.state !== "done";
              return (
                <li
                  className="flex items-center gap-3 border-b border-border-subtle px-4 py-3 last:border-b-0"
                  key={t.id}
                >
                  <button
                    aria-label={`Mark ${t.label} ${t.state === "done" ? "not done" : "done"}`}
                    aria-pressed={t.state === "done"}
                    className="grid size-5 shrink-0 place-items-center rounded-full border border-border-strong disabled:opacity-40"
                    disabled={t.state === "blocked"}
                    onClick={() => onToggle?.(t.id)}
                    type="button"
                  >
                    {t.state === "done" ? (
                      <CheckIcon aria-hidden="true" className="size-3 text-positive" />
                    ) : t.state === "blocked" ? (
                      <LockClosedIcon aria-hidden="true" className="size-3 text-text-tertiary" />
                    ) : (
                      <span
                        aria-hidden="true"
                        className="size-2 rounded-full bg-current text-text-disabled"
                      />
                    )}
                  </button>
                  <span className="min-w-0 flex-1">
                    <span
                      className={cn(
                        "block text-body",
                        t.state === "done" && "text-text-secondary line-through",
                      )}
                    >
                      {t.label}
                    </span>
                    {t.blockedBy ? (
                      <span className="block text-caption text-warning">Blocked by: {t.blockedBy}</span>
                    ) : null}
                  </span>
                  <span className="shrink-0 text-caption text-text-secondary">{t.owner}</span>
                  <span
                    className={cn(
                      "numeric w-28 shrink-0 text-right text-caption",
                      overdue ? "text-negative" : "text-text-tertiary",
                    )}
                  >
                    {overdue ? (
                      <span className="inline-flex items-center gap-1">
                        <ExclamationTriangleIcon aria-hidden="true" className="size-3" />
                        {overdueDays}d overdue
                      </span>
                    ) : (
                      formatDate(t.dueDate)
                    )}
                  </span>
                </li>
              );
            })}
          </ul>
        </section>
      ))}

      <div className="rounded-md border border-border bg-surface p-4">
        <p className="mb-3 text-body">
          Signing off a close is irreversible. Statements generated after sign-off are marked final.
        </p>
        {allDone ? (
          <HoldToConfirm
            label="Hold to sign off the close"
            onConfirm={() => onSignOff?.()}
            typedConfirmation="SIGN OFF"
          />
        ) : (
          <Button disabled variant="primary">
            Sign off — {tasks.filter((t) => t.state !== "done").length} tasks remain
          </Button>
        )}
      </div>
    </div>
  );
}