RecurringSchedule

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";

export type Frequency = "weekly" | "biweekly" | "monthly" | "quarterly" | "annual";

/**
 * "Monthly on the 31st" is ambiguous in February. Resolving the next three
 * occurrences makes that visible before it surprises anyone.
 */
export function nextOccurrences(start: Date, frequency: Frequency, count = 3): Date[] {
  const out: Date[] = [];
  const dayOfMonth = start.getDate();
  for (let i = 1; i <= count; i++) {
    if (frequency === "weekly") out.push(addDays(start, 7 * i));
    else if (frequency === "biweekly") out.push(addDays(start, 14 * i));
    else {
      const step = frequency === "monthly" ? 1 : frequency === "quarterly" ? 3 : 12;
      const target = new Date(start.getFullYear(), start.getMonth() + step * i, 1);
      const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
      out.push(new Date(target.getFullYear(), target.getMonth(), Math.min(dayOfMonth, lastDay)));
    }
  }
  return out;
}

function addDays(d: Date, n: number) {
  return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
}

export interface RecurringScheduleProps {
  className?: string;
  defaultFrequency?: Frequency;
}

export function RecurringSchedule({ className, defaultFrequency = "monthly" }: RecurringScheduleProps) {
  const [frequency, setFrequency] = React.useState<Frequency>(defaultFrequency);
  const [start, setStart] = React.useState(() => new Date(2026, 0, 31));
  const [endKind, setEndKind] = React.useState<"never" | "on" | "after">("never");
  const [occurrences, setOccurrences] = React.useState(12);

  const preview = nextOccurrences(start, frequency);

  return (
    <div className={cn("space-y-4", className)}>
      <label className="block">
        <span className="mb-2 block text-label font-medium text-text-secondary">Frequency</span>
        <select
          className="h-10 w-full rounded-sm border border-border bg-surface px-3 text-body outline-none focus-visible:border-accent"
          onChange={(e) => setFrequency(e.target.value as Frequency)}
          value={frequency}
        >
          <option value="weekly">Weekly</option>
          <option value="biweekly">Every two weeks</option>
          <option value="monthly">Monthly</option>
          <option value="quarterly">Quarterly</option>
          <option value="annual">Annually</option>
        </select>
      </label>

      <label className="block">
        <span className="mb-2 block text-label font-medium text-text-secondary">Starting</span>
        <input
          className="numeric h-10 w-full rounded-sm border border-border bg-surface px-3 text-body outline-none focus-visible:border-accent"
          onChange={(e) => setStart(new Date(`${e.target.value}T00:00:00`))}
          type="date"
          value={start.toISOString().slice(0, 10)}
        />
      </label>

      <fieldset>
        <legend className="mb-2 text-label font-medium text-text-secondary">Ends</legend>
        <div className="flex flex-wrap items-center gap-4">
          {(["never", "on", "after"] as const).map((k) => (
            <label className="flex items-center gap-2 text-body" key={k}>
              <input
                checked={endKind === k}
                className="accent-[var(--accent)]"
                name="end"
                onChange={() => setEndKind(k)}
                type="radio"
              />
              {k === "never" ? "Never" : k === "on" ? "On a date" : "After N payments"}
            </label>
          ))}
          {endKind === "after" ? (
            <input
              aria-label="Number of payments"
              className="numeric h-8 w-16 rounded-sm border border-border bg-surface px-2 text-body outline-none focus-visible:border-accent focus-visible:ring-2 focus-visible:ring-accent-subtle"
              inputMode="numeric"
              onChange={(e) => setOccurrences(Number(e.target.value.replace(/\D/g, "")) || 1)}
              type="text"
              value={occurrences}
            />
          ) : null}
        </div>
      </fieldset>

      <div className="rounded-md bg-surface-sunken p-3">
        <p className="text-caption text-text-secondary">Next three payments</p>
        <ul className="mt-1 space-y-0.5">
          {preview.map((d) => (
            <li className="numeric text-body" key={d.toISOString()}>
              {formatDate(d)}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}