'use client';

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

export default function OrcamentoPage() {
  return (
    <RequireRole roles={['admin', 'receptionist', 'dentist']}>
      <BudgetView />
    </RequireRole>
  );
}

function BudgetView() {
  const { id } = useParams<{ id: string }>();
  const [plan, setPlan] = useState<TreatmentPlan | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    getTreatmentPlan(Number(id))
      .then(setPlan)
      .catch((err) => setError(extractApiError(err)));
  }, [id]);

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

  return (
    <>
      <div className="d-flex justify-content-between align-items-center no-print mb-3">
        <BackLink href={`/painel/tratamentos/${plan.id}`} label="Voltar ao plano" />
        <button className="btn btn-primary" onClick={() => window.print()}>
          <i className="bi bi-printer me-1" />
          Imprimir / salvar PDF
        </button>
      </div>
      <BudgetDocument plan={plan} />
    </>
  );
}