'use client';

import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useCallback, useEffect, useState } from 'react';
import { RequireRole } from '@/lib/auth-context';
import {
  completeSandboxCheckout,
  getSandboxCheckout,
  PAYMENT_METHOD_LABELS,
  PAYMENT_STATUS_LABELS,
} from '@/lib/services/finance';
import { ErrorAlert, Loading } from '@/components/app/ui';
import { extractApiError } from '@/lib/api-client';
import { formatCents } from '@/lib/money';

type Checkout = Awaited<ReturnType<typeof getSandboxCheckout>>;

/**
 * Checkout do provedor SIMULADO. Num provedor real, esta tela seria a página
 * de pagamento do próprio provedor (onde o cartão é digitado) — os dados de
 * pagamento nunca passam pela DentalFlow.
 */
export default function SandboxCheckoutPage() {
  return (
    <RequireRole roles={['patient', 'admin', 'receptionist']}>
      <CheckoutView />
    </RequireRole>
  );
}

function CheckoutView() {
  const { reference } = useParams<{ reference: string }>();
  const [checkout, setCheckout] = useState<Checkout | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  const load = useCallback(async () => {
    try {
      setCheckout(await getSandboxCheckout(reference));
    } catch (err) {
      setError(extractApiError(err));
    }
  }, [reference]);

  useEffect(() => {
    load();
  }, [load]);

  async function finish(outcome: 'confirmed' | 'failed') {
    setBusy(true);
    try {
      await completeSandboxCheckout(reference, outcome);
      await load();
    } catch (err) {
      setError(extractApiError(err));
    } finally {
      setBusy(false);
    }
  }

  if (error) return <ErrorAlert message={error} />;
  if (!checkout) return <Loading />;

  return (
    <div className="mx-auto" style={{ maxWidth: 480 }}>
      <div className="alert alert-warning small" role="note">
        <i className="bi bi-cone-striped me-1" aria-hidden="true" />
        <strong>Ambiente de testes.</strong> Este checkout é simulado: nenhum valor é cobrado de verdade.
      </div>

      <div className="card border-0 shadow-sm">
        <div className="card-body p-4 text-center">
          <div className="small text-muted mb-1">{checkout.description}</div>
          <div className="display-6 fw-bold mb-1">{formatCents(checkout.amountCents)}</div>
          <div className="mb-4">
            <span className="badge text-bg-light border">{PAYMENT_METHOD_LABELS[checkout.method]}</span>
          </div>

          {checkout.status === 'pending' ? (
            <>
              {checkout.method === 'pix' && (
                <div className="border rounded p-3 mb-3 bg-light">
                  <i className="bi bi-qr-code display-1" aria-hidden="true" />
                  <div className="small text-muted text-break">PIX copia e cola (simulado): {checkout.reference}</div>
                </div>
              )}
              <div className="d-grid gap-2">
                <button className="btn btn-success btn-lg" disabled={busy} onClick={() => finish('confirmed')}>
                  {busy && <span className="spinner-border spinner-border-sm me-2" />}
                  Simular pagamento aprovado
                </button>
                <button className="btn btn-outline-danger" disabled={busy} onClick={() => finish('failed')}>
                  Simular pagamento recusado
                </button>
              </div>
            </>
          ) : (
            <div role="status">
              <i
                className={`bi ${checkout.status === 'confirmed' ? 'bi-check-circle-fill text-success' : 'bi-x-circle-fill text-danger'} display-4`}
                aria-hidden="true"
              />
              <p className="fs-5 fw-semibold mt-2">{PAYMENT_STATUS_LABELS[checkout.status]}</p>
              <p className="text-muted">
                {checkout.status === 'confirmed'
                  ? 'Pagamento recebido. O recibo já está disponível.'
                  : 'O pagamento não foi concluído. Você pode tentar novamente.'}
              </p>
              <Link href="/portal/financeiro" className="btn btn-primary">
                Voltar ao financeiro
              </Link>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}