"use client";

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

type Props = { product: ProductPublic };

export default function CheckoutForm({ product }: Props) {
  const c = useCheckout(product);
  const cfg = product.landing;

  return (
    <div className="co-page-grid">
      <div className="cmain">
        <div className="cmain-h">Finalizar compra</div>
        <div className="cmain-s">Preencha seus dados para liberar o acesso na hora</div>
        <OrderBumpSection
          bumps={c.orderBumps}
          selected={c.selectedBumps}
          onToggle={c.toggleBump}
        />
        <CheckoutFields c={c} />
      </div>
      <div className="cside">
        <h4>Resumo do pedido</h4>
        <div className="cprod">
          <div className="cthumb">{product.emoji}</div>
          <div>
            <b>{product.name}</b>
            <span>Produto principal</span>
          </div>
        </div>
        {c.selectedBumps.length > 0
          ? c.orderBumps
              .filter((b) => c.selectedBumps.includes(b.id))
              .map((b) => (
                <div className="cline" key={b.id}>
                  <span>+ {b.title}</span>
                  <span>{moneyBrl(b.price)}</span>
                </div>
              ))
          : null}
        <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>
        {c.bumpTotalCents > 0 ? (
          <div className="cline">
            <span>Extras</span>
            <span>{centsToBrl(c.bumpTotalCents)}</span>
          </div>
        ) : null}
        <div className="ctot">
          <span>Total hoje</span>
          <b>{c.totalTodayLabel}</b>
        </div>
        <div className="g">
          🛡 <span>{cfg.guarantee}</span>
        </div>
      </div>
    </div>
  );
}