import { useEffect, useRef, useState } from 'react';
import { api } from '../api.js';
import { memberInitials, memberDisplayName } from '../utils/format.js';
import { useInvestisseur } from '../context/InvestisseurContext.jsx';
import Modal from '../components/Modal.jsx';
import ConfirmModal from '../components/ConfirmModal.jsx';

/* ── Avatar ─────────────────────────────────────────────────── */
function MemberAvatar({ membre, size = 40 }) {
  const initials = memberInitials(membre);
  const bg = membre.type === 'entreprise'
    ? 'linear-gradient(135deg, #4f46e5 0%, #3730a3 100%)'
    : 'linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%)';
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: bg,
      color: 'white',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontWeight: 700, fontSize: Math.round(size * 0.35),
      flexShrink: 0, letterSpacing: '.03em', userSelect: 'none',
    }}>
      {initials}
    </div>
  );
}

/* ── Menu "···" par membre ──────────────────────────────────── */
function MemberMenu({ onEdit, onDelete, isPrincipal, isOnly }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    if (!open) return;
    const h = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, [open]);

  return (
    <div ref={ref} style={{ position: 'relative', flexShrink: 0 }}>
      <button className="member-dots-btn" onClick={() => setOpen(o => !o)}
        aria-label="Actions" aria-haspopup="menu">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>
        </svg>
      </button>
      {open && (
        <div className="member-dots-menu" role="menu">
          <button className="member-dots-menu-item" role="menuitem" onClick={() => { setOpen(false); onEdit(); }}>
            Modifier
          </button>
          {!isPrincipal && (
            <button className="member-dots-menu-item danger-item" role="menuitem"
              disabled={isOnly}
              title={isOnly ? 'Impossible de supprimer le dernier profil' : ''}
              onClick={() => { setOpen(false); onDelete(); }}>
              Supprimer
            </button>
          )}
        </div>
      )}
    </div>
  );
}

/* ── Ligne "Ajouter" ─────────────────────────────────────────── */
function AddRow({ label, onClick }) {
  return (
    <div className="member-add-row" onClick={onClick} role="button" tabIndex={0}
      onKeyDown={e => e.key === 'Enter' && onClick()}>
      <div className="member-add-circle">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
        </svg>
      </div>
      <span>{label}</span>
    </div>
  );
}

