'use client';

import Link from 'next/link';
import { useCallback, useEffect, useState } from 'react';
import { RequireRole } from '@/lib/auth-context';
import {
  listMyTreatmentPlans,
  PLAN_STATUS_BADGES,
  PLAN_STATUS_LABELS,
  TreatmentPlan,
} from '@/lib/services/treatments';
import { EmptyState, ErrorAlert, Loading, PageHeader, formatDate } from '@/components/app/ui';
import { extractApiError } from '@/lib/api-client';
import { formatCents } from '@/lib/money';

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

function MyPlans() {
  const [plans, setPlans] = useState<TreatmentPlan[] | null>(null);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setError(null);
    try {
      setPlans(await listMyTreatmentPlans());
    } catch (err) {
      setError(extractApiError(err));
    }
  }, []);

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

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

  const waiting = plans.filter((p) => p.status === 'proposed');

  return (
    <>
      <PageHeader title="Orçamentos e tratamentos" subtitle="Revise e aprove os orçamentos da clínica" />

      {waiting.length > 0 && (
        <div className="alert alert-warning d-flex align-items-center" role="status">
          <i className="bi bi-hourglass-split me-2" aria-hidden="true" />
          Você tem {waiting.length} orçamento{waiting.length > 1 ? 's' : ''} aguardando aprovação.
        </div>
      )}

      {plans.length === 0 ? (
        <EmptyState
          icon="bi-clipboard2-check"
          title="Nenhum orçamento ainda"
          description="Quando o dentista enviar um orçamento, ele aparece aqui."
        />
      ) : (
        <div className="row g-3">
          {plans.map((plan) => {
            const done = plan.items.filter((i) => i.status === 'done').length;
            const total = plan.items.filter((i) => i.status !== 'cancelled').length;
            return (
              <div className="col-12 col-md-6" key={plan.id}>
                <div className="card border-0 shadow-sm h-100">
                  <div className="card-body d-flex flex-column">
                    <div className="d-flex justify-content-between align-items-start gap-2 mb-2">
                      <h2 className="h6 fw-bold mb-0">{plan.title}</h2>
                      <span className={`badge ${PLAN_STATUS_BADGES[plan.status]}`}>
                        {PLAN_STATUS_LABELS[plan.status]}
                      </span>
                    </div>
                    <p className="small text-muted mb-2">
                      {plan.dentist?.fullName} · enviado em {formatDate(plan.proposedAt)}
                    </p>
                    <div className="fs-4 fw-bold mb-1">{formatCents(plan.totalCents)}</div>
                    <small className="text-muted mb-3">
                      {plan.installments === 1 ? 'À vista' : `Em ${plan.installments}x`} · {total} procedimento(s)
                      {(plan.status === 'in_progress' || plan.status === 'completed') && ` · ${done} realizado(s)`}
                    </small>
                    <Link
                      href={`/portal/tratamentos/${plan.id}`}
                      className={`btn mt-auto ${plan.status === 'proposed' ? 'btn-primary' : 'btn-outline-primary'}`}
                    >
                      {plan.status === 'proposed' ? 'Revisar e aprovar' : 'Ver detalhes'}
                    </Link>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </>
  );
}