AdjustingEntryForm

"use client";

import * as React from "react";
import type { Account, AdjustmentType } from "@/lib/ledger/accounting.types";
import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";
import { ArrowUturnLeftIcon } from "@/components/ledger/icons";
import { JournalEntryForm } from "@/components/ledger/journal-entry-form";

const TYPES: { key: AdjustmentType; label: string; autoReverse: boolean; hint: string }[] = [
  { autoReverse: true, hint: "Expense incurred, not yet invoiced.", key: "accrual", label: "Accrual" },
  {
    autoReverse: false,
    hint: "Cash received or paid ahead of the period it belongs to.",
    key: "deferral",
    label: "Deferral",
  },
  {
    autoReverse: false,
    hint: "Periodic charge against a fixed asset.",
    key: "depreciation",
    label: "Depreciation",
  },
  {
    autoReverse: false,
    hint: "Periodic charge against an intangible or prepaid.",
    key: "amortization",
    label: "Amortization",
  },
  { autoReverse: false, hint: "Estimated liability or allowance.", key: "provision", label: "Provision" },
  {
    autoReverse: false,
    hint: "Moves a balance between accounts; no P&L effect.",
    key: "reclass",
    label: "Reclassification",
  },
  { autoReverse: false, hint: "Corrects an earlier estimate to actual.", key: "true-up", label: "True-up" },
];

export interface AdjustingEntryFormProps {
  accounts: Account[];
  className?: string;
  closedThrough?: Date;
  currency: string;
  periodEnd: Date;
}

/**
 * Templated by adjustment type. `autoReverse` defaults to **true** for
 * accruals, with the reversal date shown inline — and that scheduled
 * reversal is visible in the next period before it posts.
 */
export function AdjustingEntryForm({
  accounts,
  currency,
  periodEnd,
  closedThrough,
  className,
}: AdjustingEntryFormProps) {
  const [type, setType] = React.useState<AdjustmentType>("accrual");
  const config = TYPES.find((t) => t.key === type) ?? TYPES[0];
  const [autoReverse, setAutoReverse] = React.useState(config.autoReverse);

  React.useEffect(() => {
    setAutoReverse(TYPES.find((t) => t.key === type)?.autoReverse ?? false);
  }, [type]);

  const reversalDate = new Date(periodEnd.getFullYear(), periodEnd.getMonth() + 1, 1);

  return (
    <div className={cn("space-y-4", className)}>
      <fieldset>
        <legend className="mb-2 text-label font-medium text-text-secondary">Adjustment type</legend>
        <div className="flex flex-wrap gap-2">
          {TYPES.map((t) => (
            <button
              aria-checked={type === t.key}
              className={cn(
                "press h-8 rounded-sm border px-3 text-label font-medium",
                type === t.key
                  ? "border-accent bg-accent-subtle text-accent"
                  : "border-border hover:bg-surface-hover",
              )}
              key={t.key}
              onClick={() => setType(t.key)}
              role="radio"
              type="button"
            >
              {t.label}
            </button>
          ))}
        </div>
        <p className="mt-2 text-caption text-text-secondary">{config.hint}</p>
      </fieldset>

      <label className="flex items-start gap-2 rounded-sm bg-surface-sunken p-3">
        <input
          checked={autoReverse}
          className="mt-0.5 size-4 accent-[var(--accent)]"
          onChange={(e) => setAutoReverse(e.target.checked)}
          type="checkbox"
        />
        <span>
          <span className="flex items-center gap-1.5 text-body">
            <ArrowUturnLeftIcon aria-hidden="true" className="size-3.5 text-text-tertiary" />
            Reverse automatically
          </span>
          <span className="mt-0.5 block text-caption text-text-secondary">
            {autoReverse
              ? `Reverses ${formatDate(reversalDate)}. The reversal is visible in that period before it posts.`
              : "No reversal will be scheduled."}
          </span>
        </span>
      </label>

      <JournalEntryForm accounts={accounts} closedThrough={closedThrough} currency={currency} />
    </div>
  );
}