"use client";

import type { useCheckout } from "@/hooks/useCheckout";

type CheckoutState = ReturnType<typeof useCheckout>;

export function CheckoutFields({ c }: { c: CheckoutState }) {
  const locked = c.checkoutLocked;

  return (
    <>
      <div className="cf">
        <label>Nome completo</label>
        <input
          value={c.name}
          onChange={(e) => c.setName(e.target.value)}
          placeholder="Seu nome"
          disabled={locked}
        />
      </div>
      <div className="cf">
        <label>E-mail</label>
        <input
          value={c.email}
          onChange={(e) => c.setEmail(e.target.value)}
          placeholder="voce@email.com"
          type="email"
          disabled={locked}
        />
      </div>
      <div className="c2">
        <div className="cf">
          <label>CPF *</label>
          <input
            value={c.cpf}
            onChange={(e) => c.setCpf(e.target.value)}
            placeholder="000.000.000-00"
            disabled={locked}
          />
        </div>
        <div className="cf">
          <label>Telefone{c.pay === "card" ? " *" : ""}</label>
          <input
            value={c.phone}
            onChange={(e) => c.setPhone(e.target.value)}
            placeholder="(00) 00000-0000"
            disabled={locked}
          />
        </div>
      </div>
      <label
        style={{
          fontSize: ".82rem",
          color: "rgba(255,255,255,.7)",
          display: "block",
          margin: "5px 0",
        }}
      >
        Forma de pagamento
      </label>
      <div className="ptabs">
        <div
          className={`ptab${c.pay === "pix" ? " active" : ""}`}
          onClick={() => !locked && c.setPay("pix")}
          role="button"
          tabIndex={0}
          onKeyDown={(e) => e.key === "Enter" && !locked && c.setPay("pix")}
        >
          <span className="e">⚡</span>Pix
        </div>
        <div
          className={`ptab${c.pay === "card" ? " active" : ""}`}
          onClick={() => !locked && c.setPay("card")}
          role="button"
          tabIndex={0}
          onKeyDown={(e) => e.key === "Enter" && !locked && c.setPay("card")}
        >
          <span className="e">💳</span>Cartão
        </div>
      </div>
      {c.pay === "pix" ? (
        <div className="pixb">
          {c.pixCopy ? (
            <>
              {c.pixImg ? (
                <div className="pixq">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img src={c.pixImg} alt="QR Pix" style={{ width: "100%", height: "100%" }} />
                </div>
              ) : null}
              <p>Copie o código Pix e pague no app do banco:</p>
              <textarea readOnly value={c.pixCopy} rows={3} style={{ width: "100%", marginTop: 8 }} />
              <button
                type="button"
                className="b ghost sm"
                style={{ marginTop: 8 }}
                onClick={() => navigator.clipboard.writeText(c.pixCopy!)}
              >
                Copiar código
              </button>
              {c.awaitingPix ? (
                <p style={{ marginTop: 12, fontSize: ".88rem", opacity: 0.75 }}>
                  Aguardando confirmação do Pix… esta página atualiza sozinha.
                </p>
              ) : null}
            </>
          ) : (
            <p>
              Clique em <b style={{ color: "#fff" }}>Pagar</b> para gerar o QR Code. Aprovação{" "}
              <b style={{ color: "#fff" }}>imediata</b> após o pagamento.
            </p>
          )}
        </div>
      ) : c.awaitingCard ? (
        <div className="pixb" style={{ padding: "18px 16px" }}>
          <p style={{ margin: 0, lineHeight: 1.55, fontSize: ".92rem" }}>
            Processando pagamento com cartão… aguarde a confirmação. Esta página atualiza sozinha.
          </p>
        </div>
      ) : (
        <div className="pixb" style={{ padding: "14px 16px" }}>
          <div className="cf" style={{ marginBottom: 10 }}>
            <label>Nome no cartão</label>
            <input
              value={c.cardHolderName}
              onChange={(e) => c.setCardHolderName(e.target.value)}
              placeholder="Como está no cartão"
              autoComplete="cc-name"
              disabled={locked}
            />
          </div>
          <div className="cf" style={{ marginBottom: 10 }}>
            <label>Número do cartão</label>
            <input
              value={c.cardNumber}
              onChange={(e) => c.setCardNumber(e.target.value)}
              placeholder="0000 0000 0000 0000"
              inputMode="numeric"
              autoComplete="cc-number"
              disabled={locked}
            />
          </div>
          <div className="c2">
            <div className="cf">
              <label>Validade</label>
              <input
                value={c.cardExpiry}
                onChange={(e) => c.setCardExpiry(e.target.value)}
                placeholder="MM/AA"
                inputMode="numeric"
                autoComplete="cc-exp"
                disabled={locked}
              />
            </div>
            <div className="cf">
              <label>CVV</label>
              <input
                value={c.cardCvv}
                onChange={(e) => c.setCardCvv(e.target.value)}
                placeholder="123"
                inputMode="numeric"
                autoComplete="cc-csc"
                disabled={locked}
              />
            </div>
          </div>
          <div className="c2" style={{ marginTop: 10 }}>
            <div className="cf">
              <label>CEP</label>
              <input
                value={c.cardPostalCode}
                onChange={(e) => c.setCardPostalCode(e.target.value)}
                placeholder="00000-000"
                inputMode="numeric"
                autoComplete="postal-code"
                disabled={locked}
              />
            </div>
            <div className="cf">
              <label>Nº endereço</label>
              <input
                value={c.cardAddressNumber}
                onChange={(e) => c.setCardAddressNumber(e.target.value)}
                placeholder="123"
                disabled={locked}
              />
            </div>
          </div>
          <p style={{ margin: "12px 0 0", fontSize: ".82rem", opacity: 0.7, lineHeight: 1.45 }}>
            Pagamento processado com segurança. Os dados do cartão não são armazenados neste site.
          </p>
        </div>
      )}
      <button
        type="button"
        className="cpay"
        onClick={c.handlePay}
        disabled={c.loading || locked}
      >
        🔒{" "}
        {c.loading
          ? "Processando..."
          : c.pixCopy
            ? "Pix gerado — aguardando pagamento"
            : c.awaitingCard
              ? "Aguardando confirmação do cartão"
              : `Pagar ${c.totalTodayLabel}`}
      </button>
    </>
  );
}