/* ===== Cadastros: vendedores e seus clientes, bases de carregamento ===== */
const intIn=(s)=>parseInt(String(s).replace(/\D/g,''),10);
const decIn=(s)=>parseFloat(String(s).replace(',','.'));

function SellerForm({onSave,onCancel}) {
  const [f,setF]=useState({name:'',region:'',meta:''});
  const [err,setErr]=useState('');
  const save=()=>{
    if(!f.name.trim()) return setErr('Informe o nome do vendedor.');
    const meta=intIn(f.meta)||0;
    onSave({id:newId('V'),name:f.name.trim(),region:f.region.trim()||'A definir',meta});
  };
  return <section className="panel form-panel"><div className="panel-title"><div><h2>Novo vendedor</h2><p>Meta em litros por mês</p></div></div><div className="form-grid">
    <label className="field">Nome<input id="nv-name" value={f.name} onChange={e=>{setF({...f,name:e.target.value});setErr('');}} placeholder="Ex.: Camila Rocha"/></label>
    <label className="field">Região de atuação<input id="nv-region" value={f.region} onChange={e=>setF({...f,region:e.target.value})} placeholder="Ex.: Bebedouro e Viradouro"/></label>
    <label className="field">Meta mensal (L)<input id="nv-meta" inputMode="numeric" value={f.meta} onChange={e=>setF({...f,meta:e.target.value})} placeholder="Ex.: 1.000.000"/></label>
  </div>{err&&<p className="form-err pad" role="alert">{err}</p>}<div className="form-actions"><button className="secondary" onClick={onCancel}>Cancelar</button><button className="primary" onClick={save}>Salvar vendedor</button></div></section>;
}

function ClientForm({sellers,onSave,onCancel}) {
  const [f,setF]=useState({name:'',city:'Barretos',postos:'1',vol:'',margem:'0,10',carga:'30.000',atraso:'0',compras:'10',sellerId:sellers[0]?sellers[0].id:''});
  const [err,setErr]=useState('');
  const up=(k)=>(e)=>{setF({...f,[k]:e.target.value});setErr('');};
  const save=()=>{
    const vol=intIn(f.vol), carga=intIn(f.carga), postos=intIn(f.postos)||1, margem=decIn(f.margem);
    if(!f.name.trim()) return setErr('Informe o nome do cliente.');
    if(!vol) return setErr('Informe o volume comprado por mês, em litros.');
    if(!(margem>0&&margem<1)) return setErr('Informe a margem em R$ por litro, por exemplo 0,10.');
    if(!carga) return setErr('Informe a carga média por entrega, em litros.');
    if(!f.sellerId) return setErr('Cadastre um vendedor antes de cadastrar clientes.');
    onSave({id:newId('C'),name:f.name.trim(),city:f.city,sellerId:f.sellerId,postos,vol,margem,carga,atraso:intIn(f.atraso)||0,compras:intIn(f.compras)||0,note:''});
  };
  return <section className="panel form-panel"><div className="panel-title"><div><h2>Novo cliente</h2><p>O rating é calculado na hora com estes dados</p></div></div><div className="form-grid">
    <label className="field">Nome do cliente<input id="nc-name" value={f.name} onChange={up('name')} placeholder="Ex.: Posto Estrela"/></label>
    <label className="field">Cidade<select id="nc-city" value={f.city} onChange={up('city')}>{Object.keys(cities).map(c=><option key={c}>{c}</option>)}</select></label>
    <label className="field">Vendedor responsável<select id="nc-seller" value={f.sellerId} onChange={up('sellerId')}>{sellers.map(s=><option key={s.id} value={s.id}>{s.name}</option>)}</select></label>
    <label className="field">Postos<input id="nc-postos" inputMode="numeric" value={f.postos} onChange={up('postos')}/></label>
    <label className="field">Volume por mês (L)<input id="nc-vol" inputMode="numeric" value={f.vol} onChange={up('vol')} placeholder="Ex.: 300.000"/></label>
    <label className="field">Margem (R$/L)<input id="nc-margem" inputMode="decimal" value={f.margem} onChange={up('margem')}/></label>
    <label className="field">Carga média por entrega (L)<input id="nc-carga" inputMode="numeric" value={f.carga} onChange={up('carga')}/></label>
    <label className="field">Atraso médio no pagamento (dias)<input id="nc-atraso" inputMode="numeric" value={f.atraso} onChange={up('atraso')}/></label>
    <label className="field">Compras por mês<input id="nc-compras" inputMode="numeric" value={f.compras} onChange={up('compras')}/></label>
  </div>{err&&<p className="form-err pad" role="alert">{err}</p>}<div className="form-actions"><button className="secondary" onClick={onCancel}>Cancelar</button><button className="primary" onClick={save}>Salvar cliente</button></div></section>;
}

