// screens/Parametres.jsx — settings page (roles, localization, preferences).

function Parametres() {
  const [role, setRole] = React.useState('Admin');
  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1>Paramètres</h1>
          <div className="sub">Profil, préférences et droits d'accès</div>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'240px 1fr', gap:20 }}>
        <div className="card" style={{ padding:8 }}>
          {[
            ['Profil', 'user', true],
            ['Localisation', 'globe', false],
            ['Notifications', 'bell', false],
            ['Sécurité', 'shield', false],
            ['Accès & rôles', 'key', false],
            ['Facturation', 'credit-card', false],
            ['API & intégrations', 'plug', false],
          ].map(([l, ic, on]) => (
            <button key={l} style={{
              display:'flex', width:'100%', alignItems:'center', gap:10,
              height:38, padding:'0 12px', borderRadius:8, textAlign:'left',
              background: on ? 'var(--app-warm-soft)' : 'transparent',
              color: on ? '#C2410C' : 'var(--app-text-2)',
              font:'600 13px/1 var(--m-font-sans)'
            }}>
              <i data-lucide={ic} style={{ width:14, height:14 }}></i>{l}
            </button>
          ))}
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
          <Widget title="Profil utilisateur">
            <div style={{ display:'flex', alignItems:'center', gap:18, marginBottom:20 }}>
              <div className="avatar" style={{ width:64, height:64, background:'linear-gradient(135deg,#C2410C,#D97706)', fontSize:18 }}>AB</div>
              <div style={{ flex:1 }}>
                <div style={{ font:'700 15px/1 var(--m-font-sans)', color:'var(--app-text)' }}>Anas Bensaïd</div>
                <div style={{ font:'500 12px/1 var(--m-font-sans)', color:'var(--app-text-3)', marginTop:4 }}>anas.bensaid@atlas-crm.ma</div>
              </div>
              <button className="btn btn-ghost"><i data-lucide="upload" style={{width:14,height:14}}></i> Changer photo</button>
            </div>

            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
              {[
                ['Nom complet', 'Anas Bensaïd'],
                ['Adresse email', 'anas.bensaid@atlas-crm.ma'],
                ['Téléphone', '+212 661-00-00-00'],
                ['Ville', 'Casablanca'],
              ].map(([l,v])=>(
                <div key={l}>
                  <label style={{ display:'block', font:'600 12px/1 var(--m-font-sans)', color:'var(--app-text-2)', marginBottom:6 }}>{l}</label>
                  <input className="input" defaultValue={v} />
                </div>
              ))}
            </div>
          </Widget>

          <Widget title="Localisation & devise">
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14 }}>
              <Field label="Langue">
                <select className="input">
                  <option>Français (Maroc)</option><option>العربية</option><option>English</option>
                </select>
              </Field>
              <Field label="Devise">
                <select className="input"><option>MAD — Dirham marocain</option><option>EUR — Euro</option><option>USD — Dollar</option></select>
              </Field>
              <Field label="Format date">
                <select className="input"><option>JJ/MM/AAAA</option><option>AAAA-MM-JJ</option></select>
              </Field>
              <Field label="Fuseau horaire">
                <select className="input"><option>Africa/Casablanca (GMT+1)</option></select>
              </Field>
              <Field label="TVA par défaut">
                <select className="input"><option>20% (standard Maroc)</option><option>14%</option><option>10%</option><option>7%</option></select>
              </Field>
              <Field label="Format téléphone">
                <input className="input" defaultValue="+212 6XX-XX-XX-XX" />
              </Field>
            </div>
          </Widget>

          <Widget title="Accès & rôles"
            action={<button className="btn btn-warm"><i data-lucide="user-plus" style={{width:14,height:14}}></i> Inviter</button>}>
            <div style={{ display:'flex', gap:8, marginBottom:14 }}>
              {['Admin', 'Manager', 'Sales'].map(r=>(
                <button key={r} onClick={()=>setRole(r)} style={{
                  height:36, padding:'0 14px', borderRadius:8,
                  border:'1px solid '+(role===r?'var(--app-warm)':'var(--app-border)'),
                  background: role===r?'var(--app-warm-soft)':'var(--app-surface)',
                  color: role===r?'#C2410C':'var(--app-text-2)',
                  font:'600 13px/1 var(--m-font-sans)'
                }}>{r}</button>
              ))}
            </div>

            <table className="m-table">
              <thead><tr><th>Permission</th><th style={{textAlign:'center'}}>Lecture</th><th style={{textAlign:'center'}}>Écriture</th><th style={{textAlign:'center'}}>Suppression</th></tr></thead>
              <tbody>
                {[
                  ['Dashboard global',         true,  role!=='Sales',   role==='Admin'],
                  ['CRM — Clients',            true,  true,             role==='Admin'],
                  ['CRM — Pipeline',           true,  true,             role!=='Sales'],
                  ['Produits & Catalogue',     true,  role!=='Sales',   role==='Admin'],
                  ['Services',                 true,  role!=='Sales',   role==='Admin'],
                  ['Inventaire — Stocks',      true,  role!=='Sales',   role==='Admin'],
                  ['Paramètres système',       role==='Admin', role==='Admin', role==='Admin'],
                ].map(([p,r,w,d])=>(
                  <tr key={p}>
                    <td style={{ color:'var(--app-text)', fontWeight:600 }}>{p}</td>
                    <td style={{ textAlign:'center' }}><Check on={r}/></td>
                    <td style={{ textAlign:'center' }}><Check on={w}/></td>
                    <td style={{ textAlign:'center' }}><Check on={d}/></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Widget>
        </div>
      </div>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div>
      <label style={{ display:'block', font:'600 12px/1 var(--m-font-sans)', color:'var(--app-text-2)', marginBottom:6 }}>{label}</label>
      {children}
    </div>
  );
}

function Check({ on }) {
  return on
    ? <i data-lucide="check" style={{ width:16, height:16, color:'#19C781' }}></i>
    : <i data-lucide="minus" style={{ width:16, height:16, color:'var(--app-text-4)' }}></i>;
}

Object.assign(window, { Parametres });