// webhooks-page.jsx — Webhooks entrants / sortants / logs
// Portage de pg-webhooks (audits-energies.html) vers design-v1

const { useState, useEffect, useRef, useCallback } = React;

/* ─── Événements disponibles ─────────────────────────────────────────────────── */
const WEBHOOK_EVENTS = [
  { id:'dossier.created',    label:'Dossier créé',         group:'CEE' },
  { id:'dossier.approved',   label:'Dossier approuvé',     group:'CEE' },
  { id:'dossier.rejected',   label:'Dossier rejeté',       group:'CEE' },
  { id:'opportunity.created',label:'Opportunité créée',    group:'CRM' },
  { id:'opportunity.updated',label:'Opportunité mise à jour', group:'CRM' },
  { id:'opportunity.won',    label:'Opportunité gagnée',   group:'CRM' },
  { id:'signature.signed',   label:'Document signé',       group:'Signatures' },
  { id:'signature.rejected', label:'Signature refusée',    group:'Signatures' },
  { id:'visite.completed',   label:'Visite terminée',      group:'Visites' },
  { id:'visite.report',      label:'Rapport visite généré',group:'Visites' },
  { id:'email.received',     label:'Email reçu',           group:'Communication' },
  { id:'email.matched',      label:'Email associé contact',group:'Communication' },
  { id:'webhook.incoming',   label:'Webhook entrant reçu', group:'Système' },
];

const EVENT_GROUPS = [...new Set(WEBHOOK_EVENTS.map(e=>e.group))];

