"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import type { PayoutRates } from "@/lib/types";

const FIELDS: { key: keyof PayoutRates; label: string; hint: string; unit: string }[] = [
  { key: "commission_tax_pct", label: "Tax on commission", hint: "Added to each event's commission (default 4%)", unit: "%" },
  { key: "email_kes", label: "Email", hint: "Per ticket confirmation, resend or change notice", unit: "KES" },
  { key: "sms_kes", label: "SMS", hint: "Per ticket resend or change notice SMS", unit: "KES" },
  { key: "campaign_sms_kes", label: "Campaign SMS", hint: "Per SMS an organizer sends to their customers", unit: "KES" },
  { key: "campaign_email_kes", label: "Campaign email", hint: "Per campaign email", unit: "KES" },
];

// Admin-only: the deductions taken from organizer payouts. Organizers never
// see these rates, only their resulting payout.
export default function PayoutRatesForm({ initial }: { initial: PayoutRates }) {
  const router = useRouter();
  const [rates, setRates] = useState<Record<keyof PayoutRates, string>>(
    Object.fromEntries(FIELDS.map((f) => [f.key, String(initial[f.key])])) as Record<keyof PayoutRates, string>
  );
  const [saving, setSaving] = useState(false);
  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);

  async function save(e: React.FormEvent) {
    e.preventDefault();
    const body = Object.fromEntries(FIELDS.map((f) => [f.key, Number(rates[f.key])]));
    if (Object.values(body).some((v) => !Number.isFinite(v) || v < 0)) {
      setMsg({ ok: false, text: "Enter valid numbers (0 or more)." });
      return;
    }
    if (!confirm("Change payout deductions? This changes what every organizer is owed, including for past sales.")) return;
    setSaving(true);
    setMsg(null);
    const res = await fetch("/api/admin/settings/payout-rates", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body),
    }).catch(() => null);
    const data = res ? await res.json().catch(() => ({})) : {};
    setSaving(false);
    if (!res || !res.ok) return setMsg({ ok: false, text: data.error ?? "Could not save" });
    setMsg({ ok: true, text: "Saved. Earnings and payouts use the new rates now." });
    router.refresh();
  }

  return (
    <form onSubmit={save} className="be-card space-y-4 p-5">
      <div>
        <h2 className="text-sm font-semibold text-be-text">Payout deductions</h2>
        <p className="mt-0.5 text-xs text-be-muted">
          Taken from organizer payouts on top of each event&apos;s commission. Admin-only — organizers just see
          their payout. The breakdown per organizer is on Earnings.
        </p>
      </div>
      <div className="grid gap-3 sm:grid-cols-2">
        {FIELDS.map((f) => (
          <label key={f.key} className="block">
            <span className="block text-sm font-medium text-be-text">
              {f.label} <span className="font-normal text-be-muted">({f.unit})</span>
            </span>
            <span className="mb-1 block text-xs text-be-muted">{f.hint}</span>
            <input
              type="number"
              min={0}
              step="0.01"
              required
              value={rates[f.key]}
              onChange={(e) => setRates({ ...rates, [f.key]: e.target.value })}
              className="be-input w-full"
            />
          </label>
        ))}
      </div>
      <div className="flex items-center gap-3">
        <button type="submit" disabled={saving} className="be-act be-act-primary">
          {saving ? "Saving…" : "Save deductions"}
        </button>
        {msg && (
          <p className={`text-xs ${msg.ok ? "text-[color:var(--pill-ok-fg)]" : "text-[color:var(--pill-danger-fg)]"}`}>
            {msg.text}
          </p>
        )}
      </div>
    </form>
  );
}