RecurringEntryTemplate

"use client";

import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { ArrowPathRoundedSquareIcon, LockClosedIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";
import { type Frequency, nextOccurrences } from "@/components/ledger/recurring-schedule";
import { StatusPill } from "@/components/ledger/status-pill";

export type RecurringInstance = {
  id: string;
  date: Date;
  amount: MoneyValue;
  posted: boolean;
};

export interface RecurringEntryTemplateProps {
  amount: MoneyValue;
  className?: string;
  frequency: Frequency;
  instances: RecurringInstance[];
  name: string;
  onEdit?: () => void;
  startDate: Date;
}

/**
 * The template is editable and edits apply **forward only**. Instances are
 * `source: "recurring"` and read-only — editing a posted instance would
 * silently detach it from the template that explains it.
 */
export function RecurringEntryTemplate({
  name,
  amount,
  frequency,
  startDate,
  instances,
  onEdit,
  className,
}: RecurringEntryTemplateProps) {
  const upcoming = nextOccurrences(startDate, frequency, 3);

  return (
    <div className={cn("rounded-xl border border-border bg-surface", className)}>
      <header className="flex flex-wrap items-start justify-between gap-3 border-b border-border-subtle px-6 py-4">
        <div>
          <p className="flex items-center gap-2 text-body font-medium">
            <ArrowPathRoundedSquareIcon aria-hidden="true" className="size-4 text-text-tertiary" />
            {name}
          </p>
          <p className="text-caption text-text-secondary">
            <Money size="xs" tone="inherit" value={amount} /> · {frequency} · started {formatDate(startDate)}
          </p>
        </div>
        <button className="text-label font-medium text-accent hover:underline" onClick={onEdit} type="button">
          Edit template
        </button>
      </header>

      <section className="px-6 py-4">
        <h3 className="text-label font-medium text-text-secondary">Upcoming</h3>
        <ul className="mt-2 space-y-1">
          {upcoming.map((d) => (
            <li className="numeric text-body" key={d.toISOString()}>
              {formatDate(d)}
            </li>
          ))}
        </ul>
      </section>

      <section className="border-t border-border-subtle px-6 py-4">
        <h3 className="text-label font-medium text-text-secondary">Posted instances</h3>
        <ul className="mt-2 space-y-1">
          {instances.map((i) => (
            <li className="flex items-center gap-3" key={i.id}>
              <LockClosedIcon aria-label="Read-only" className="size-3 shrink-0 text-text-tertiary" />
              <span className="numeric flex-1 text-body">{formatDate(i.date)}</span>
              <StatusPill entity="Entry" status={i.posted ? "settled" : "scheduled"} />
              <Money accounting value={i.amount} />
            </li>
          ))}
        </ul>
        <p className="mt-2 text-caption text-text-tertiary">
          Instances are read-only. Template edits apply forward only.
        </p>
      </section>
    </div>
  );
}