/* ─── Onglet Entrant ─────────────────────────────────────────────────────────── */
function IncomingTab() {
  const BASE = window.AE_API?.BASE || '';
  const token = 'dcee-' + (localStorage.getItem('dcee_incoming_token') || (() => {
    const t = Math.random().toString(36).slice(2,10);
    localStorage.setItem('dcee_incoming_token', t);
    return t;
  })());
  const url = `${window.location.origin}${BASE}/api/webhooks/incoming/${token}`;
  const [copied, setCopied] = useState(false);
  const [regen, setRegen] = useState(false);

  const copyUrl = () => {
    navigator.clipboard?.writeText(url);
    setCopied(true); setTimeout(()=>setCopied(false), 2000);
  };

  const regenToken = () => {
    const t = Math.random().toString(36).slice(2,10);
    localStorage.setItem('dcee_incoming_token', t);
    setRegen(v=>!v); // force re-render
  };

  return (
    <div style={{display:'flex',flexDirection:'column',gap:16}}>
      {/* URL card */}
      <div style={{background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',overflow:'hidden'}}>
        <div style={{padding:'12px 16px',borderBottom:'1px solid var(--border)'}}>
          <div style={{fontSize:13,fontWeight:700}}>🔗 URL Webhook entrant</div>
          <div style={{fontSize:11,color:'var(--t2)',marginTop:3}}>
            Configurez cette URL dans vos outils externes (Zapier, Make, votre CRM, ERP, etc.)
          </div>
        </div>
        <div style={{padding:'14px 16px',display:'flex',gap:8,alignItems:'center'}}>
          <input className="fi" readOnly value={url} style={{flex:1,fontFamily:'monospace',fontSize:11,background:'var(--bg3)'}} />
          <button className="btn b-primary" onClick={copyUrl}>{copied ? '✅ Copié' : '📋 Copier'}</button>
          <button className="btn b-ghost" onClick={regenToken} title="Générer un nouveau token">🔄 Régénérer</button>
        </div>
      </div>

      {/* Intégrations */}
      <div style={{background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',overflow:'hidden'}}>
        <div style={{padding:'12px 16px',borderBottom:'1px solid var(--border)',fontSize:13,fontWeight:700}}>
          🔌 Intégrations compatibles
        </div>
        <div style={{padding:'14px 16px',display:'flex',flexWrap:'wrap',gap:10}}>
          {[
            {name:'Zapier',   icon:'⚡',  color:'#ff4a00'},
            {name:'Make',     icon:'🔧', color:'#6e3ff3'},
            {name:'n8n',      icon:'🤖', color:'#ea5e2a'},
            {name:'Odoo',     icon:'🟣', color:'#875A7B'},
            {name:'HubSpot',  icon:'🟠', color:'#ff7a59'},
            {name:'Slack',    icon:'💬', color:'#4A154B'},
            {name:'EMMY',     icon:'🏛️', color:'#1e3a5f'},
            {name:'Pipedrive',icon:'🟢', color:'#17b553'},
          ].map(t => (
            <div key={t.name} style={{
              padding:'8px 14px',background:`${t.color}12`,border:`1px solid ${t.color}33`,
              borderRadius:8,display:'flex',alignItems:'center',gap:6,fontSize:12,fontWeight:600,
            }}>
              <span style={{fontSize:16}}>{t.icon}</span> {t.name}
            </div>
          ))}
        </div>
      </div>

      {/* Format payload */}
      <div style={{background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',overflow:'hidden'}}>
        <div style={{padding:'12px 16px',borderBottom:'1px solid var(--border)',fontSize:13,fontWeight:700}}>📦 Format payload entrant</div>
        <div style={{padding:'14px 16px'}}>
          <pre style={{margin:0,fontSize:11,background:'var(--bg3)',borderRadius:8,padding:12,overflowX:'auto',color:'var(--t2)',lineHeight:1.6}}>{`{
  "event": "dossier.approved",
  "source": "emmy",
  "timestamp": "2026-04-21T10:30:00Z",
  "data": {
    "dossier_ref": "CEE-2026-001",
    "montant_kwh_cumac": 12500000
  }
}`}</pre>
        </div>
      </div>
    </div>
  );
}

/* ─── Formulaire ajout webhook sortant ──────────────────────────────────────── */
function AddWebhookForm({ onAdd }) {
  const [name, setName] = useState('');
  const [url, setUrl] = useState('');
  const [secret, setSecret] = useState('');
  const [events, setEvents] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const toggleEvent = (id) => {
    setEvents(prev => prev.includes(id) ? prev.filter(e=>e!==id) : [...prev, id]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!url) { setError('URL requise'); return; }
    setLoading(true); setError('');
    try {
      const data = await window.AE_API.postJson('/api/webhooks/outgoing', { name, url, secret: secret||null, events });
      if (data?.ok) {
        onAdd?.(data.webhook);
        setName(''); setUrl(''); setSecret(''); setEvents([]);
      } else {
        setError(data?.error || 'Erreur');
      }
    } catch(err) { setError(err.message); }
    finally { setLoading(false); }
  };

  return (
    <form onSubmit={handleSubmit} style={{display:'flex',flexDirection:'column',gap:10}}>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
        <div>
          <label className="lbl">Nom (optionnel)</label>
          <input className="fi" value={name} onChange={e=>setName(e.target.value)} placeholder="Mon webhook Zapier" />
        </div>
        <div>
          <label className="lbl">Secret HMAC (optionnel)</label>
          <input className="fi" value={secret} onChange={e=>setSecret(e.target.value)} placeholder="sha256_secret…" type="password" />
        </div>
      </div>
      <div>
        <label className="lbl">URL de destination *</label>
        <input className="fi" value={url} onChange={e=>setUrl(e.target.value)} placeholder="https://hooks.zapier.com/…" type="url" required />
      </div>

      {/* Événements */}
      <div>
        <label className="lbl">Événements à écouter</label>
        <div style={{display:'flex',flexDirection:'column',gap:8,marginTop:6}}>
          {EVENT_GROUPS.map(group => (
            <div key={group}>
              <div style={{fontSize:10,fontWeight:700,color:'var(--t2)',marginBottom:4,textTransform:'uppercase'}}>{group}</div>
              <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
                {WEBHOOK_EVENTS.filter(e=>e.group===group).map(ev => (
                  <label key={ev.id} style={{display:'flex',alignItems:'center',gap:5,fontSize:11,cursor:'pointer',
                    padding:'4px 9px',borderRadius:6,border:'1px solid var(--border)',
                    background: events.includes(ev.id) ? 'var(--signal-tint)' : 'var(--bg3)',
                    borderColor: events.includes(ev.id) ? 'var(--signal)' : 'var(--border)',
                  }}>
                    <input type="checkbox" checked={events.includes(ev.id)} onChange={()=>toggleEvent(ev.id)} style={{margin:0}} />
                    {ev.label}
                  </label>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      {error && <div style={{fontSize:11,color:'var(--rouge)',padding:'8px 12px',background:'var(--rouge-tint)',borderRadius:6}}>{error}</div>}

      <div style={{display:'flex',justifyContent:'flex-end'}}>
        <button type="submit" className="btn b-primary" disabled={loading}>
          {loading ? '⏳ Ajout…' : '+ Ajouter le webhook'}
        </button>
      </div>
    </form>
  );
}

/* ─── Onglet Sortant ─────────────────────────────────────────────────────────── */
function OutgoingTab() {
  const [webhooks, setWebhooks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [testing, setTesting] = useState({});
  const [testResults, setTestResults] = useState({});
  const [showAdd, setShowAdd] = useState(false);

  const loadWebhooks = useCallback(async () => {
    setLoading(true);
    try {
      const data = await window.AE_API.fetch('/api/webhooks/list');
      setWebhooks(data?.webhooks || []);
    } catch { setWebhooks([]); }
    finally { setLoading(false); }
  }, []);

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

  const handleDelete = async (id) => {
    if (!confirm('Supprimer ce webhook ?')) return;
    await window.AE_API.fetch(`/api/webhooks/outgoing/${id}`, { method:'DELETE' });
    setWebhooks(prev => prev.filter(w => w.id !== id));
  };

  const handleTest = async (id) => {
    setTesting(p=>({...p,[id]:true}));
    try {
      const data = await window.AE_API.postJson(`/api/webhooks/test/${id}`, {});
      setTestResults(p=>({...p,[id]: data?.ok ? '✅ OK' : `❌ ${data?.error||data?.status}`}));
    } catch(e) {
      setTestResults(p=>({...p,[id]:`❌ ${e.message}`}));
    }
    setTesting(p=>({...p,[id]:false}));
    setTimeout(()=>setTestResults(p=>{const n={...p};delete n[id];return n;}), 4000);
  };

  const handleAdd = (w) => {
    setWebhooks(prev=>[w,...prev]);
    setShowAdd(false);
  };

  if (loading) return <div style={{padding:32,textAlign:'center',color:'var(--t2)'}}>⏳ Chargement…</div>;

  return (
    <div style={{display:'flex',flexDirection:'column',gap:14}}>
      {/* Bouton ajout */}
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div style={{fontSize:13,color:'var(--t2)'}}>{webhooks.length} webhook{webhooks.length>1?'s':''} configuré{webhooks.length>1?'s':''}</div>
        <button className="btn b-primary" onClick={()=>setShowAdd(v=>!v)}>
          {showAdd ? '✕ Annuler' : '+ Ajouter un webhook'}
        </button>
      </div>

      {showAdd && (
        <div style={{background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',padding:'16px'}}>
          <AddWebhookForm onAdd={handleAdd} />
        </div>
      )}

      {webhooks.length === 0 && !showAdd ? (
        <div style={{padding:48,textAlign:'center',color:'var(--t2)',background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)'}}>
          <div style={{fontSize:32,marginBottom:12}}>🔔</div>
          <div style={{fontWeight:700,marginBottom:6}}>Aucun webhook sortant</div>
          <div style={{fontSize:12}}>Ajoutez un webhook pour notifier vos outils externes des événements CEE.</div>
        </div>
      ) : webhooks.map(w => (
        <div key={w.id} style={{background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',overflow:'hidden'}}>
          <div style={{padding:'12px 16px',display:'flex',alignItems:'center',gap:12,justifyContent:'space-between'}}>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontWeight:700,fontSize:13}}>
                {w.name || <span style={{color:'var(--t2)',fontWeight:400}}>Sans nom</span>}
              </div>
              <div style={{fontSize:11,color:'var(--t2)',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',marginTop:2}}>
                {w.url}
              </div>
              {w.lastCallAt && (
                <div style={{fontSize:10,color:'var(--t2)',marginTop:4}}>
                  Dernier appel : {new Date(w.lastCallAt).toLocaleString('fr-FR')}
                  {w.lastCallStatus && ` · HTTP ${w.lastCallStatus}`}
                  {w.lastError && <span style={{color:'var(--rouge)'}}> · {w.lastError}</span>}
                </div>
              )}
            </div>
            <div style={{display:'flex',gap:6,flexShrink:0}}>
              {testResults[w.id] && (
                <span style={{fontSize:11,padding:'4px 8px',borderRadius:6,background:'var(--bg3)'}}>{testResults[w.id]}</span>
              )}
              <button className="btn b-ghost" style={{fontSize:11}} disabled={testing[w.id]}
                onClick={()=>handleTest(w.id)}>
                {testing[w.id] ? '⏳' : '🧪 Tester'}
              </button>
              <button className="btn b-ghost" style={{fontSize:11,color:'var(--rouge)'}}
                onClick={()=>handleDelete(w.id)}>🗑️</button>
            </div>
          </div>
          {w.events?.length > 0 && (
            <div style={{padding:'8px 16px',borderTop:'1px solid var(--border)',display:'flex',flexWrap:'wrap',gap:4}}>
              {w.events.map(ev => (
                <span key={ev} style={{fontSize:9,background:'var(--signal-tint)',color:'var(--signal)',borderRadius:8,padding:'2px 7px',fontWeight:600}}>
                  {ev}
                </span>
              ))}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

/* ─── Onglet Log entrant ─────────────────────────────────────────────────────── */
function LogTab() {
  const [log, setLog] = useState([]);
  const [loading, setLoading] = useState(true);
  const [selected, setSelected] = useState(null);

  const loadLog = useCallback(async () => {
    setLoading(true);
    try {
      const data = await window.AE_API.fetch('/api/webhooks/log');
      setLog(data?.log || []);
    } catch { setLog([]); }
    finally { setLoading(false); }
  }, []);

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

  if (loading) return <div style={{padding:32,textAlign:'center',color:'var(--t2)'}}>⏳ Chargement…</div>;

  return (
    <div style={{display:'flex',gap:14,height:'100%'}}>
      {/* Liste */}
      <div style={{flex:'0 0 340px',display:'flex',flexDirection:'column',gap:0,overflow:'auto'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
          <div style={{fontSize:12,color:'var(--t2)'}}>{log.length} événement{log.length>1?'s':''} récents</div>
          <button className="btn b-ghost" style={{fontSize:11}} onClick={loadLog}>🔄 Rafraîchir</button>
        </div>
        {log.length === 0 ? (
          <div style={{padding:32,textAlign:'center',color:'var(--t2)',background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)'}}>
            <div style={{fontSize:24,marginBottom:8}}>📭</div>
            Aucun webhook reçu récemment.
          </div>
        ) : log.map((ev, i) => (
          <div key={ev.id || i} onClick={()=>setSelected(ev)}
            style={{
              padding:'10px 14px',background: selected?.id===ev.id ? 'var(--signal-tint)' : 'var(--bg2)',
              borderLeft: selected?.id===ev.id ? '3px solid var(--signal)' : '3px solid transparent',
              border:'1px solid var(--border)',borderRadius:8,marginBottom:6,cursor:'pointer',
              transition:'background .15s',
            }}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <span style={{fontSize:12,fontWeight:600}}>{ev.type}</span>
              <span style={{fontSize:9,background:'var(--signal-tint)',color:'var(--signal)',borderRadius:8,padding:'2px 6px'}}>
                HTTP {ev.status||200}
              </span>
            </div>
            <div style={{fontSize:10,color:'var(--t2)',marginTop:3}}>{ev.source}</div>
            <div style={{fontSize:10,color:'var(--t2)',marginTop:2}}>{new Date(ev.receivedAt).toLocaleString('fr-FR')}</div>
          </div>
        ))}
      </div>

      {/* Détail */}
      <div style={{flex:1,background:'var(--bg2)',borderRadius:12,border:'1px solid var(--border)',overflow:'hidden'}}>
        {!selected ? (
          <div style={{height:'100%',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--t2)'}}>
            <div style={{textAlign:'center'}}>
              <div style={{fontSize:32,marginBottom:12}}>📋</div>
              <div style={{fontSize:12}}>Sélectionnez un événement pour voir le payload</div>
            </div>
          </div>
        ) : (
          <div style={{padding:16,height:'100%',overflow:'auto'}}>
            <div style={{fontWeight:700,marginBottom:8}}>{selected.type}</div>
            <div style={{fontSize:11,color:'var(--t2)',marginBottom:4}}>Token : {selected.token}</div>
            <div style={{fontSize:11,color:'var(--t2)',marginBottom:12}}>Source : {selected.source}</div>
            <pre style={{margin:0,fontSize:11,background:'var(--bg3)',borderRadius:8,padding:12,overflowX:'auto',lineHeight:1.6}}>
              {JSON.stringify(selected.payload, null, 2)}
            </pre>
          </div>
        )}
      </div>
    </div>
  );
}

/* ─── Page principale ───────────────────────────────────────────────────────── */
function WebhooksPage() {
  const [tab, setTab] = useState('incoming');

  const TABS = [
    { id:'incoming', label:'📥 Entrant' },
    { id:'outgoing', label:'📤 Sortant' },
    { id:'log',      label:'📋 Log' },
  ];

  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',overflow:'hidden'}}>
      {/* Header */}
      <div style={{padding:'18px 24px 0',borderBottom:'1px solid var(--border)',flexShrink:0}}>
        <div style={{marginBottom:12,display:'flex',alignItems:'flex-start',gap:12}}>
          <div style={{flex:1}}>
            <div style={{fontSize:18,fontWeight:800,letterSpacing:'-0.5px'}}>
              🔔 <span style={{color:'var(--signal)'}}>Webhooks</span>
            </div>
            <div style={{fontSize:12,color:'var(--t2)',marginTop:3}}>
              Intégrations entrantes · Notifications sortantes · Journal des événements
            </div>
          </div>
          {window.ModuleSettingsButton && <window.ModuleSettingsButton
            storageKey="ae_webhooks_settings"
            title="Personnalisation Webhooks"
            defaults={{
              retryEnabled: true,
              retryMaxAttempts: 5,
              retryBackoffMin: 5,
              timeoutSec: 10,
              logRetentionDays: 30,
              signSecret: '',
              signAlgo: 'sha256',
              eventsSubscribed: 'dossier.signed,dossier.deposited,signature.completed,visit.analyzed,opp.stage.changed',
              notifyOnFailure: true,
              alertEmail: '',
            }}
            sections={[
              { title: 'Retry & timeouts', fields: [
                { key: 'retryMaxAttempts', label: 'Tentatives max', type: 'number', min: 0, max: 20 },
                { key: 'retryBackoffMin', label: 'Backoff initial (min)', type: 'number', min: 1, max: 60 },
                { key: 'timeoutSec', label: 'Timeout HTTP (s)', type: 'number', min: 1, max: 60 },
                { key: 'logRetentionDays', label: 'Rétention logs (jours)', type: 'number', min: 7, max: 365 },
                { key: 'retryEnabled', label: 'Retry automatique sur échec', type: 'checkbox' },
                { key: 'notifyOnFailure', label: 'Notifier sur échec persistant', type: 'checkbox' },
              ]},
              { title: 'Signature HMAC sortante', fields: [
                { key: 'signSecret', label: 'Secret HMAC (laisser vide = désactivé)', type: 'text' },
                { key: 'signAlgo', label: 'Algorithme', type: 'select', options: [
                  { value: 'sha256', label: 'SHA-256' }, { value: 'sha512', label: 'SHA-512' }, { value: 'sha1', label: 'SHA-1 (legacy)' },
                ]},
                { key: 'alertEmail', label: 'Email d\'alerte échec', type: 'text' },
              ]},
              { title: 'Souscriptions événements', fields: [
                { key: 'eventsSubscribed', label: 'Types d\'événements (séparés par virgule)', type: 'textarea', rows: 3,
                  hint: 'Ex: dossier.signed,signature.completed,visit.analyzed,opp.stage.changed' },
              ]},
            ]}
          />}
        </div>
        <div style={{display:'flex',gap:2}}>
          {TABS.map(t => (
            <button key={t.id} onClick={()=>setTab(t.id)}
              style={{
                padding:'8px 16px',fontSize:12,fontWeight:600,border:'none',cursor:'pointer',
                background: tab===t.id ? 'var(--bg1)' : 'transparent',
                color: tab===t.id ? 'var(--t1)' : 'var(--t2)',
                borderBottom: tab===t.id ? '2px solid var(--signal)' : '2px solid transparent',
                borderRadius:'6px 6px 0 0',transition:'all .15s',
              }}>
              {t.label}
            </button>
          ))}
        </div>
      </div>

      <div style={{flex:1,overflow:tab==='log'?'hidden':'auto',padding:'16px 24px'}}>
        {tab === 'incoming' && <IncomingTab />}
        {tab === 'outgoing' && <OutgoingTab />}
        {tab === 'log'      && <LogTab />}
      </div>
    </div>
  );
}

Object.assign(window, { WebhooksPage });