// screens/Services.jsx — list of services with pricing in MAD, duration, active toggle.

function Services() {
  const [services, setServices] = React.useState(() => SERVICES.map(s => ({...s})));
  const [search, setSearch] = React.useState('');
  const [cat, setCat] = React.useState('Toutes');
  const cats = ['Toutes', ...new Set(SERVICES.map(s=>s.cat))];

  const toggle = (id) => setServices(list => list.map(s => s.id===id ? {...s, active: !s.active} : s));
  const filtered = services.filter(s =>
    (cat==='Toutes' || s.cat===cat) &&
    (search==='' || s.name.toLowerCase().includes(search.toLowerCase()))
  );

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1>Services</h1>
          <div className="sub">{services.length} services · {services.filter(s=>s.active).length} actifs</div>
        </div>
        <div className="spacer"></div>
        <button className="btn btn-ghost"><i data-lucide="download" style={{width:14,height:14}}></i> Export PDF</button>
        <button className="btn btn-warm"><i data-lucide="plus" style={{width:14,height:14}}></i> Nouveau service</button>
      </div>

      {/* KPI mini-row */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14 }}>
        {[
          ['Services actifs',     services.filter(s=>s.active).length, 'briefcase', '#19C781'],
          ['Tarif moyen',         fmtMAD(services.reduce((s,x)=>s+x.price,0)/services.length, {compact:true}), 'tag', '#C2410C'],
          ['Catégories',          new Set(services.map(s=>s.cat)).size, 'layers', '#1379F0'],
          ['Souscriptions actives', '142', 'check-circle', '#0F766E'],
        ].map(([l,v,ic,ac])=>(
          <div key={l} className="card lift" style={{ padding:18 }}>
            <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:10 }}>
              <div style={{ width:32, height:32, borderRadius:8, background:`${ac}1A`, color:ac, display:'grid', placeItems:'center' }}>
                <i data-lucide={ic} style={{width:15,height:15}}></i>
              </div>
              <span className="eyebrow">{l}</span>
            </div>
            <div style={{ font:'700 22px/1 var(--m-font-sans)', color:'var(--app-text)', letterSpacing:'-.02em' }}>{v}</div>
          </div>
        ))}
      </div>

      <Widget>
        <div style={{ display:'flex', gap:10, marginBottom:18, flexWrap:'wrap', alignItems:'center' }}>
          <div style={{ position:'relative', flex:'1 1 260px', minWidth:240 }}>
            <i data-lucide="search" style={{ position:'absolute', left:12, top:11, width:14, height:14, color:'var(--app-text-4)' }}></i>
            <input className="input" placeholder="Rechercher un service…" value={search} onChange={e=>setSearch(e.target.value)} style={{ paddingLeft:34 }} />
          </div>
          {cats.map(c=>(
            <button key={c} onClick={()=>setCat(c)} style={{
              height:36, padding:'0 12px', borderRadius:8,
              border:'1px solid '+(cat===c?'var(--app-warm)':'var(--app-border)'),
              background: cat===c?'var(--app-warm-soft)':'var(--app-surface)',
              color: cat===c?'#C2410C':'var(--app-text-2)',
              font:'600 12px/1 var(--m-font-sans)'
            }}>{c}</button>
          ))}
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          {filtered.map(s => (
            <div key={s.id} className="lift" style={{
              display:'flex', alignItems:'center', gap:18, padding:18,
              border:'1px solid var(--app-border)', borderRadius:10, background:'var(--app-surface)'
            }}>
              <div style={{ width:48, height:48, borderRadius:10, background:'var(--app-warm-soft)', color:'#C2410C', display:'grid', placeItems:'center', flexShrink:0 }}>
                <i data-lucide={
                  s.cat==='Conseil' ? 'briefcase' : s.cat==='Maintenance' ? 'wrench' :
                  s.cat==='Logistique' ? 'truck' : s.cat==='Formation' ? 'graduation-cap' : 'headphones'
                } style={{ width:20, height:20 }}></i>
              </div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6 }}>
                  <span style={{ font:'700 14px/1.2 var(--m-font-sans)', color:'var(--app-text)' }}>{s.name}</span>
                  <span className="pill" style={{ background:'var(--app-surface-2)', color:'var(--app-text-2)', border:'1px solid var(--app-border)' }}>{s.cat}</span>
                </div>
                <div style={{ font:'500 12px/1.5 var(--m-font-sans)', color:'var(--app-text-3)' }}>{s.desc}</div>
              </div>
              <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', gap:4, minWidth:140 }}>
                <span style={{ font:'700 16px/1 var(--m-font-sans)', color:'#C2410C', letterSpacing:'-.01em' }}>
                  {fmtMAD(s.price, {compact:true})} <span style={{ font:'500 11px/1 var(--m-font-sans)', color:'var(--app-text-3)' }}>{s.unit}</span>
                </span>
                <span style={{ font:'500 11px/1 var(--m-font-sans)', color:'var(--app-text-3)', display:'inline-flex', alignItems:'center', gap:4 }}>
                  <i data-lucide="clock" style={{ width:11, height:11 }}></i>{s.duration}
                </span>
              </div>
              <Toggle on={s.active} onClick={()=>toggle(s.id)} />
              <button className="btn btn-ghost btn-icon"><i data-lucide="more-horizontal" style={{width:16,height:16}}></i></button>
            </div>
          ))}
        </div>
      </Widget>
    </div>
  );
}

function Toggle({ on, onClick }) {
  return (
    <button onClick={onClick} style={{
      width:42, height:24, borderRadius:99,
      background: on ? '#19C781' : 'var(--app-border-2)',
      position:'relative', transition:'background 140ms ease-out',
      flexShrink:0
    }}>
      <span style={{
        position:'absolute', top:2, left: on ? 20 : 2, width:20, height:20, borderRadius:99,
        background:'#fff', boxShadow:'0 1px 3px rgba(0,0,0,.2)',
        transition:'left 140ms ease-out'
      }}></span>
    </button>
  );
}

Object.assign(window, { Services });