"use client";

import type { ProductPublic } from "@/lib/products";
import { moneyBrl, parseBrlToCents, centsToBrl } from "@/lib/landing-default";
import { useCheckout } from "@/hooks/useCheckout";
import { CheckoutFields } from "./CheckoutFields";

type Props = {
  product: ProductPublic;
  open: boolean;
  onClose: () => void;
};

function discountLabel(priceFrom: string, price: string) {
  const from = parseBrlToCents(priceFrom);
  const to = parseBrlToCents(price);
  const diff = from - to;
  if (diff <= 0) return "− R$ 0,00";
  return `− R$ ${centsToBrl(diff)}`;
}

export default function CheckoutModal({ product, open, onClose }: Props) {
  const c = useCheckout(product);
  const cfg = product.landing;

  if (!open) return null;

  return (
    <div
      id="co"
      className="open"
      onClick={(e) => e.target === e.currentTarget && onClose()}
      role="dialog"
      aria-modal="true"
    >
      <div className="cobox">
        <button type="button" className="x" onClick={onClose} aria-label="Fechar">
          ×
        </button>
        <div className="cside">
          <h4>Resumo do pedido</h4>
          <div className="cprod">
            <div className="cthumb">{product.emoji}</div>
            <div>
              <b>{product.name}</b>
              <span>E-book PDF • acesso imediato</span>
            </div>
          </div>
          <div className="cline">
            <span>Subtotal</span>
            <span>{moneyBrl(cfg.priceFrom)}</span>
          </div>
          <div className="cline">
            <span>Desconto</span>
            <span style={{ color: "#16a34a" }}>{discountLabel(cfg.priceFrom, cfg.price)}</span>
          </div>
          <div className="ctot">
            <span>Total hoje</span>
            <b>{moneyBrl(cfg.price)}</b>
          </div>
          <div className="g">
            🛡 <span>{cfg.guarantee}</span>
          </div>
        </div>
        <div className="cmain cm-side" aria-hidden />
        <div className="cmain" style={{ gridColumn: 1 }}>
          <div className="cmain-h">Finalizar compra</div>
          <div className="cmain-s">Preencha seus dados para liberar o acesso</div>
          <CheckoutFields c={c} />
        </div>
      </div>
    </div>
  );
}