'use client';

import { useCallback, useEffect, useState } from 'react';
import Swal from 'sweetalert2';
import {
  addContact,
  listContacts,
  removeContact,
  updateContact,
} from '@/lib/services/patients';
import {
  CONTACT_TYPE_LABELS,
  ContactType,
  PatientContact,
} from '@/lib/types';
import { EmptyState, Loading } from '@/components/app/ui';
import { extractApiError } from '@/lib/api-client';

export default function ContactsTab({
  patientId,
  canManage,
}: {
  patientId: number;
  canManage: boolean;
}) {
  const [items, setItems] = useState<PatientContact[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

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

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

  async function handleForm(contact?: PatientContact) {
    const typeOptions = (
      Object.keys(CONTACT_TYPE_LABELS) as ContactType[]
    )
      .map(
        (t) =>
          `<option value="${t}" ${contact?.type === t ? 'selected' : ''}>${CONTACT_TYPE_LABELS[t]}</option>`,
      )
      .join('');

    const { value } = await Swal.fire({
      title: contact ? 'Editar contato' : 'Novo contato',
      html: `
        <div class="text-start">
          <label class="form-label">Tipo</label>
          <select id="sw-type" class="form-select mb-2">${typeOptions}</select>
          <label class="form-label">Valor</label>
          <input id="sw-value" class="form-control mb-2" value="${contact?.value ?? ''}" placeholder="Número, e-mail…">
          <label class="form-label">Rótulo (opcional)</label>
          <input id="sw-label" class="form-control mb-2" value="${contact?.label ?? ''}" placeholder="Ex.: pessoal">
          <div class="form-check">
            <input id="sw-primary" type="checkbox" class="form-check-input" ${contact?.isPrimary ? 'checked' : ''}>
            <label class="form-check-label" for="sw-primary">Contato principal</label>
          </div>
        </div>`,
      focusConfirm: false,
      showCancelButton: true,
      confirmButtonText: 'Salvar',
      cancelButtonText: 'Cancelar',
      preConfirm: () => {
        const type = (document.getElementById('sw-type') as HTMLSelectElement)
          .value as ContactType;
        const value = (
          document.getElementById('sw-value') as HTMLInputElement
        ).value.trim();
        const label = (
          document.getElementById('sw-label') as HTMLInputElement
        ).value.trim();
        const isPrimary = (
          document.getElementById('sw-primary') as HTMLInputElement
        ).checked;
        if (!value) {
          Swal.showValidationMessage('Informe o valor do contato');
          return false;
        }
        return { type, value, label: label || null, isPrimary };
      },
    });

    if (!value) return;
    try {
      if (contact) {
        await updateContact(patientId, contact.id, value);
      } else {
        await addContact(patientId, value);
      }
      load();
    } catch (err) {
      Swal.fire({ icon: 'error', title: 'Erro', text: extractApiError(err) });
    }
  }

  async function handleRemove(contact: PatientContact) {
    const confirm = await Swal.fire({
      icon: 'warning',
      title: 'Remover contato?',
      showCancelButton: true,
      confirmButtonText: 'Remover',
      cancelButtonText: 'Cancelar',
      confirmButtonColor: '#dc3545',
    });
    if (!confirm.isConfirmed) return;
    try {
      await removeContact(patientId, contact.id);
      load();
    } catch (err) {
      Swal.fire({ icon: 'error', title: 'Erro', text: extractApiError(err) });
    }
  }

  if (loading) return <Loading label="Carregando contatos…" />;
  if (error) return <div className="alert alert-danger">{error}</div>;

  return (
    <div className="card border-0 shadow-sm">
      <div className="card-header bg-white d-flex justify-content-between align-items-center">
        <span className="fw-semibold">
          <i className="bi bi-telephone me-2 text-primary" />
          Contatos
        </span>
        {canManage && (
          <button className="btn btn-sm btn-primary" onClick={() => handleForm()}>
            <i className="bi bi-plus-lg me-1" />
            Novo contato
          </button>
        )}
      </div>
      {items.length === 0 ? (
        <EmptyState icon="bi-telephone" title="Nenhum contato cadastrado" />
      ) : (
        <ul className="list-group list-group-flush">
          {items.map((contact) => (
            <li
              key={contact.id}
              className="list-group-item d-flex align-items-center"
            >
              <i className="bi bi-dot fs-3 text-secondary" />
              <div className="flex-grow-1">
                <div className="fw-semibold">
                  {CONTACT_TYPE_LABELS[contact.type]}: {contact.value}
                  {contact.isPrimary && (
                    <span className="badge text-bg-primary ms-2">
                      principal
                    </span>
                  )}
                </div>
                {contact.label && (
                  <small className="text-muted">{contact.label}</small>
                )}
              </div>
              {canManage && (
                <div className="table-nowrap">
                  <button
                    className="btn btn-sm btn-outline-secondary me-1"
                    onClick={() => handleForm(contact)}
                    aria-label="Editar contato"
                  >
                    <i className="bi bi-pencil" />
                  </button>
                  <button
                    className="btn btn-sm btn-outline-danger"
                    onClick={() => handleRemove(contact)}
                    aria-label="Remover contato"
                  >
                    <i className="bi bi-trash" />
                  </button>
                </div>
              )}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}