/**
 * Page Paramètres — 4 sections :
 *   1. SMTP (config email par utilisateur)
 *   2. Sociétés (nom + email de remboursement)
 *   3. Catégories
 *   4. Microsoft 365 / SharePoint (Azure App Registration + fichier Excel commun)
 */
import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import toast from 'react-hot-toast';
import { useRef } from 'react';
import api from '../api/client';
import type { Company, Category, SmtpConfig, AppSettings, Contact } from '../types';

// ─── Section SMTP ────────────────────────────────────────────

function SmtpSection() {
  const qc = useQueryClient();
  const { data, isLoading } = useQuery<SmtpConfig>({
    queryKey: ['smtp'],
    queryFn: () => api.get('/settings/smtp').then((r) => r.data),
  });

  const [form, setForm] = useState<Partial<SmtpConfig> & { smtp_pass?: string }>({});
  const [open, setOpen] = useState(false);

  const save = useMutation({
    mutationFn: (payload: object) => api.put('/settings/smtp', payload),
    onSuccess: () => { toast.success('SMTP sauvegardé'); qc.invalidateQueries({ queryKey: ['smtp'] }); setOpen(false); },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Erreur'),
  });

  const test = useMutation({
    mutationFn: () => api.post('/settings/smtp/test'),
    onSuccess: () => toast.success('Email de test envoyé !'),
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Échec SMTP'),
  });

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const merged = { ...data, ...form, smtp_port: Number(form.smtp_port ?? data?.smtp_port ?? 587) };
    save.mutate(merged);
  }

  const cfg = { ...data, ...form };

  return (
    <div className="card">
      <button onClick={() => setOpen(!open)}
        className="flex items-center justify-between w-full p-4">
        <div className="flex items-center gap-3">
          <div className="w-9 h-9 rounded-xl bg-blue-50 flex items-center justify-center">
            <svg className="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
            </svg>
          </div>
          <div className="text-left">
            <p className="font-semibold text-sm text-gray-900">Email (SMTP)</p>
            <p className="text-xs text-gray-400">{data?.smtp_from_email ?? 'Non configuré'}</p>
          </div>
        </div>
        <svg className={`w-5 h-5 text-gray-300 transition-transform ${open ? 'rotate-180' : ''}`}
          fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7"/>
        </svg>
      </button>

      {open && !isLoading && (
        <form onSubmit={handleSubmit} className="px-4 pb-4 space-y-3 border-t border-gray-50 pt-3">
          <div className="grid grid-cols-2 gap-3">
            <div className="col-span-2">
              <label className="form-label">Hôte SMTP</label>
              <input className="form-input" placeholder="smtp.gmail.com"
                value={cfg.smtp_host ?? ''} onChange={e => setForm(f => ({ ...f, smtp_host: e.target.value }))} />
            </div>
            <div>
              <label className="form-label">Port</label>
              <input className="form-input" type="number" placeholder="587"
                value={cfg.smtp_port ?? 587} onChange={e => setForm(f => ({ ...f, smtp_port: Number(e.target.value) }))} />
            </div>
            <div className="flex items-end pb-1">
              <label className="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" className="w-4 h-4 accent-indigo-600"
                  checked={!!cfg.smtp_secure} onChange={e => setForm(f => ({ ...f, smtp_secure: e.target.checked }))} />
                <span className="text-sm text-gray-700">SSL/TLS</span>
              </label>
            </div>
            <div className="col-span-2">
              <label className="form-label">Utilisateur</label>
              <input className="form-input" placeholder="votre@email.com"
                value={cfg.smtp_user ?? ''} onChange={e => setForm(f => ({ ...f, smtp_user: e.target.value }))} />
            </div>
            <div className="col-span-2">
              <label className="form-label">Mot de passe {data?.has_password && <span className="text-green-500 text-xs">(défini)</span>}</label>
              <input className="form-input" type="password" placeholder={data?.has_password ? '••••••• (laisser vide = conserver)' : 'Mot de passe'}
                value={form.smtp_pass ?? ''} onChange={e => setForm(f => ({ ...f, smtp_pass: e.target.value }))} />
            </div>
            <div>
              <label className="form-label">Nom affiché</label>
              <input className="form-input" placeholder="Mon Nom"
                value={cfg.smtp_from_name ?? ''} onChange={e => setForm(f => ({ ...f, smtp_from_name: e.target.value }))} />
            </div>
            <div>
              <label className="form-label">Email expéditeur</label>
              <input className="form-input" type="email" placeholder="moi@email.com"
                value={cfg.smtp_from_email ?? ''} onChange={e => setForm(f => ({ ...f, smtp_from_email: e.target.value }))} />
            </div>
          </div>
          <div className="flex gap-2 pt-1">
            <button type="submit" disabled={save.isPending} className="btn-primary py-2 text-sm">
              {save.isPending ? 'Sauvegarde…' : 'Sauvegarder'}
            </button>
            <button type="button" onClick={() => test.mutate()} disabled={test.isPending || !data?.has_password}
              className="btn-secondary py-2 text-sm">
              {test.isPending ? 'Envoi…' : 'Tester'}
            </button>
          </div>
        </form>
      )}
    </div>
  );
}

