"use client";

import { useMemo, useState } from "react";
import { currency } from "@/lib/format";

type AutoMoneyFieldsProps = {
  amountLabel?: string;
  discountLabel?: string;
  finalLabel?: string;
  defaultAmount?: number | string | null;
  defaultDiscount?: number | string | null;
  className?: string;
};

function numeric(value: string | number | null | undefined) {
  const parsed = Number(String(value ?? "").replace(/,/g, ""));
  return Number.isFinite(parsed) ? parsed : 0;
}

function formatInputValue(value: number | string | null | undefined) {
  if (value === null || value === undefined) return "";
  return String(value);
}

export function AutoMoneyFields({
  amountLabel = "Amount",
  discountLabel = "Discount / Tax Return",
  finalLabel = "Final Cost",
  defaultAmount,
  defaultDiscount,
  className = "grid gap-4 md:grid-cols-3"
}: AutoMoneyFieldsProps) {
  const [amount, setAmount] = useState(formatInputValue(defaultAmount));
  const [discount, setDiscount] = useState(formatInputValue(defaultDiscount ?? 0));
  const finalCost = useMemo(() => Math.max(0, numeric(amount) - numeric(discount)), [amount, discount]);

  return (
    <div className={className} data-auto-money-fields>
      <label className="grid gap-2">
        <span className="label">{amountLabel}</span>
        <input className="field" name="amount" type="number" step="0.01" min="0" value={amount} onChange={(event) => setAmount(event.target.value)} required />
      </label>
      <label className="grid gap-2">
        <span className="label">{discountLabel}</span>
        <input className="field" name="discount" type="number" step="0.01" min="0" value={discount} onChange={(event) => setDiscount(event.target.value)} />
      </label>
      <label className="grid gap-2">
        <span className="label">{finalLabel}</span>
        <input className="field bg-slate-100 font-semibold text-ink" name="finalCost" type="number" step="0.01" min="0" value={finalCost.toFixed(2)} readOnly data-final-cost />
        <span className="text-xs text-slate-500">Calculated automatically: {currency(finalCost)}</span>
      </label>
    </div>
  );
}