// wh-contactos-section.jsx - extracted ContactosSection

(() => {

const { useState } = React;
const { Icon, Avatar, Badge, EmptyState, SecHead, FormField, apiFetch } = window;

const toast = (msg, type, dur) => window.showToast?.(msg, type, dur);
const confirm = async (msg, opts) => window.showConfirm?.(msg, opts) ?? false;

function ContactosSection({ contacts = [], onContactsChange }) {
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [busy, setBusy] = useState(false);

  const add = async () => {
    if (!name.trim() || !phone.trim()) return;
    setBusy(true);
    try {
      const res = await apiFetch('/api/contacts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: name.trim(), phone: phone.trim() })
      });
      if (!res.ok) {
        const err = await res.json();
        toast(err.error, 'error');
        return;
      }
      const contact = await res.json();
      onContactsChange([...contacts, contact]);
      setName('');
      setPhone('');
      toast(`Contacto "${contact.name}" agregado.`, 'success');
    } catch (e) {
      toast(`Error al agregar contacto: ${e.message}`, 'error');
    } finally {
      setBusy(false);
    }
  };

  const del = async (contact) => {
    const ok = await confirm(`¿Eliminar a ${contact.name}?`);
    if (!ok) return;
    try {
      await apiFetch(`/api/contacts/${contact.id}`, { method: 'DELETE' });
      onContactsChange(contacts.filter((item) => item.id !== contact.id));
      toast('Contacto eliminado.', 'info');
    } catch (e) {
      toast(`Error al eliminar contacto: ${e.message}`, 'error');
    }
  };

  const fmtDate = (iso) => {
    if (!iso) return '—';
    return new Date(iso).toLocaleDateString('es', { day: '2-digit', month: 'short', year: 'numeric' });
  };

  return (
    <div>
      <SecHead eyebrow="Directorio" title="Contactos" actions={<Badge color="brand">{contacts.length} contactos</Badge>} />

      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head"><div className="card-title">Agregar contacto</div></div>
        <div className="card-body">
          <div className="form-row-3">
            <FormField label="Nombre">
              <input className="inp" placeholder="Nombre completo" value={name} onChange={(e) => setName(e.target.value)} />
            </FormField>
            <FormField label="Teléfono con código de país">
              <input className="inp" placeholder="+502 5643 5946" value={phone} onChange={(e) => setPhone(e.target.value)} />
            </FormField>
            <button className="btn btn-primary" onClick={add} disabled={!name.trim() || !phone.trim() || busy}>
              <Icon name="plus" size={14} /> {busy ? 'Agregando…' : 'Agregar'}
            </button>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="tbl-wrap">
          <table>
            <thead><tr><th>Contacto</th><th>Teléfono</th><th>Agregado</th><th></th></tr></thead>
            <tbody>
              {contacts.length === 0
                ? <tr><td colSpan={4}><EmptyState icon="users" title="Sin contactos" sub="Agrega el primer contacto" /></td></tr>
                : contacts.map((contact) => (
                  <tr key={contact.id}>
                    <td>
                      <div className="flex-r">
                        <Avatar name={contact.name} size="sm" />
                        <div><div style={{ fontWeight: 600 }}>{contact.name}</div></div>
                      </div>
                    </td>
                    <td className="t-muted">{contact.phone}</td>
                    <td className="t-muted t-sm">{fmtDate(contact.createdAt || contact.added)}</td>
                    <td>
                      <button className="btn btn-danger btn-icon btn-sm" onClick={() => del(contact)}>
                        <Icon name="trash" size={12} />
                      </button>
                    </td>
                  </tr>
                ))}
            </tbody>
          </table>
        </div>
        <div className="contactos-mobile-list">
          {contacts.length === 0
            ? <EmptyState icon="users" title="Sin contactos" sub="Agrega el primer contacto" />
            : contacts.map((contact) => (
              <div key={contact.id} className="contactos-mobile-card">
                <div className="contactos-mobile-top">
                  <Avatar name={contact.name} size="sm" />
                  <div className="contactos-mobile-main">
                    <div className="contactos-mobile-name">{contact.name}</div>
                    <div className="contactos-mobile-phone">{contact.phone}</div>
                  </div>
                  <button className="btn btn-danger btn-icon btn-sm" onClick={() => del(contact)} aria-label={`Eliminar ${contact.name}`}>
                    <Icon name="trash" size={12} />
                  </button>
                </div>
                <div className="contactos-mobile-foot">
                  <span className="contactos-mobile-label">Agregado</span>
                  <span className="contactos-mobile-date">{fmtDate(contact.createdAt || contact.added)}</span>
                </div>
              </div>
            ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ContactosSection });

})();