"use client";

import { useState } from "react";
import { ModalPortal } from "@/components/admin/common/ModalPortal";

type Props = {
  invoiceId: string;
  invoiceNumber: string;
  totalAmount: number;
  currency: string;
};

function fmtAmount(amount: number, currency: string) {
  return `${new Intl.NumberFormat("sr-RS").format(amount)} ${currency}`;
}

/**
 * Admin "✓ Označi kao plaćeno" dugme — jedan klik markira predračun
 * kao PAID, kreira Payment record i automatski aktivira sve vezane
 * usluge (plan, boost, sponsored slot, premium subscription).
 *
 * Otvori se mali confirm dijalog gde admin može da unese broj
 * transakcije iz banke (opciono) pre potvrde.
 */
export function MarkPaidButton({ invoiceId, invoiceNumber, totalAmount, currency }: Props) {
  const [open, setOpen] = useState(false);
  const [transactionRef, setTransactionRef] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function confirm() {
    setBusy(true);
    setError(null);
    try {
      const res = await fetch("/api/admin/invoices/mark-paid", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          invoiceId,
          transactionRef: transactionRef.trim() || undefined,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Greška");
      window.location.reload();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Greška");
      setBusy(false);
    }
  }

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="inline-flex items-center gap-1.5 rounded-lg border border-emerald-500/40 bg-emerald-500/10 px-3 py-1.5 text-xs font-bold text-emerald-700 transition hover:bg-emerald-500/20"
      >
        ✓ Označi kao plaćeno
      </button>

      {open && (
        <ModalPortal>
        <div
          className="fixed inset-0 z-[200] flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
          onClick={() => !busy && setOpen(false)}
        >
          <div
            className="w-full max-w-md overflow-hidden rounded-2xl bg-white shadow-2xl"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="border-b border-border px-5 py-4">
              <p className="text-[0.65rem] font-extrabold uppercase tracking-[0.18em] text-emerald-600">
                Potvrda uplate
              </p>
              <h3 className="mt-1 font-display text-lg font-bold text-foreground">
                {invoiceNumber}
              </h3>
              <p className="mt-1 text-sm text-muted-foreground">
                Iznos: <strong>{fmtAmount(totalAmount, currency)}</strong>
              </p>
            </div>

            <div className="space-y-4 px-5 py-5">
              <div>
                <label className="block text-sm font-semibold text-foreground">
                  Broj transakcije iz banke (opciono)
                </label>
                <p className="mt-1 text-xs text-muted-foreground">
                  Referenca koju vidiš na bankovnom izvodu — pomaže za audit kasnije.
                </p>
                <input
                  type="text"
                  value={transactionRef}
                  onChange={(e) => setTransactionRef(e.target.value)}
                  placeholder="npr. 20260512-0001234567"
                  className="mt-2 h-11 w-full rounded-xl border border-border bg-white px-4 font-mono text-sm text-foreground"
                />
              </div>

              <div className="rounded-lg border border-emerald-300 bg-emerald-50 px-4 py-3 text-xs leading-relaxed text-emerald-800">
                Po potvrdi:
                <ul className="mt-1 list-disc space-y-0.5 pl-4">
                  <li>Predračun prelazi u status PAID.</li>
                  <li>Plan / boost / isticanje se automatski aktiviraju.</li>
                  <li>Vlasnik dobija email potvrdu.</li>
                  <li>Kreira se zadatak za izdavanje finalne fakture.</li>
                </ul>
              </div>

              {error && (
                <p className="rounded-lg border border-rose-500/40 bg-rose-500/10 px-3 py-2 text-xs text-rose-700">
                  {error}
                </p>
              )}
            </div>

            <div className="flex justify-end gap-2 border-t border-border bg-muted/30 px-5 py-3">
              <button
                type="button"
                onClick={() => setOpen(false)}
                disabled={busy}
                className="rounded-lg border border-border bg-white px-4 py-2 text-xs font-semibold text-foreground hover:bg-zinc-50 disabled:opacity-50"
              >
                Otkaži
              </button>
              <button
                type="button"
                onClick={confirm}
                disabled={busy}
                className="rounded-lg bg-emerald-600 px-5 py-2 text-xs font-bold text-white hover:bg-emerald-700 disabled:opacity-50"
              >
                {busy ? "Evidentiram..." : "Potvrdi uplatu"}
              </button>
            </div>
          </div>
        </div>
        </ModalPortal>
      )}
    </>
  );
}