function BaseForm({onSave,onCancel}) {
  const [f,setF]=useState({name:'',kind:'Usina',city:'Colômbia',products:['Etanol'],loadH:'0,75'});
  const [err,setErr]=useState('');
  const togg=(p)=>setF({...f,products:f.products.includes(p)?f.products.filter(x=>x!==p):[...f.products,p]});
  const save=()=>{
    const loadH=decIn(f.loadH);
    if(!f.name.trim()) return setErr('Informe o nome da base.');
    if(!f.products.length) return setErr('Marque pelo menos um produto carregado nesta base.');
    if(!(loadH>0&&loadH<12)) return setErr('Informe o tempo de carregamento em horas, por exemplo 0,75.');
    onSave({id:newId('B'),name:f.name.trim(),kind:f.kind,city:f.city,products:f.products,loadH});
  };
  return <section className="panel form-panel"><div className="panel-title"><div><h2>Nova base de carregamento</h2><p>Entra na hora na sugestão de caminhão</p></div></div><div className="form-grid">
    <label className="field">Nome<input id="nb-name" value={f.name} onChange={e=>{setF({...f,name:e.target.value});setErr('');}} placeholder="Ex.: Usina Colômbia"/></label>
    <label className="field">Tipo<select id="nb-kind" value={f.kind} onChange={e=>setF({...f,kind:e.target.value})}><option>Usina</option><option>Terminal</option><option>Base própria</option></select></label>
    <label className="field">Cidade<select id="nb-city" value={f.city} onChange={e=>setF({...f,city:e.target.value})}>{Object.keys(cities).map(c=><option key={c}>{c}</option>)}</select></label>
    <label className="field">Tempo de carregamento (horas)<input id="nb-load" inputMode="decimal" value={f.loadH} onChange={e=>setF({...f,loadH:e.target.value})}/></label>
    <fieldset className="field prod-set"><legend>Produtos carregados aqui</legend>{PRODUCTS.map(p=><label key={p} className="check"><input type="checkbox" id={`nb-${p}`} checked={f.products.includes(p)} onChange={()=>togg(p)}/> {p}</label>)}</fieldset>
  </div>{err&&<p className="form-err pad" role="alert">{err}</p>}<div className="form-actions"><button className="secondary" onClick={onCancel}>Cancelar</button><button className="primary" onClick={save}>Salvar base</button></div></section>;
}

