'use client';

import { RequireRole } from '@/lib/auth-context';
import { useMyPatient } from '@/lib/use-my-patient';
import {
  EmptyState,
  ErrorAlert,
  Loading,
  PageHeader,
  formatCpf,
  formatDate,
} from '@/components/app/ui';
import { GENDER_LABELS, type Gender } from '@/lib/types';

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

function MeusDados() {
  const { patient, loading, error, reload } = useMyPatient();

  if (loading) return <Loading />;
  if (error) return <ErrorAlert message={error} onRetry={reload} />;
  if (!patient)
    return (
      <EmptyState
        icon="bi-person-x"
        title="Cadastro não encontrado"
        description="Sua conta ainda não está vinculada a um cadastro de paciente."
      />
    );

  const address = [
    patient.street,
    patient.number,
    patient.complement,
    patient.district,
    patient.city,
    patient.state,
    patient.zipCode,
  ]
    .filter(Boolean)
    .join(', ');

  return (
    <>
      <PageHeader title="Meus dados" subtitle="Cadastro do paciente" />

      <div className="card border-0 shadow-sm">
        <div className="card-body">
          <dl className="row mb-0">
            <dt className="col-sm-4 text-muted fw-normal">Nome completo</dt>
            <dd className="col-sm-8">{patient.fullName}</dd>

            <dt className="col-sm-4 text-muted fw-normal">CPF</dt>
            <dd className="col-sm-8">{formatCpf(patient.cpf)}</dd>

            <dt className="col-sm-4 text-muted fw-normal">Nascimento</dt>
            <dd className="col-sm-8">{formatDate(patient.birthDate)}</dd>

            <dt className="col-sm-4 text-muted fw-normal">Gênero</dt>
            <dd className="col-sm-8">
              {patient.gender
                ? GENDER_LABELS[patient.gender as Gender]
                : '—'}
            </dd>

            <dt className="col-sm-4 text-muted fw-normal">E-mail</dt>
            <dd className="col-sm-8">{patient.email || '—'}</dd>

            <dt className="col-sm-4 text-muted fw-normal">Telefone</dt>
            <dd className="col-sm-8">{patient.phone || '—'}</dd>

            <dt className="col-sm-4 text-muted fw-normal">Endereço</dt>
            <dd className="col-sm-8">{address || '—'}</dd>
          </dl>
        </div>
        <div className="card-footer bg-white">
          <small className="text-muted">
            <i className="bi bi-info-circle me-1" />
            Para corrigir seus dados, entre em contato com a recepção.
          </small>
        </div>
      </div>
    </>
  );
}