// ─── Section Sociétés ────────────────────────────────────────

function CompaniesSection() {
  const qc = useQueryClient();
  const { data: companies = [] } = useQuery<Company[]>({
    queryKey: ['companies'],
    queryFn: () => api.get('/companies').then(r => r.data),
  });

  const [editing, setEditing] = useState<Partial<Company> | null>(null);
  const [open, setOpen] = useState(false);

  const save = useMutation({
    mutationFn: (c: Partial<Company>) => c.id
      ? api.put(`/companies/${c.id}`, c)
      : api.post('/companies', c),
    onSuccess: () => { toast.success('Société sauvegardée'); qc.invalidateQueries({ queryKey: ['companies'] }); setEditing(null); },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Erreur'),
  });

  const del = useMutation({
    mutationFn: (id: number) => api.delete(`/companies/${id}`),
    onSuccess: () => { toast.success('Société supprimée'); qc.invalidateQueries({ queryKey: ['companies'] }); },
  });

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (editing) save.mutate(editing);
  }

  return (
    <div className="card">
      <button onClick={() => setOpen(!open)}
        className="flex items-center justify-between w-full p-4">
        <div className="flex items-center gap-3">
          <div className="w-9 h-9 rounded-xl bg-emerald-50 flex items-center justify-center">
            <svg className="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
            </svg>
          </div>
          <div className="text-left">
            <p className="font-semibold text-sm text-gray-900">Sociétés</p>
            <p className="text-xs text-gray-400">{companies.length} société{companies.length !== 1 ? 's' : ''}</p>
          </div>
        </div>
        <svg className={`w-5 h-5 text-gray-300 transition-transform ${open ? 'rotate-180' : ''}`}
          fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7"/>
        </svg>
      </button>

      {open && (
        <div className="border-t border-gray-50">
          {/* Liste */}
          {companies.map(c => (
            <div key={c.id} className="flex items-center gap-3 px-4 py-3 border-b border-gray-50 last:border-0">
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-gray-900 truncate">{c.name}</p>
                <p className="text-xs text-gray-400 truncate">{c.email}</p>
              </div>
              <button onClick={() => setEditing(c)} className="p-1.5 text-gray-300 hover:text-indigo-500">
                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                </svg>
              </button>
              <button onClick={() => { if (confirm(`Supprimer ${c.name} ?`)) del.mutate(c.id); }}
                className="p-1.5 text-gray-300 hover:text-red-500">
                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                </svg>
              </button>
            </div>
          ))}

          {/* Formulaire ajout/modif */}
          {editing !== null ? (
            <form onSubmit={handleSubmit} className="p-4 bg-gray-50 space-y-3">
              <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                {editing.id ? 'Modifier la société' : 'Nouvelle société'}
              </p>
              <input className="form-input" placeholder="Nom *" required
                value={editing.name ?? ''} onChange={e => setEditing(p => ({ ...p, name: e.target.value }))} />
              <input className="form-input" type="email" placeholder="Email destinataire *" required
                value={editing.email ?? ''} onChange={e => setEditing(p => ({ ...p, email: e.target.value }))} />
              <div className="flex gap-2">
                <button type="submit" disabled={save.isPending} className="btn-primary py-2 text-sm">
                  {save.isPending ? '…' : 'Sauvegarder'}
                </button>
                <button type="button" onClick={() => setEditing(null)} className="btn-secondary py-2 text-sm">Annuler</button>
              </div>
            </form>
          ) : (
            <div className="p-4">
              <button onClick={() => setEditing({})} className="btn-secondary py-2 text-sm">
                + Ajouter une société
              </button>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ─── Section Catégories ──────────────────────────────────────

function CategoriesSection() {
  const qc = useQueryClient();
  const { data: categories = [] } = useQuery<Category[]>({
    queryKey: ['categories'],
    queryFn: () => api.get('/categories').then(r => r.data),
  });

  const [newName, setNewName] = useState('');
  const [open, setOpen] = useState(false);

  const add = useMutation({
    mutationFn: (name: string) => api.post('/categories', { name }),
    onSuccess: () => { toast.success('Catégorie ajoutée'); qc.invalidateQueries({ queryKey: ['categories'] }); setNewName(''); },
  });

  const del = useMutation({
    mutationFn: (id: number) => api.delete(`/categories/${id}`),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['categories'] }); },
  });

  return (
    <div className="card">
      <button onClick={() => setOpen(!open)}
        className="flex items-center justify-between w-full p-4">
        <div className="flex items-center gap-3">
          <div className="w-9 h-9 rounded-xl bg-amber-50 flex items-center justify-center">
            <svg className="w-5 h-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A2 2 0 013 12V7a2 2 0 012-2z"/>
            </svg>
          </div>
          <div className="text-left">
            <p className="font-semibold text-sm text-gray-900">Catégories</p>
            <p className="text-xs text-gray-400">{categories.length} catégorie{categories.length !== 1 ? 's' : ''}</p>
          </div>
        </div>
        <svg className={`w-5 h-5 text-gray-300 transition-transform ${open ? 'rotate-180' : ''}`}
          fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7"/>
        </svg>
      </button>

      {open && (
        <div className="border-t border-gray-50 p-4 space-y-2">
          {categories.map(c => (
            <div key={c.id} className="flex items-center gap-2">
              <span className="flex-1 text-sm text-gray-700">{c.name}</span>
              <button onClick={() => del.mutate(c.id)} className="p-1 text-gray-300 hover:text-red-400">
                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/>
                </svg>
              </button>
            </div>
          ))}
          <div className="flex gap-2 pt-2">
            <input className="form-input text-sm py-2 flex-1" placeholder="Nouvelle catégorie"
              value={newName} onChange={e => setNewName(e.target.value)}
              onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); if (newName.trim()) add.mutate(newName.trim()); }}} />
            <button onClick={() => { if (newName.trim()) add.mutate(newName.trim()); }}
              disabled={!newName.trim()}
              className="px-4 py-2 bg-indigo-600 text-white text-sm font-semibold rounded-xl disabled:opacity-40">
              +
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Section Microsoft Graph ─────────────────────────────────

function GraphSection() {
  const qc = useQueryClient();
  const { data } = useQuery<AppSettings>({
    queryKey: ['app-settings'],
    queryFn: () => api.get('/settings/app').then(r => r.data),
  });

  const [form, setForm] = useState<{
    tenant?: string; client?: string; secret?: string;
    siteId?: string; itemId?: string; sheetName?: string;
  }>({});
  const [open, setOpen] = useState(false);

  const save = useMutation({
    mutationFn: (payload: object) => api.put('/settings/app', payload),
    onSuccess: () => { toast.success('Configuration Graph sauvegardée'); qc.invalidateQueries({ queryKey: ['app-settings'] }); setOpen(false); },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Erreur'),
  });

  const testSp = useMutation({
    mutationFn: () => api.post('/settings/sharepoint/test'),
    onSuccess: (r: any) => toast.success(r.data?.message ?? 'SharePoint OK'),
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Erreur SharePoint', { duration: 8000 }),
  });

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    save.mutate({
      graph_tenant_id:       form.tenant    || undefined,
      graph_client_id:       form.client    || undefined,
      graph_client_secret:   form.secret    || undefined,
      sharepoint_site_id:    form.siteId    || undefined,
      sharepoint_item_id:    form.itemId    || undefined,
      sharepoint_sheet_name: form.sheetName || undefined,
    });
  }

  const isConfigured =
    data?.graph_tenant_id && data?.graph_client_id && data?.has_secret === 'true' &&
    data?.sharepoint_site_id && data?.sharepoint_item_id;

  return (
    <div className="card">
      <button onClick={() => setOpen(!open)}
        className="flex items-center justify-between w-full p-4">
        <div className="flex items-center gap-3">
          <div className="w-9 h-9 rounded-xl bg-sky-50 flex items-center justify-center">
            <svg className="w-5 h-5 text-sky-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
          </div>
          <div className="text-left">
            <p className="font-semibold text-sm text-gray-900">Microsoft 365 / SharePoint</p>
            <p className={`text-xs ${isConfigured ? 'text-green-500' : 'text-gray-400'}`}>
              {isConfigured ? '✓ Connecté' : 'Non configuré'}
            </p>
          </div>
        </div>
        <svg className={`w-5 h-5 text-gray-300 transition-transform ${open ? 'rotate-180' : ''}`}
          fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7"/>
        </svg>
      </button>

      {open && (
        <form onSubmit={handleSubmit} className="px-4 pb-4 space-y-3 border-t border-gray-50 pt-3">
          <div className="bg-sky-50 rounded-xl p-3 text-xs text-sky-700 space-y-1">
            <p className="font-semibold">Configuration Azure App Registration</p>
            <p>Voir le README pour créer l'App Registration et obtenir ces valeurs.</p>
          </div>
          <p className="text-xs font-semibold text-gray-400 uppercase tracking-wide pt-1">Azure App Registration</p>
          {([
            { key: 'tenant', label: 'Tenant ID', ph: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', cur: data?.graph_tenant_id },
            { key: 'client', label: 'Client ID',  ph: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', cur: data?.graph_client_id },
          ] as { key: string; label: string; ph: string; cur?: string }[]).map(({ key, label, ph, cur }) => (
            <div key={key}>
              <label className="form-label">{label} {cur && <span className="text-green-500 text-xs">(défini)</span>}</label>
              <input className="form-input font-mono text-xs" placeholder={cur ? '(conserver existant)' : ph}
                value={(form as any)[key] ?? ''} onChange={e => setForm(f => ({ ...f, [key]: e.target.value }))} />
            </div>
          ))}
          <div>
            <label className="form-label">Client Secret {data?.has_secret === 'true' && <span className="text-green-500 text-xs">(défini)</span>}</label>
            <input className="form-input" type="password" placeholder={data?.has_secret === 'true' ? '(laisser vide = conserver)' : 'Client Secret'}
              value={form.secret ?? ''} onChange={e => setForm(f => ({ ...f, secret: e.target.value }))} />
          </div>

          <p className="text-xs font-semibold text-gray-400 uppercase tracking-wide pt-2">Fichier Excel SharePoint (partagé entre toutes les sociétés)</p>
          <div>
            <label className="form-label">Site ID {data?.sharepoint_site_id && <span className="text-green-500 text-xs">(défini)</span>}</label>
            <input className="form-input font-mono text-xs"
              placeholder={data?.sharepoint_site_id ? '(conserver existant)' : 'contoso.sharepoint.com,xxxxxxxx,yyyyyyyy'}
              value={form.siteId ?? ''} onChange={e => setForm(f => ({ ...f, siteId: e.target.value }))} />
          </div>
          <div>
            <label className="form-label">Item ID du fichier Excel {data?.sharepoint_item_id && <span className="text-green-500 text-xs">(défini)</span>}</label>
            <input className="form-input font-mono text-xs"
              placeholder={data?.sharepoint_item_id ? '(conserver existant)' : 'ID de l\'élément (GET .../drive/root:/fichier.xlsx)'}
              value={form.itemId ?? ''} onChange={e => setForm(f => ({ ...f, itemId: e.target.value }))} />
          </div>
          <div>
            <label className="form-label">
              Nom de la feuille {data?.sharepoint_sheet_name && <span className="text-green-500 text-xs">({data.sharepoint_sheet_name})</span>}
            </label>
            <input className="form-input text-sm"
              placeholder={data?.sharepoint_sheet_name ?? 'Feuil1'}
              value={form.sheetName ?? ''} onChange={e => setForm(f => ({ ...f, sheetName: e.target.value }))} />
          </div>
          <div className="flex gap-2">
            <button type="submit" disabled={save.isPending} className="btn-primary py-2 text-sm">
              {save.isPending ? 'Sauvegarde…' : 'Sauvegarder'}
            </button>
            <button type="button" onClick={() => testSp.mutate()}
              disabled={testSp.isPending || !isConfigured}
              className="btn-secondary py-2 text-sm">
              {testSp.isPending ? 'Test…' : 'Tester'}
            </button>
          </div>
        </form>
      )}
    </div>
  );
}

// ─── Section Contacts ────────────────────────────────────────

function ContactsSection() {
  const qc = useQueryClient();
  const fileRef = useRef<HTMLInputElement>(null);
  const [open, setOpen] = useState(false);
  const [newName, setNewName] = useState('');
  const [newCompany, setNewCompany] = useState('');
  const [importing, setImporting] = useState(false);

  const { data: contacts = [] } = useQuery<Contact[]>({
    queryKey: ['contacts'],
    queryFn: () => api.get('/contacts').then(r => r.data),
  });

  const add = useMutation({
    mutationFn: (payload: { name: string; company: string }) =>
      api.post('/contacts', payload),
    onSuccess: () => {
      toast.success('Contact ajouté');
      qc.invalidateQueries({ queryKey: ['contacts'] });
      setNewName(''); setNewCompany('');
    },
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Erreur'),
  });

  const del = useMutation({
    mutationFn: (id: number) => api.delete(`/contacts/${id}`),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['contacts'] }),
    onError: (e: any) => toast.error(e.response?.data?.error ?? 'Erreur'),
  });

  async function handleFileImport(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    e.target.value = '';
    setImporting(true);
    const formData = new FormData();
    formData.append('file', file);
    try {
      const r = await api.post('/contacts/import', formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
      });
      const { inserted, skipped, total } = r.data;
      toast.success(`${inserted} contact${inserted !== 1 ? 's' : ''} importé${inserted !== 1 ? 's' : ''}${skipped > 0 ? ` (${skipped} doublon${skipped !== 1 ? 's' : ''} ignoré${skipped !== 1 ? 's' : ''})` : ''} sur ${total}`);
      qc.invalidateQueries({ queryKey: ['contacts'] });
    } catch (err: any) {
      toast.error(err.response?.data?.error ?? 'Erreur lors de l\'import');
    } finally {
      setImporting(false);
    }
  }

  return (
    <div className="card">
      <button onClick={() => setOpen(!open)}
        className="flex items-center justify-between w-full p-4">
        <div className="flex items-center gap-3">
          <div className="w-9 h-9 rounded-xl bg-violet-50 flex items-center justify-center">
            <svg className="w-5 h-5 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
            </svg>
          </div>
          <div className="text-left">
            <p className="font-semibold text-sm text-gray-900">Contacts / Invités</p>
            <p className="text-xs text-gray-400">{contacts.length} contact{contacts.length !== 1 ? 's' : ''}</p>
          </div>
        </div>
        <svg className={`w-5 h-5 text-gray-300 transition-transform ${open ? 'rotate-180' : ''}`}
          fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7"/>
        </svg>
      </button>

      {open && (
        <div className="border-t border-gray-50">
          {/* Bouton import */}
          <div className="px-4 pt-3 pb-2 flex gap-2">
            <input ref={fileRef} type="file" accept=".csv,.xls,.xlsx"
              onChange={handleFileImport} className="hidden" />
            <button
              onClick={() => fileRef.current?.click()}
              disabled={importing}
              className="btn-secondary py-2 text-sm flex items-center gap-2">
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
              </svg>
              {importing ? 'Import en cours…' : 'Importer CSV / Excel'}
            </button>
            <p className="text-xs text-gray-400 self-center">Colonnes : Nom, Société (optionnel)</p>
          </div>

          {/* Liste des contacts */}
          {contacts.length > 0 && (
            <div className="px-4 pb-2 max-h-64 overflow-y-auto space-y-1">
              {contacts.map(c => (
                <div key={c.id} className="flex items-center gap-3 py-1.5 border-b border-gray-50 last:border-0">
                  <div className="flex-1 min-w-0">
                    <span className="text-sm font-medium text-gray-900">{c.name}</span>
                    {c.company && <span className="ml-2 text-xs text-gray-400">{c.company}</span>}
                  </div>
                  <button onClick={() => del.mutate(c.id)}
                    className="p-1 text-gray-300 hover:text-red-400 shrink-0">
                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                  </button>
                </div>
              ))}
            </div>
          )}

          {/* Ajout manuel */}
          <div className="px-4 pb-4 pt-2 space-y-2 border-t border-gray-50">
            <p className="text-xs font-semibold text-gray-400 uppercase tracking-wide">Ajouter manuellement</p>
            <div className="flex gap-2">
              <input className="form-input text-sm py-2 flex-1" placeholder="Nom *"
                value={newName} onChange={e => setNewName(e.target.value)}
                onKeyDown={e => { if (e.key === 'Enter' && newName.trim()) { e.preventDefault(); add.mutate({ name: newName.trim(), company: newCompany.trim() }); }}} />
              <input className="form-input text-sm py-2 flex-1" placeholder="Société (optionnel)"
                value={newCompany} onChange={e => setNewCompany(e.target.value)}
                onKeyDown={e => { if (e.key === 'Enter' && newName.trim()) { e.preventDefault(); add.mutate({ name: newName.trim(), company: newCompany.trim() }); }}} />
              <button
                onClick={() => { if (newName.trim()) add.mutate({ name: newName.trim(), company: newCompany.trim() }); }}
                disabled={!newName.trim() || add.isPending}
                className="px-4 py-2 bg-indigo-600 text-white text-sm font-semibold rounded-xl disabled:opacity-40">
                +
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Page principale ─────────────────────────────────────────

export default function Settings() {
  return (
    <div className="space-y-4">
      <h2 className="text-xl font-bold text-gray-900">Paramètres</h2>
      <SmtpSection />
      <CompaniesSection />
      <CategoriesSection />
      <ContactsSection />
      <GraphSection />
    </div>
  );
}