/* ── Composant principal ─────────────────────────────────────── */
export default function FamilleEntreprises() {
  const { reload: reloadCtx } = useInvestisseur();
  const [membres, setMembres] = useState([]);
  const [tab, setTab]         = useState('famille');
  const [err, setErr]         = useState(null);

  /* Modals */
  const [modalFamille,    setModalFamille]    = useState(false);
  const [modalEntreprise, setModalEntreprise] = useState(false);
  const [editTarget,      setEditTarget]      = useState(null); // membre à éditer

  /* Formulaires */
  const emptyFam = { prenom: '', nom_famille: '' };
  const emptyEnt = { nom: '', type_fiscal: 'PM' };
  const [famForm, setFamForm] = useState(emptyFam);
  const [entForm, setEntForm] = useState(emptyEnt);
  const [saving, setSaving]   = useState(false);
  const [deleteConfirm, setDeleteConfirm] = useState(null);

  const load = async () => {
    const list = await api.get('/investisseurs');
    setMembres(list);
  };

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

  const famille    = membres.filter(m => m.type === 'famille');
  const entreprises = membres.filter(m => m.type === 'entreprise');
  const totalCount = membres.length;

  /* ── Ouvrir modal édition ─────────────────────────────────── */
  const openEdit = (m) => {
    setEditTarget(m);
    if (m.type === 'famille') {
      const restNom = m.prenom ? m.nom.replace(m.prenom, '').trim() : m.nom;
      setFamForm({ prenom: m.prenom || '', nom_famille: restNom });
      setModalFamille(true);
    } else {
      setEntForm({ nom: m.nom, type_fiscal: m.type_fiscal || 'PM' });
      setModalEntreprise(true);
    }
  };

  const closeModals = () => {
    setModalFamille(false); setModalEntreprise(false);
    setEditTarget(null);
    setFamForm(emptyFam); setEntForm(emptyEnt);
    setErr(null);
  };

  /* ── Sauvegarde famille ────────────────────────────────────── */
  const saveFamille = async (e) => {
    e.preventDefault(); setErr(null); setSaving(true);
    try {
      const fullName = [famForm.prenom.trim(), famForm.nom_famille.trim()].filter(Boolean).join(' ');
      if (!fullName) throw new Error('Veuillez renseigner au moins un prénom ou un nom.');
      const payload = {
        nom: fullName,
        prenom: famForm.prenom.trim() || null,
        type: 'famille',
        type_fiscal: 'PP',
      };
      if (editTarget) {
        await api.put(`/investisseurs/${editTarget.id}`, payload);
      } else {
        await api.post('/investisseurs', payload);
      }
      await load(); await reloadCtx();
      closeModals();
    } catch (e) { setErr(e.message); }
    finally { setSaving(false); }
  };

  /* ── Sauvegarde entreprise ─────────────────────────────────── */
  const saveEntreprise = async (e) => {
    e.preventDefault(); setErr(null); setSaving(true);
    try {
      const payload = {
        nom: entForm.nom.trim(),
        prenom: null,
        type: 'entreprise',
        type_fiscal: entForm.type_fiscal,
      };
      if (editTarget) {
        await api.put(`/investisseurs/${editTarget.id}`, payload);
      } else {
        await api.post('/investisseurs', payload);
      }
      await load(); await reloadCtx();
      closeModals();
    } catch (e) { setErr(e.message); }
    finally { setSaving(false); }
  };

  /* ── Suppression ──────────────────────────────────────────── */
  const deleteMembre = (m) => {
    setDeleteConfirm({
      message: `Supprimer "${memberDisplayName(m)}" ? Tous les investissements associés seront effacés.`,
      onConfirm: async () => {
        try {
          await api.del(`/investisseurs/${m.id}`);
          await load(); await reloadCtx();
        } catch (e) { setErr(e.message); }
        finally { setDeleteConfirm(null); }
      },
    });
  };

  /* ── Render ───────────────────────────────────────────────── */
  const currentList = tab === 'famille' ? famille : entreprises;

  return (
    <div className="famille-wrap">
      {/* Tabs */}
      <div className="famille-tabs">
        <button
          className={`famille-tab${tab === 'famille' ? ' active' : ''}`}
          onClick={() => setTab('famille')}
        >
          Famille
          <span className="famille-tab-count">{famille.length}</span>
        </button>
        <button
          className={`famille-tab${tab === 'entreprise' ? ' active' : ''}`}
          onClick={() => setTab('entreprise')}
        >
          Entreprises
          <span className="famille-tab-count">{entreprises.length}</span>
        </button>
      </div>

      {err && <div className="error" style={{ marginBottom: 12 }}>{err}</div>}

      {/* Liste */}
      <div className="membre-list">
        {currentList.map(m => (
          <div key={m.id} className="membre-row">
            <MemberAvatar membre={m} size={42} />
            <div className="membre-info">
              <span className="membre-name">{memberDisplayName(m)}</span>
              {m.type === 'famille' && (
                <span className="membre-role">
                  {m.is_principal ? '(compte principal)' : '(Membre de la famille)'}
                </span>
              )}
            </div>
            {m.type_fiscal && m.type === 'entreprise' && (
              <span className="membre-badge">{m.type_fiscal}</span>
            )}
            <MemberMenu
              onEdit={() => openEdit(m)}
              onDelete={() => deleteMembre(m)}
              isPrincipal={!!m.is_principal}
              isOnly={totalCount <= 1}
            />
          </div>
        ))}

        {/* Ligne d'ajout */}
        {tab === 'famille' && (
          <AddRow label="Ajouter une personne"
            onClick={() => { setEditTarget(null); setFamForm(emptyFam); setModalFamille(true); }} />
        )}
        {tab === 'entreprise' && (
          <AddRow label="Ajouter une entreprise"
            onClick={() => { setEditTarget(null); setEntForm(emptyEnt); setModalEntreprise(true); }} />
        )}
      </div>

      {/* ── Modal famille ──────────────────────────────────────── */}
      <Modal
        open={modalFamille}
        title={editTarget ? 'Modifier le membre' : 'Ajouter une personne'}
        onClose={closeModals}
        footer={
          <>
            <button className="ghost" type="button" onClick={closeModals}>Annuler</button>
            <button className="primary" form="form-famille" type="submit" disabled={saving}>
              {saving ? '…' : 'Enregistrer'}
            </button>
          </>
        }
      >
        <form id="form-famille" onSubmit={saveFamille}
          style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {err && <div className="error">{err}</div>}
          <div className="modal-field">
            <label>Prénom</label>
            <input autoFocus value={famForm.prenom}
              onChange={e => setFamForm({ ...famForm, prenom: e.target.value })}
              placeholder="Olivier" />
          </div>
          <div className="modal-field">
            <label>Nom de famille <span className="text-muted" style={{ fontWeight: 400 }}>(optionnel)</span></label>
            <input value={famForm.nom_famille}
              onChange={e => setFamForm({ ...famForm, nom_famille: e.target.value })}
              placeholder="CROGUENNEC" />
          </div>
        </form>
      </Modal>

      {/* ── Modal entreprise ───────────────────────────────────── */}
      <Modal
        open={modalEntreprise}
        title={editTarget ? "Modifier l'entreprise" : 'Ajouter une entreprise'}
        onClose={closeModals}
        footer={
          <>
            <button className="ghost" type="button" onClick={closeModals}>Annuler</button>
            <button className="primary" form="form-entreprise" type="submit" disabled={saving}>
              {saving ? '…' : 'Enregistrer'}
            </button>
          </>
        }
      >
        <form id="form-entreprise" onSubmit={saveEntreprise}
          style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {err && <div className="error">{err}</div>}
          <div className="modal-field">
            <label>Nom de l'entreprise *</label>
            <input autoFocus required value={entForm.nom}
              onChange={e => setEntForm({ ...entForm, nom: e.target.value })}
              placeholder="SCI Famille Croguennec" />
          </div>
          <div className="modal-field">
            <label>Forme juridique</label>
            <select value={entForm.type_fiscal}
              onChange={e => setEntForm({ ...entForm, type_fiscal: e.target.value })}>
              <option value="PM">Personne morale</option>
              <option value="SCI">SCI</option>
              <option value="SCPI">SCPI</option>
              <option value="SARL">SARL</option>
              <option value="SAS">SAS</option>
              <option value="SA">SA</option>
            </select>
          </div>
        </form>
      </Modal>
      <ConfirmModal
        open={!!deleteConfirm}
        message={deleteConfirm?.message}
        onConfirm={deleteConfirm?.onConfirm}
        onCancel={() => setDeleteConfirm(null)}
      />
    </div>
  );
}