"use client";

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

// Normalize a Kenyan number to 2547xxxxxxxx for M-Pesa B2C (mirrors
// lib/mpesa.ts normalizeMsisdn, kept inline so this client bundle stays clean).
function normalizeMsisdn(phone: string) {
  const digits = phone.replace(/\D/g, "");
  if (digits.startsWith("254")) return digits;
  if (digits.startsWith("0")) return `254${digits.slice(1)}`;
  if (digits.startsWith("7") || digits.startsWith("1")) return `254${digits}`;
  return digits;
}

export default function PayoutAccountForm({
  initial,
}: {
  initial: PayoutAccountRow | null;
}) {
  const router = useRouter();

  const [type, setType] = useState<PayoutAccountType>(initial?.type ?? "mpesa");
  const [mpesa, setMpesa] = useState(initial?.mpesa_msisdn ?? "");
  const [bank, setBank] = useState({
    bank_name: initial?.bank_name ?? "",
    bank_account_name: initial?.bank_account_name ?? "",
    bank_account_number: initial?.bank_account_number ?? "",
    bank_branch: initial?.bank_branch ?? "",
  });

  const [error, setError] = useState<string | null>(null);
  const [saved, setSaved] = useState(false);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError(null);
    setSaved(false);

    const row =
      type === "mpesa"
        ? {
            type,
            mpesaMsisdn: normalizeMsisdn(mpesa),
            bankName: null,
            bankAccountName: null,
            bankAccountNumber: null,
            bankBranch: null,
          }
        : {
            type,
            mpesaMsisdn: null,
            bankName: bank.bank_name,
            bankAccountName: bank.bank_account_name,
            bankAccountNumber: bank.bank_account_number,
            bankBranch: bank.bank_branch,
          };

    // `verified` is deliberately not sent: the API route forces it false on
    // any destination-field save, only an admin route may grant it.
    const res = await fetch("/api/dashboard/payout-account", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(row),
    });

    if (!res.ok) {
      const data = await res.json();
      setError(data.error ?? "Could not save");
      setLoading(false);
      return;
    }

    setSaved(true);
    setLoading(false);
    router.refresh();
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="flex items-center gap-3">
        <div className="flex rounded-md border border-be-border p-1 text-sm">
          {(["mpesa", "bank"] as const).map((t) => (
            <button
              key={t}
              type="button"
              onClick={() => setType(t)}
              className={`rounded px-3 py-1.5 font-medium capitalize transition-colors ${
                type === t ? "bg-brand-green text-white" : "text-be-muted hover:text-be-text"
              }`}
            >
              {t === "mpesa" ? "M-Pesa" : "Bank"}
            </button>
          ))}
        </div>
        {initial?.verified ? (
          <span className="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700">
            Verified
          </span>
        ) : initial ? (
          <span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700">
            Pending verification
          </span>
        ) : null}
      </div>

      {type === "mpesa" ? (
        <Field label="M-Pesa number">
          <input
            required
            type="tel"
            placeholder="07XX XXX XXX"
            value={mpesa}
            onChange={(e) => setMpesa(e.target.value)}
            className="input"
          />
        </Field>
      ) : (
        <div className="grid gap-4 sm:grid-cols-2">
          <Field label="Bank name">
            <input
              required
              value={bank.bank_name}
              onChange={(e) => setBank({ ...bank, bank_name: e.target.value })}
              className="input"
            />
          </Field>
          <Field label="Account name">
            <input
              required
              value={bank.bank_account_name}
              onChange={(e) => setBank({ ...bank, bank_account_name: e.target.value })}
              className="input"
            />
          </Field>
          <Field label="Account number">
            <input
              required
              value={bank.bank_account_number}
              onChange={(e) => setBank({ ...bank, bank_account_number: e.target.value })}
              className="input"
            />
          </Field>
          <Field label="Branch">
            <input
              value={bank.bank_branch}
              onChange={(e) => setBank({ ...bank, bank_branch: e.target.value })}
              className="input"
            />
          </Field>
        </div>
      )}

      {error && <p className="text-sm text-red-600">{error}</p>}
      {saved && <p className="text-sm text-green-600">Payout details saved.</p>}

      <button
        type="submit"
        disabled={loading}
        className="rounded-md bg-brand-green px-4 py-2 text-sm font-medium text-white hover:bg-brand-green-deep disabled:opacity-50"
      >
        {loading ? "Saving…" : "Save payout details"}
      </button>
    </form>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div>
      <label className="block text-sm font-medium mb-1">{label}</label>
      {children}
    </div>
  );
}