'use client';

import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useCallback, useEffect, useState } from 'react';
import { RequireRole, useAuth } from '@/lib/auth-context';
import {
  createTreatmentPlan,
  listTreatmentPlans,
  PLAN_STATUS_BADGES,
  PLAN_STATUS_LABELS,
  TreatmentPlan,
  TreatmentPlanStatus,
} from '@/lib/services/treatments';
import { listDentists } from '@/lib/services/dentists';
import type { Dentist } from '@/lib/types';
import PatientSelect from '@/components/app/PatientSelect';
import {
  EmptyState,
  ErrorAlert,
  Loading,
  Modal,
  PageHeader,
  Pagination,
  formatDateTime,
} from '@/components/app/ui';
import { extractApiError } from '@/lib/api-client';
import { formatCents } from '@/lib/money';

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

const PAGE_SIZE = 15;

function PlansView() {
  const { user } = useAuth();
  const router = useRouter();
  const canCreate = user?.role === 'admin' || user?.role === 'dentist';
  const isAdmin = user?.role === 'admin';

  const [items, setItems] = useState<TreatmentPlan[]>([]);
  const [total, setTotal] = useState(0);
  const [totalPages, setTotalPages] = useState(1);
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState('');
  const [term, setTerm] = useState('');
  const [status, setStatus] = useState<TreatmentPlanStatus | ''>('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [open, setOpen] = useState(false);
  const [dentists, setDentists] = useState<Dentist[]>([]);
  const [patientId, setPatientId] = useState<number | ''>('');
  const [dentistId, setDentistId] = useState<number | ''>('');
  const [title, setTitle] = useState('');
  const [installments, setInstallments] = useState(1);
  const [validUntil, setValidUntil] = useState('');
  const [saving, setSaving] = useState(false);
  const [formError, setFormError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const result = await listTreatmentPlans({
        page,
        limit: PAGE_SIZE,
        search: term || undefined,
        status: status || undefined,
      });
      setItems(result.data);
      setTotal(result.total);
      setTotalPages(Math.max(result.totalPages, 1));
    } catch (err) {
      setError(extractApiError(err));
    } finally {
      setLoading(false);
    }
  }, [page, term, status]);

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

  useEffect(() => {
    if (!isAdmin) return;
    listDentists({ limit: 100 })
      .then((r) => setDentists(r.data.filter((d) => d.isActive)))
      .catch(() => setDentists([]));
  }, [isAdmin]);

  async function handleCreate(e: React.FormEvent) {
    e.preventDefault();
    if (!patientId) return setFormError('Selecione o paciente.');
    if (isAdmin && !dentistId) return setFormError('Selecione o dentista responsável.');
    if (title.trim().length < 3) return setFormError('Informe um título (mínimo 3 caracteres).');

    setSaving(true);
    setFormError(null);
    try {
      const plan = await createTreatmentPlan({
        patientId,
        dentistId: isAdmin ? Number(dentistId) : undefined,
        title: title.trim(),
        installments,
        validUntil: validUntil || undefined,
      });
      router.push(`/painel/tratamentos/${plan.id}`);
    } catch (err) {
      setFormError(extractApiError(err));
      setSaving(false);
    }
  }

  return (
    <>
      <PageHeader
        title="Tratamentos"
        subtitle={
          user?.role === 'dentist'
            ? 'Seus planos de tratamento e orçamentos'
            : 'Planos de tratamento e orçamentos da clínica'
        }
        action={
          canCreate && (
            <button type="button" className="btn btn-primary" onClick={() => setOpen(true)}>
              <i className="bi bi-plus-lg me-1" />
              Novo plano
            </button>
          )
        }
      />

      <form
        className="row g-2 mb-3"
        onSubmit={(e) => {
          e.preventDefault();
          setPage(1);
          setTerm(search.trim());
        }}
      >
        <div className="col-12 col-md-5">
          <div className="input-group">
            <span className="input-group-text">
              <i className="bi bi-search" />
            </span>
            <input
              className="form-control"
              placeholder="Buscar por paciente ou título"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              aria-label="Buscar plano"
            />
          </div>
        </div>
        <div className="col-8 col-md-3">
          <select
            className="form-select"
            aria-label="Filtrar por status"
            value={status}
            onChange={(e) => {
              setPage(1);
              setStatus(e.target.value as TreatmentPlanStatus | '');
            }}
          >
            <option value="">Todos os status</option>
            {(Object.keys(PLAN_STATUS_LABELS) as TreatmentPlanStatus[]).map((s) => (
              <option key={s} value={s}>
                {PLAN_STATUS_LABELS[s]}
              </option>
            ))}
          </select>
        </div>
        <div className="col-auto">
          <button className="btn btn-outline-primary" type="submit">
            Buscar
          </button>
        </div>
      </form>

      {error && <ErrorAlert message={error} onRetry={load} />}

      {loading ? (
        <Loading />
      ) : items.length === 0 ? (
        <EmptyState
          icon="bi-clipboard2-check"
          title="Nenhum plano encontrado"
          description={canCreate ? 'Crie um plano a partir da avaliação do paciente.' : undefined}
        />
      ) : (
        <div className="card border-0 shadow-sm">
          <div className="table-responsive">
            <table className="table table-hover align-middle mb-0">
              <thead className="table-light">
                <tr>
                  <th scope="col">Paciente</th>
                  <th scope="col">Plano</th>
                  <th scope="col">Dentista</th>
                  <th scope="col" className="text-end">Total</th>
                  <th scope="col">Status</th>
                  <th scope="col">Atualizado</th>
                  <th scope="col" className="text-end">Ações</th>
                </tr>
              </thead>
              <tbody>
                {items.map((plan) => (
                  <tr key={plan.id}>
                    <td className="fw-semibold">{plan.patient?.fullName ?? '—'}</td>
                    <td>{plan.title}</td>
                    <td>{plan.dentist?.fullName ?? '—'}</td>
                    <td className="text-end table-nowrap">{formatCents(plan.totalCents)}</td>
                    <td>
                      <span className={`badge ${PLAN_STATUS_BADGES[plan.status]}`}>
                        {PLAN_STATUS_LABELS[plan.status]}
                      </span>
                    </td>
                    <td className="text-muted table-nowrap">{formatDateTime(plan.updatedAt)}</td>
                    <td className="text-end">
                      <Link href={`/painel/tratamentos/${plan.id}`} className="btn btn-sm btn-outline-primary">
                        Abrir
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="card-body pt-0">
            <Pagination page={page} totalPages={totalPages} total={total} onChange={setPage} />
          </div>
        </div>
      )}

      <Modal
        open={open}
        title="Novo plano de tratamento"
        onClose={() => setOpen(false)}
        busy={saving}
        footer={
          <>
            <button className="btn btn-outline-secondary" onClick={() => setOpen(false)} disabled={saving}>
              Cancelar
            </button>
            <button type="submit" form="plan-form" className="btn btn-primary" disabled={saving}>
              {saving && <span className="spinner-border spinner-border-sm me-2" />}
              Criar e adicionar procedimentos
            </button>
          </>
        }
      >
        <form id="plan-form" onSubmit={handleCreate} noValidate>
          {formError && <div className="alert alert-danger py-2">{formError}</div>}
          <div className="mb-3">
            <label htmlFor="plan-patient" className="form-label">Paciente *</label>
            <PatientSelect id="plan-patient" value={patientId} onChange={setPatientId} />
          </div>
          {isAdmin && (
            <div className="mb-3">
              <label htmlFor="plan-dentist" className="form-label">Dentista responsável *</label>
              <select
                id="plan-dentist"
                className="form-select"
                value={dentistId}
                onChange={(e) => setDentistId(e.target.value ? Number(e.target.value) : '')}
              >
                <option value="">Selecione</option>
                {dentists.map((d) => (
                  <option key={d.id} value={d.id}>
                    {d.fullName}
                  </option>
                ))}
              </select>
            </div>
          )}
          <div className="mb-3">
            <label htmlFor="plan-title" className="form-label">Título *</label>
            <input
              id="plan-title"
              className="form-control"
              placeholder="Ex.: Reabilitação superior"
              maxLength={150}
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            />
          </div>
          <div className="row g-3">
            <div className="col-6">
              <label htmlFor="plan-installments" className="form-label">Parcelas</label>
              <select
                id="plan-installments"
                className="form-select"
                value={installments}
                onChange={(e) => setInstallments(Number(e.target.value))}
              >
                {Array.from({ length: 12 }, (_, i) => i + 1).map((n) => (
                  <option key={n} value={n}>
                    {n === 1 ? 'À vista' : `${n}x`}
                  </option>
                ))}
              </select>
            </div>
            <div className="col-6">
              <label htmlFor="plan-valid" className="form-label">Validade do orçamento</label>
              <input
                id="plan-valid"
                type="date"
                className="form-control"
                value={validUntil}
                onChange={(e) => setValidUntil(e.target.value)}
              />
            </div>
          </div>
        </form>
      </Modal>
    </>
  );
}