"use client";

import Link from "next/link";
import { useState } from "react";

/**
 * CardPaymentConsent — Banca Intesa zahtev 2.5: neposredno pre iniciranja
 * naplate, kupcu se prikazuje SPECIFIKACIJA NARUDŽBINE (stavke, količine,
 * jedinične cene, ukupno) i traži EKSPLICITNA SAGLASNOST (check-box) sa
 * Opštim uslovima kupovine. Dugme „Plati karticom" je onemogućeno dok kupac
 * ne čekira saglasnost — bez saglasnosti plaćanje je blokirano.
 */
export type ConsentLineItem = {
  name: string;
  quantity: number;
  unitPrice: number | null;
  total: number | null;
};

export function CardPaymentConsent({
  checkoutHref,
  items,
  subtotal,
  tax,
  total,
  currency,
  termsHref,
}: {
  checkoutHref: string;
  items: ConsentLineItem[];
  subtotal: number;
  tax: number;
  total: number;
  currency: string;
  termsHref: string;
}) {
  const [agreed, setAgreed] = useState(false);
  // RSD se po pravilima NBS iskazuje na 2 decimale (dinar + pare) — obavezno za EPM.
  const money = (n: number) => {
    const isRsd = (currency || "").toUpperCase() === "RSD";
    const frac = isRsd ? 2 : 0;
    return `${n.toLocaleString("sr-RS", { minimumFractionDigits: frac, maximumFractionDigits: frac })} ${currency}`;
  };

  return (
    <section id="kartica" className="scroll-mt-24 rounded-2xl border-2 border-primary/30 bg-white p-5 sm:p-6">
      <p className="text-[0.65rem] font-extrabold uppercase tracking-[0.18em] text-primary">
        Kartično plaćanje
      </p>
      <h2 className="mt-1 text-lg font-bold text-foreground">Specifikacija narudžbine</h2>
      <p className="mt-1 text-sm text-muted-foreground">
        Proverite stavke pre plaćanja. Naplata se inicira tek nakon vaše saglasnosti.
      </p>

      <div className="mt-4 overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-border text-left text-xs text-muted-foreground">
              <th className="py-2 pr-2 font-medium">Stavka</th>
              <th className="px-2 py-2 text-right font-medium">Jed. cena</th>
              <th className="px-2 py-2 text-right font-medium">Kol.</th>
              <th className="py-2 pl-2 text-right font-medium">Ukupno</th>
            </tr>
          </thead>
          <tbody>
            {items.map((it, i) => (
              <tr key={i} className="border-b border-border/60 last:border-b-0">
                <td className="py-2 pr-2 text-foreground">{it.name}</td>
                <td className="px-2 py-2 text-right text-muted-foreground">
                  {it.unitPrice != null ? money(it.unitPrice) : "—"}
                </td>
                <td className="px-2 py-2 text-right text-muted-foreground">{it.quantity}</td>
                <td className="py-2 pl-2 text-right font-medium text-foreground">
                  {it.total != null ? money(it.total) : "—"}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <dl className="mt-3 space-y-1 border-t border-border pt-3 text-sm">
        <div className="flex justify-between">
          <dt className="text-muted-foreground">Osnovica</dt>
          <dd className="font-medium text-foreground">{money(subtotal)}</dd>
        </div>
        <div className="flex justify-between">
          <dt className="text-muted-foreground">PDV</dt>
          <dd className="font-medium text-foreground">{money(tax)}</dd>
        </div>
        <div className="flex justify-between border-t border-border pt-1.5">
          <dt className="font-bold text-foreground">Ukupno za naplatu</dt>
          <dd className="text-base font-bold text-foreground">{money(total)}</dd>
        </div>
      </dl>

      {/* Saglasnost — check-box koji uslovljava plaćanje */}
      <label className="mt-5 flex cursor-pointer items-start gap-3 rounded-xl border border-border bg-muted/30 p-3.5">
        <input
          type="checkbox"
          checked={agreed}
          onChange={(e) => setAgreed(e.target.checked)}
          className="mt-0.5 h-4 w-4 shrink-0 accent-[#c2410c]"
        />
        <span className="text-sm leading-6 text-foreground">
          Potvrđujem da sam upoznat/a i saglasan/na sa{" "}
          <Link href={termsHref} target="_blank" rel="noreferrer" className="font-semibold text-primary hover:underline">
            Opštim uslovima kupovine
          </Link>{" "}
          i da je specifikacija narudžbine iznad tačna.
        </span>
      </label>

      <button
        type="button"
        disabled={!agreed}
        onClick={() => {
          if (agreed) window.location.href = checkoutHref;
        }}
        className="mt-4 inline-flex h-11 w-full items-center justify-center rounded-xl bg-[#c2410c] px-5 text-sm font-bold text-white transition enabled:hover:bg-[#a8380a] disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
      >
        Plati karticom →
      </button>
      {!agreed ? (
        <p className="mt-2 text-[0.72rem] text-muted-foreground">
          Plaćanje će biti omogućeno nakon prihvatanja Opštih uslova kupovine.
        </p>
      ) : null}
    </section>
  );
}

export default CardPaymentConsent;