'use client';

import { useCallback, useEffect, useState } from 'react';
import Swal from 'sweetalert2';
import { RequireRole, useAuth } from '@/lib/auth-context';
import {
  createSpecialty,
  listSpecialties,
  removeSpecialty,
  updateSpecialty,
} from '@/lib/services/specialties';
import type { Specialty } from '@/lib/types';
import {
  EmptyState,
  ErrorAlert,
  Loading,
  PageHeader,
  formatDateTime,
} from '@/components/app/ui';
import { extractApiError } from '@/lib/api-client';

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

function SpecialtiesView() {
  const { user } = useAuth();
  const isAdmin = user?.role === 'admin';

  const [items, setItems] = useState<Specialty[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const result = await listSpecialties();
      setItems(result.data);
    } catch (err) {
      setError(extractApiError(err));
    } finally {
      setLoading(false);
    }
  }, []);

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

  async function handleForm(specialty?: Specialty) {
    const { value } = await Swal.fire({
      title: specialty ? 'Editar especialidade' : 'Nova especialidade',
      html:
        `<input id="swal-name" class="swal2-input" placeholder="Nome" value="${specialty?.name ?? ''}">` +
        `<textarea id="swal-desc" class="swal2-textarea" placeholder="Descrição (opcional)">${specialty?.description ?? ''}</textarea>`,
      focusConfirm: false,
      showCancelButton: true,
      confirmButtonText: 'Salvar',
      cancelButtonText: 'Cancelar',
      preConfirm: () => {
        const name = (
          document.getElementById('swal-name') as HTMLInputElement
        )?.value?.trim();
        const description = (
          document.getElementById('swal-desc') as HTMLTextAreaElement
        )?.value?.trim();
        if (!name) {
          Swal.showValidationMessage('Informe o nome da especialidade');
          return false;
        }
        return { name, description: description || null };
      },
    });

    if (!value) return;

    try {
      if (specialty) {
        await updateSpecialty(specialty.id, value);
      } else {
        await createSpecialty(value);
      }
      await Swal.fire({
        icon: 'success',
        title: 'Salvo!',
        timer: 1200,
        showConfirmButton: false,
      });
      load();
    } catch (err) {
      Swal.fire({ icon: 'error', title: 'Erro', text: extractApiError(err) });
    }
  }

  async function handleRemove(specialty: Specialty) {
    const confirm = await Swal.fire({
      icon: 'warning',
      title: 'Remover especialidade?',
      text: specialty.name,
      showCancelButton: true,
      confirmButtonText: 'Remover',
      cancelButtonText: 'Cancelar',
      confirmButtonColor: '#dc3545',
    });
    if (!confirm.isConfirmed) return;

    try {
      await removeSpecialty(specialty.id);
      await Swal.fire({
        icon: 'success',
        title: 'Removida',
        timer: 1000,
        showConfirmButton: false,
      });
      load();
    } catch (err) {
      Swal.fire({ icon: 'error', title: 'Erro', text: extractApiError(err) });
    }
  }

  return (
    <>
      <PageHeader
        title="Especialidades"
        subtitle="Áreas de atuação da clínica"
        action={
          isAdmin && (
            <button
              type="button"
              className="btn btn-primary"
              onClick={() => handleForm()}
            >
              <i className="bi bi-plus-lg me-1" />
              Nova especialidade
            </button>
          )
        }
      />

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

      {loading ? (
        <Loading />
      ) : items.length === 0 ? (
        <EmptyState
          icon="bi-clipboard2-pulse"
          title="Nenhuma especialidade cadastrada"
          description={
            isAdmin
              ? 'Cadastre a primeira especialidade da clínica.'
              : 'Nenhuma especialidade disponível.'
          }
          action={
            isAdmin && (
              <button
                className="btn btn-primary"
                onClick={() => handleForm()}
              >
                Nova especialidade
              </button>
            )
          }
        />
      ) : (
        <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">Nome</th>
                  <th scope="col">Slug</th>
                  <th scope="col">Descrição</th>
                  <th scope="col">Status</th>
                  <th scope="col">Atualizada</th>
                  {isAdmin && <th scope="col" className="text-end">Ações</th>}
                </tr>
              </thead>
              <tbody>
                {items.map((item) => (
                  <tr key={item.id}>
                    <td className="fw-semibold">{item.name}</td>
                    <td>
                      <code className="text-muted">{item.slug}</code>
                    </td>
                    <td className="text-muted text-truncate" style={{ maxWidth: 280 }}>
                      {item.description || '—'}
                    </td>
                    <td>
                      {item.isActive ? (
                        <span className="badge text-bg-success">Ativa</span>
                      ) : (
                        <span className="badge text-bg-secondary">Inativa</span>
                      )}
                    </td>
                    <td className="text-muted">{formatDateTime(item.updatedAt)}</td>
                    {isAdmin && (
                      <td className="text-end table-nowrap">
                        <button
                          className="btn btn-sm btn-outline-secondary me-1"
                          onClick={() => handleForm(item)}
                          aria-label={`Editar ${item.name}`}
                        >
                          <i className="bi bi-pencil" />
                        </button>
                        <button
                          className="btn btn-sm btn-outline-danger"
                          onClick={() => handleRemove(item)}
                          aria-label={`Remover ${item.name}`}
                        >
                          <i className="bi bi-trash" />
                        </button>
                      </td>
                    )}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </>
  );
}