function Admin({sellers,setSellers,clients,setClients,bases,setBases,notify,tab,setTab,resetDemo}) {
  const [form,setForm]=useState(null);
  const garage=(bases.find(b=>b.garage)||{city:'Barretos'}).city;
  const rated=useMemo(()=>rateClients(clients,sellers,garage),[clients,sellers,garage]);
  const orphan=rated.filter(c=>!sellers.some(s=>s.id===c.sellerId));
  const move=(cid,sid)=>{ const c=clients.find(x=>x.id===cid), s=sellers.find(x=>x.id===sid); setClients(list=>list.map(x=>x.id===cid?{...x,sellerId:sid}:x)); notify(`${c.name} agora é da carteira de ${s.name}.`); };
  const removeSeller=(s)=>{ setSellers(list=>list.filter(x=>x.id!==s.id)); notify(`Vendedor ${s.name} removido.`); };
  const removeBase=(b)=>{ setBases(list=>list.filter(x=>x.id!==b.id)); notify(`${b.name} removida das bases.`); };
  return <div className="content admin-content">
    <div className="page-heading"><div><p>ADMINISTRAÇÃO</p><h1>Cadastros</h1><span>Vendedores e suas carteiras de clientes, e as bases onde os caminhões carregam.</span></div><div className="heading-actions"><button className="secondary" onClick={resetDemo}>Restaurar dados de demonstração</button></div></div>
    <div className="log-tabs"><button className={tab==='vendedores'?'active':''} onClick={()=>{setTab('vendedores');setForm(null);}}>Vendedores e clientes <b>{sellers.length}</b></button><button className={tab==='bases'?'active':''} onClick={()=>{setTab('bases');setForm(null);}}>Bases de carregamento <b>{bases.length}</b></button></div>
    <p className="store-note">Os cadastros ficam salvos <b>neste navegador</b>. Ainda não há banco de dados: outra pessoa ou outro aparelho vê os dados de demonstração.</p>
    {tab==='vendedores'?<>
      <div className="toolbar"><button className="primary" onClick={()=>setForm('seller')}>＋ Novo vendedor</button><button className="secondary" onClick={()=>setForm('client')}>＋ Novo cliente</button></div>
      {form==='seller'&&<SellerForm onCancel={()=>setForm(null)} onSave={s=>{setSellers(l=>[...l,s]);setForm(null);notify(`Vendedor ${s.name} cadastrado.`);}}/>}
      {form==='client'&&<ClientForm sellers={sellers} onCancel={()=>setForm(null)} onSave={c=>{setClients(l=>[...l,c]);setForm(null);notify(`Cliente ${c.name} cadastrado.`);}}/>}
      <div className="seller-grid">{sellers.map(s=>{
        const mine=rated.filter(c=>c.sellerId===s.id).sort((a,b)=>b.result-a.result);
        const vol=mine.reduce((t,c)=>t+c.vol,0), res=mine.reduce((t,c)=>t+c.result,0), pm=s.meta?Math.round(vol/s.meta*100):0;
        return <section key={s.id} className="panel seller-card">
          <header><div className="avatar">{s.name.split(' ').map(w=>w[0]).slice(0,2).join('')}</div><div><h2>{s.name}</h2><p>{s.region}</p></div>{!mine.length&&<button className="link-btn danger" onClick={()=>removeSeller(s)}>Remover</button>}</header>
          <div className="seller-stats"><p><span>Clientes</span><b>{mine.length}</b></p><p><span>Volume/mês</span><b>{mi(vol)} L</b></p><p><span>Resultado/mês</span><b>{brl(res)}</b></p></div>
          <div className="meta-line"><span>Meta {s.meta?`${mi(s.meta)} L`:'não definida'}</span><b>{s.meta?`${pm}%`:''}</b></div>
          <div className="meter"><i className={pm>=100?'ok':''} style={{width:`${clamp(pm)}%`}}/></div>
          <ul className="client-list">{mine.map(c=><li key={c.id}><span className={`rating r${c.rating}`}>{c.rating}</span><div><b>{c.name}</b><small>{c.city} · {fmt(c.vol)} L/mês · {brl(c.result)}/mês</small></div><label className="move"><span className="sr">Transferir {c.name}</span><select id={`mv-${c.id}`} value={c.sellerId} onChange={e=>move(c.id,e.target.value)}>{sellers.map(x=><option key={x.id} value={x.id}>{x.id===s.id?'Transferir para…':x.name}</option>)}</select></label></li>)}{!mine.length&&<li className="empty">Nenhum cliente nesta carteira.</li>}</ul>
        </section>;})}
        {orphan.length>0&&<section className="panel seller-card orphan"><header><div className="avatar">?</div><div><h2>Sem vendedor</h2><p>Clientes de vendedores removidos</p></div></header><ul className="client-list">{orphan.map(c=><li key={c.id}><span className={`rating r${c.rating}`}>{c.rating}</span><div><b>{c.name}</b><small>{c.city} · {fmt(c.vol)} L/mês</small></div><label className="move"><span className="sr">Atribuir {c.name}</span><select id={`mv-${c.id}`} value="" onChange={e=>move(c.id,e.target.value)}><option value="">Atribuir a…</option>{sellers.map(x=><option key={x.id} value={x.id}>{x.name}</option>)}</select></label></li>)}</ul></section>}
      </div>
    </>:<>
      <div className="toolbar"><button className="primary" onClick={()=>setForm('base')}>＋ Nova base</button></div>
      {form==='base'&&<BaseForm onCancel={()=>setForm(null)} onSave={b=>{setBases(l=>[...l,b]);setForm(null);notify(`${b.name} cadastrada. Já entra na sugestão de caminhão.`);}}/>}
      <div className="bases-grid">
        <section className="panel map-panel"><div className="panel-title"><div><h2>Onde os caminhões carregam</h2><p>B = base própria · T = terminal · U = usina</p></div></div><RegionMap list={[]} bases={bases} showClients={false}/></section>
        <div className="base-list">{bases.map(b=><section key={b.id} className="panel base-card"><header><span className={`base-ico k-${b.kind==='Usina'?'u':'b'}`}>{baseLetter[b.kind]||'B'}</span><div><h2>{b.name}{b.garage&&<em>garagem</em>}</h2><p>{b.kind} · {b.city} · {dist(garage,b.city)} km da garagem</p></div>{!b.garage&&<button className="link-btn danger" onClick={()=>removeBase(b)}>Remover</button>}</header><div className="chips">{b.products.map(p=><span key={p} className="chip">{p}</span>)}</div><p className="base-load">Carregamento: <b>{hrs(b.loadH)}</b></p></section>)}</div>
      </div>
    </>}
  </div>;
}