'use client';

import { useParams } from 'next/navigation';
import { useCallback, useEffect, useState } from 'react';
import Swal from 'sweetalert2';
import { RequireRole } from '@/lib/auth-context';
import { getTreatmentPlan, planAction, TreatmentPlan } from '@/lib/services/treatments';
import BudgetDocument from '@/components/app/BudgetDocument';
import { BackLink, ErrorAlert, Loading, formatDate } from '@/components/app/ui';
import { extractApiError } from '@/lib/api-client';
import { formatCents } from '@/lib/money';

export default function PortalPlanoPage() {
  return (
    <RequireRole roles={['patient']}>
      <MyPlan />
    </RequireRole>
  );
}

function MyPlan() {
  const { id } = useParams<{ id: string }>();
  const [plan, setPlan] = useState<TreatmentPlan | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [agree, setAgree] = useState(false);
  const [busy, setBusy] = useState(false);

  const load = useCallback(async () => {
    try {
      setPlan(await getTreatmentPlan(Number(id)));
    } catch (err) {
      setError(extractApiError(err));
    }
  }, [id]);

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

  async function decide(action: 'approve' | 'reject') {
    if (!plan) return;
    if (action === 'reject') {
      const result = await Swal.fire<string>({
        icon: 'question',
        title: 'Recusar este orçamento?',
        input: 'text',
        inputLabel: 'Quer contar o motivo? (opcional)',
        showCancelButton: true,
        confirmButtonText: 'Recusar',
        cancelButtonText: 'Voltar',
      });
      if (!result.isConfirmed) return;
      await submit(action, result.value || undefined);
      return;
    }
    await submit(action);
  }

  async function submit(action: 'approve' | 'reject', reason?: string) {
    setBusy(true);
    try {
      setPlan(await planAction(Number(id), action, reason));
      Swal.fire({
        icon: 'success',
        title: action === 'approve' ? 'Orçamento aprovado!' : 'Resposta registrada',
        text:
          action === 'approve'
            ? 'As parcelas já estão disponíveis em Financeiro. A clínica vai agendar os procedimentos com você.'
            : 'A clínica foi avisada. Se quiser, peça um novo orçamento.',
      });
    } catch (err) {
      Swal.fire({ icon: 'error', title: 'Erro', text: extractApiError(err) });
    } finally {
      setBusy(false);
    }
  }

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

  const expired = plan.validUntil ? plan.validUntil < new Date().toISOString().slice(0, 10) : false;

  return (
    <>
      <div className="d-flex justify-content-between align-items-center no-print mb-3">
        <BackLink href="/portal/tratamentos" label="Orçamentos" />
        <button className="btn btn-outline-secondary" onClick={() => window.print()}>
          <i className="bi bi-printer me-1" />
          Imprimir
        </button>
      </div>

      {plan.status === 'proposed' && (
        <div className="card border-0 shadow-sm border-start border-4 border-warning mb-4 no-print">
          <div className="card-body">
            <h2 className="h5 fw-bold">Este orçamento aguarda sua aprovação</h2>
            {expired ? (
              <p className="text-danger mb-0">
                A validade terminou em {formatDate(`${plan.validUntil}T12:00:00`)}. Peça à clínica uma nova versão.
              </p>
            ) : (
              <>
                <p className="mb-3">
                  Total de <strong>{formatCents(plan.totalCents)}</strong>
                  {plan.installments > 1 ? ` em ${plan.installments} parcelas mensais` : ' à vista'}.
                  Ao aprovar, as parcelas são geradas e você pode pagar pelo portal.
                </p>
                <div className="form-check mb-3">
                  <input
                    id="agree"
                    type="checkbox"
                    className="form-check-input"
                    checked={agree}
                    onChange={(e) => setAgree(e.target.checked)}
                  />
                  <label htmlFor="agree" className="form-check-label">
                    Li o orçamento e concordo com os procedimentos, valores e condições de pagamento.
                  </label>
                </div>
                <div className="d-flex flex-wrap gap-2">
                  <button className="btn btn-success" disabled={!agree || busy} onClick={() => decide('approve')}>
                    {busy ? <span className="spinner-border spinner-border-sm me-2" /> : <i className="bi bi-check2-circle me-1" />}
                    Aprovar orçamento
                  </button>
                  <button className="btn btn-outline-secondary" disabled={busy} onClick={() => decide('reject')}>
                    Recusar
                  </button>
                </div>
              </>
            )}
          </div>
        </div>
      )}

      <BudgetDocument plan={plan} />
    </>
  );
}