// resources.jsx — Resources page + Settings page
const { useState: useStateR } = React;

function ResourceCard({ r, onCopy, openDoc, showToast }) {
  const [copied, setCopied] = useStateR(false);
  const copy = () => {
    const snippet = `<script src="https://widget.lbc-platform.fr/lead.js" data-partner="RIVIERA-IMMO"></` + `script>`;
    navigator.clipboard?.writeText(snippet).catch(()=>{});
    setCopied(true); onCopy && onCopy();
    setTimeout(()=>setCopied(false), 2000);
  };
  const dl = () => {
    if (r.action==='doc') { openDoc && openDoc(r.doc); }
    else { showToast && showToast('Préparation de l\'archive…'); setTimeout(()=>showToast && showToast('Kit réseaux sociaux téléchargé'), 1100); }
  };
  return (
    <div className="card card-pad" style={{ display:'flex', flexDirection:'column', gap:14 }}>
      <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between' }}>
        <span style={{ width:44, height:44, borderRadius:12, background:'var(--bg)', border:'1px solid var(--border)',
          display:'flex', alignItems:'center', justifyContent:'center', color:'var(--navy)' }}><Icon name={r.icon} size={22} /></span>
        <span className="mono" style={{ fontSize:11, color:'var(--muted)', background:'var(--bg)', padding:'4px 9px', borderRadius:7 }}>{r.meta}</span>
      </div>
      <div>
        <div style={{ fontSize:15.5, fontWeight:600, color:'var(--ink)' }}>{r.title}</div>
        <div style={{ fontSize:13, color:'var(--muted)', marginTop:4, lineHeight:1.45 }}>{r.desc}</div>
      </div>
      {r.action==='copy' ? (
        <>
          <div className="mono" style={{ fontSize:11.5, background:'#0E2A3B', borderRadius:9, padding:'11px 13px', overflow:'hidden', whiteSpace:'nowrap', textOverflow:'ellipsis', color:'#9FD0C0' }}>
            &lt;script src="…lbc-platform.fr/lead.js"&gt;</div>
          <button className="btn btn-ghost btn-sm" onClick={copy} style={{ marginTop:2, justifyContent:'center' }}>
            <Icon name={copied?'check':'copy'} size={16} />{copied?'Copié !':'Copier le code'}</button>
        </>
      ) : (
        <button className="btn btn-ghost btn-sm" style={{ marginTop:2, justifyContent:'center' }} onClick={dl}>
          <Icon name={r.action==='doc'?'eye':'download'} size={16} />{r.action==='doc'?'Aperçu / PDF':'Télécharger'}</button>
      )}
    </div>
  );
}

function ResourcesPage({ mobile, showToast, openDoc }) {
  return (
    <div>
      <div style={{ marginBottom:20 }}>
        <p style={{ fontSize:14.5, color:'var(--muted)', margin:0, lineHeight:1.5 }}>
          Tout ce dont vous avez besoin pour parler de LBC à vos clients.</p>
      </div>
      <div style={{ display:'grid', gridTemplateColumns: mobile?'1fr':'1fr 1fr', gap:16 }}>
        {window.LBC_DATA.RESOURCES.map((r,i)=><ResourceCard key={i} r={r} openDoc={openDoc} showToast={showToast} onCopy={()=>showToast&&showToast('Code du widget copié')} />)}
      </div>
    </div>
  );
}

/* ============== SETTINGS ============== */
function SettingsPage({ mobile, partner }) {
  const [notif, setNotif] = useStateR({ leads:true, commissions:true, newsletter:false });
  const Toggle = ({ on, onClick }) => (
    <button onClick={onClick} style={{ width:42, height:24, borderRadius:999, padding:2, background: on?'var(--brand)':'var(--border-2)', transition:'.18s', flexShrink:0 }}>
      <span style={{ display:'block', width:20, height:20, borderRadius:'50%', background:'#fff', boxShadow:'0 1px 3px rgba(0,0,0,.2)', transform:`translateX(${on?18:0}px)`, transition:'.18s var(--ease)' }} /></button>
  );
  return (
    <div style={{ maxWidth:680, display:'flex', flexDirection:'column', gap:18 }}>
      <div className="card card-pad">
        <div style={{ display:'flex', alignItems:'center', gap:16, marginBottom:20 }}>
          <Avatar initials={partner.initials} size={56} />
          <div><div style={{ fontSize:17, fontWeight:600, color:'var(--ink)' }}>{partner.firstName} {partner.lastName}</div>
            <div style={{ fontSize:13.5, color:'var(--muted)' }}>{partner.company} · Partenaire depuis {partner.memberSince}</div></div>
        </div>
        <div style={{ display:'grid', gridTemplateColumns: mobile?'1fr':'1fr 1fr', gap:16 }}>
          <div className="field"><label className="label">Société</label><input className="input" defaultValue={partner.company} /></div>
          <div className="field"><label className="label">Type de partenaire</label><input className="input" defaultValue={partner.type} /></div>
          <div className="field"><label className="label">Email</label><input className="input" defaultValue={partner.email} /></div>
          <div className="field"><label className="label">Ville</label><input className="input" defaultValue={partner.city} /></div>
          <div className="field" style={{ gridColumn:'1/-1' }}><label className="label">IBAN <span style={{ color:'var(--faint)', fontWeight:400 }}>· versement des commissions</span></label>
            <input className="input mono" defaultValue="FR76 3000 4008 2800 0123 4567 891" /></div>
        </div>
        <button className="btn btn-primary btn-sm" style={{ marginTop:18, height:40 }}>Enregistrer les modifications</button>
      </div>
      <div className="card card-pad">
        <span className="section-title" style={{ fontSize:16 }}>Notifications</span>
        {[['leads','Évolution de mes leads','Recevoir un email à chaque changement de statut'],
          ['commissions','Versement de commissions','Être notifié lorsqu\'une commission est versée'],
          ['newsletter','Actualités LBC','Nouveautés, événements et conseils partenaires']].map(([k,t,d])=>(
          <div key={k} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:16, padding:'14px 0', borderBottom:'1px solid var(--border)' }}>
            <div><div style={{ fontSize:14, fontWeight:500, color:'var(--ink)' }}>{t}</div>
              <div style={{ fontSize:12.5, color:'var(--muted)', marginTop:2 }}>{d}</div></div>
            <Toggle on={notif[k]} onClick={()=>setNotif(s=>({ ...s, [k]:!s[k] }))} />
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ResourcesPage, SettingsPage });