/* ===== Modal — Nuovo cantiere ===== */
const PALETTE = ['#bd5d2e','#b34a37','#7f8a4a','#c79233','#4a7fb5','#6b5ea8','#3a9e7e','#b5724a'];

const NuovoCantiere = ({defaultFase, onClose, onAdd}) => {
  const [tipo,        setTipo]        = React.useState(defaultFase || 'cantiere');
  const [insegna,     setInsegna]     = React.useState('');
  const [via,         setVia]         = React.useState('');
  const [struttura,   setStruttura]   = React.useState('');
  const [supVendita,  setSupVendita]  = React.useState('');
  const [supMagazzino,setSupMagazzino]= React.useState('');
  const [progettista, setProgettista] = React.useState('');
  const [dataInizio,  setDataInizio]  = React.useState('');
  const [dataFine,    setDataFine]    = React.useState('');
  const [dataArrivo,  setDataArrivo]  = React.useState('');
  const [color,       setColor]       = React.useState(PALETTE[0]);

  const glyph = insegna.trim()
    ? insegna.trim().split(/\s+/).map(w=>w[0]).join('').toUpperCase().slice(0,2)
    : '??';

  const toIT = iso => { const p=iso.split('-'); return `${p[2]}/${p[1]}/${p[0]}`; };
  const toDl = iso => {
    const ts=new Date(iso).getTime();
    const days=Math.round((ts-Date.now())/86400000);
    const label=new Date(iso).toLocaleDateString('it-IT',{day:'2-digit',month:'short'});
    return {ts,label,days};
  };

  const handleSubmit = () => {
    if(!insegna.trim()) return;

    const fase = tipo==='cantiere' ? 'cantiere' : 'preventivo';
    const place = [via.trim(), struttura.trim()].filter(Boolean).join(' · ') || '—';

    const dlLabel = tipo==='cantiere' ? 'Consegna cantiere'
                  : tipo==='gara'     ? 'GARA — consegna preventivo'
                  :                    'Consegna preventivo';
    const nextDeadline = dataFine
      ? {label:dlLabel, in:toDl(dataFine), gara:tipo==='gara'}
      : {label:'Da definire', in:{ts:Date.now()+30*86400000,label:'—',days:30}, gara:tipo==='gara'};

    const info = {};
    if(supVendita)   info.supVendita   = supVendita + ' m²';
    if(supMagazzino) info.supMagazzino = supMagazzino + ' m²';
    if(progettista)  info.progettista  = progettista;
    if(tipo==='cantiere'){
      if(dataInizio) info.dataInizio = toIT(dataInizio);
      if(dataFine)   info.dataFine   = toIT(dataFine);
    } else {
      if(dataArrivo) info.dataInizio = toIT(dataArrivo);
      if(dataFine)   info.dataFine   = toIT(dataFine);
    }

    const id = insegna.trim().toLowerCase()
      .replace(/[àáâãä]/g,'a').replace(/[èéêë]/g,'e').replace(/[ìíîï]/g,'i')
      .replace(/[òóôõö]/g,'o').replace(/[ùúûü]/g,'u')
      .replace(/[^a-z0-9]+/g,'-').replace(/^-|-$/g,'')
      + '-' + Date.now().toString(36);

    onAdd({
      id, _order: Date.now(),
      insegna: insegna.trim(),
      nome: insegna.trim() + (place !== '—' ? ' — ' + place : ''),
      place, fase, tipo: tipo==='gara' ? 'gara' : 'diretta',
      color, glyph,
      progressNote: '',
      nextDeadline,
      progress: 0,
      preventivi:[], consegne:[], todos:[], note:[], diario:[],
      crono:[], ditte:[], appuntamenti:[], documenti:[], dati:[],
      sopralluogo: (window.SOPRALLUOGO||[]).map((t,i)=>({id:i,t,done:false,note:''})),
      cronoDays:{}, info,
    });
    onClose();
  };

  React.useEffect(()=>{
    const fn = e => { if(e.key==='Escape') onClose(); };
    window.addEventListener('keydown', fn);
    return ()=>window.removeEventListener('keydown', fn);
  },[]);

  const TIPI = [{v:'cantiere',l:'Cantiere'},{v:'preventivo',l:'Preventivo'},{v:'gara',l:'Gara'}];
  const inputStyle = {width:'100%'};
  const rowHalf = {display:'grid',gridTemplateColumns:'1fr 1fr',gap:10};

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>

        <div className="modal-hd">
          <b>Nuova voce</b>
          <button className="btn ghost" style={{padding:'4px 8px',color:'var(--ink3)',fontSize:16}} onClick={onClose}>✕</button>
        </div>

        <div className="modal-body">

          {/* Tipo */}
          <div className="form-row">
            <label>Tipo</label>
            <div style={{display:'flex',gap:6}}>
              {TIPI.map(({v,l})=>(
                <button key={v} className={'btn sm '+(tipo===v?'primary':'ghost')}
                  style={{flex:1,justifyContent:'center'}} onClick={()=>setTipo(v)}>{l}</button>
              ))}
            </div>
          </div>

          {/* Live preview */}
          <div style={{display:'flex',alignItems:'center',gap:14,padding:'12px 14px',background:'var(--card2)',borderRadius:'var(--r)',border:'1px solid var(--line)'}}>
            <Glyph c={color} glyph={glyph} size={48} r={12} fs={16}/>
            <div>
              <div style={{fontWeight:700,fontSize:15,lineHeight:1.2}}>{insegna.trim()||<span style={{color:'var(--ink3)'}}>Nome cliente</span>}</div>
              <div style={{fontSize:12,color:'var(--ink3)',marginTop:3}}>{[via,struttura].filter(Boolean).join(' · ')||'Via / struttura da definire'}</div>
            </div>
          </div>

          {/* Nome */}
          <div className="form-row">
            <label>Cliente / Insegna</label>
            <input autoFocus placeholder="es. Nike, Calzedonia, Boutique Rossi…" style={inputStyle}
              value={insegna} onChange={e=>setInsegna(e.target.value)}
              onKeyDown={e=>e.key==='Enter'&&handleSubmit()}/>
          </div>

          {/* Via + Struttura */}
          <div className="form-row">
            <label>Indirizzo e struttura</label>
            <div style={rowHalf}>
              <input placeholder="Via / città" value={via} onChange={e=>setVia(e.target.value)}/>
              <input placeholder="Outlet, C.C., Centro storico…" value={struttura} onChange={e=>setStruttura(e.target.value)}/>
            </div>
          </div>

          {/* Superfici + Progettista */}
          <div className="form-row">
            <label>Superfici (m²)</label>
            <div style={rowHalf}>
              <input placeholder="Area vendita" value={supVendita} onChange={e=>setSupVendita(e.target.value)}/>
              <input placeholder="Magazzino" value={supMagazzino} onChange={e=>setSupMagazzino(e.target.value)}/>
            </div>
          </div>

          <div className="form-row">
            <label>Tecnico / Progettista</label>
            <input placeholder="es. Ing. M. Ferrari" style={inputStyle}
              value={progettista} onChange={e=>setProgettista(e.target.value)}/>
          </div>

          {/* Date condizionali */}
          <div className="form-row">
            <label>{tipo==='cantiere' ? 'Date cantiere' : 'Date preventivo'}</label>
            <div style={rowHalf}>
              <div>
                <div style={{fontSize:11,color:'var(--ink-3)',marginBottom:4}}>{tipo==='cantiere'?'Data inizio':'Arrivo preventivo'}</div>
                <input type="date" style={inputStyle} value={dataInizio} onChange={e=>setDataInizio(e.target.value)}/>
              </div>
              <div>
                <div style={{fontSize:11,color:'var(--ink-3)',marginBottom:4}}>Data consegna</div>
                <input type="date" style={inputStyle} value={dataFine} onChange={e=>setDataFine(e.target.value)}/>
              </div>
            </div>
          </div>

          {/* Colore */}
          <div className="form-row">
            <label>Colore</label>
            <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
              {PALETTE.map(c=>(
                <div key={c} onClick={()=>setColor(c)} style={{
                  width:28,height:28,borderRadius:7,background:c,cursor:'pointer',
                  outline:color===c?'2.5px solid var(--ink)':'2.5px solid transparent',
                  outlineOffset:2,transition:'.1s'
                }}/>
              ))}
            </div>
          </div>

        </div>

        <div className="modal-foot">
          <button className="btn ghost" onClick={onClose}>Annulla</button>
          <button className="btn primary" onClick={handleSubmit}
            disabled={!insegna.trim()} style={{opacity:insegna.trim()?1:.5}}>
            Crea {tipo} →
          </button>
        </div>

      </div>
    </div>
  );
};

/* ===== Home — Plancia di comando ===== */
const HomeView = ({data, onOpen, onPatch, onAdd}) => {
  const [modal, setModal] = React.useState(null); // null | 'cantiere' | 'preventivo' | 'gara'

  const cantieri = data.cantieri;
  const isCantiere = c => c.fase==="cantiere";
  const isPrev = c => c.fase==="preventivo";
  const attivi = cantieri.filter(isCantiere);
  const prev   = cantieri.filter(isPrev);

  // countdown events: scadenze preventivi/gare + appuntamenti cantieri, solo 0-7 gg
  const events = [
    ...prev.map(c=>({
      c, label:c.nextDeadline.label, days:c.nextDeadline.in.days,
      dateLabel:c.nextDeadline.in.label, ora:null,
      kind: c.tipo==="gara"?"urgent":"soon", tag: c.tipo==="gara"?"gara":"preventivo",
    })),
    ...attivi.flatMap(c=>(c.appuntamenti||[]).map(a=>({
      c, label:a.t, days:a.data.days, dateLabel:a.data.label, ora:a.ora||null,
      kind:"ok", tag:"appuntamento",
    }))),
  ].filter(e=>e.days>=0&&e.days<=30).sort((a,b)=>a.days-b.days);

  // scadenze critiche: oggi o domani (banner alert nella home)
  const critici=[
    ...prev.filter(c=>c.nextDeadline.in.days>=0&&c.nextDeadline.in.days<=1).map(c=>({
      c, label:c.nextDeadline.label, days:c.nextDeadline.in.days,
      tag:c.tipo==="gara"?"GARA":"Preventivo"
    })),
    ...attivi.flatMap(c=>(c.appuntamenti||[]).filter(a=>a.data.days>=0&&a.data.days<=1).map(a=>({
      c, label:a.t, days:a.data.days, tag:"Appuntamento"
    }))),
  ].sort((a,b)=>a.days-b.days);

  // aggregate urgent todos
  const urgenti=[];
  cantieri.forEach(c=>c.todos.forEach(t=>{ if(t.urgent&&!t.done) urgenti.push({...t,c}); }));
  urgenti.sort((a,b)=>(a.due?a.due.days:99)-(b.due?b.due.days:99));

  // aggregate pending preventivi
  const solleciti=[];
  cantieri.forEach(c=>c.preventivi.forEach(p=>{ if(p.stato==="attesa") solleciti.push({...p,c}); }));
  solleciti.sort((a,b)=>a.inviato.days-b.inviato.days);

  const toggleTodo=(cid,tid)=>onPatch(cid,c=>({...c,todos:c.todos.map(t=>t.id===tid?{...t,done:!t.done}:t)}));
  const sollecita=(cid,pid)=>onPatch(cid,c=>({...c,preventivi:c.preventivi.map(p=>p.id===pid?{...p,inviato:{days:0,label:"oggi"},justSolleciato:true}:p)}));

  const today = new Date();
  const greeting = (()=>{const h=today.getHours();return h<12?"Buongiorno":h<18?"Buon pomeriggio":"Buona sera";})();
  const dateStr = today.toLocaleDateString('it-IT',{weekday:'long',day:'numeric',month:'long',year:'numeric'});

  const totalUrgenti = cantieri.reduce((n,c)=>n+c.todos.filter(t=>t.urgent&&!t.done).length,0);
  const totalConsegne = cantieri.reduce((n,c)=>n+(c.consegne||[]).filter(d=>d.stato!=="consegnato").length,0);

  const CRowCantiere = ({c}) => {
    const open=c.todos.filter(t=>!t.done).length;
    const urg=c.todos.filter(t=>t.urgent&&!t.done).length;
    const dl=c.nextDeadline;
    const dlColor=dl.gara?"var(--red)":dl.in.days<=3?"var(--red)":dl.in.days<=7?"var(--amber)":"var(--green)";
    return (
      <tr onClick={()=>onOpen(c.id)}>
        <td><div className="insegna-cell"><Glyph c={c.color} glyph={c.glyph}/><div><b>{c.insegna}</b><span>{c.place}{c.info?.supTotale?" · "+c.info.supTotale:""}</span></div></div></td>
        <td>{(()=>{const p=calcCronoAvg(c);return(<div className="prog-wrap"><div className="prog" style={{flex:1}}><i style={{width:p+"%"}}></i></div><span>{p}%</span></div>);})()}</td>
        <td style={{fontSize:13,fontWeight:500}}>{dl.label} · <span style={{color:dlColor,fontWeight:700}}>{fmtDays(dl.in.days)}</span></td>
        <td>
          {open===0
            ? <span className="badge" style={{fontSize:11.5}}>—</span>
            : urg>0
              ? <span className="badge red" style={{fontSize:11.5}}>
                  <span style={{opacity:.75}}>{open} /</span> {urg}!
                </span>
              : <span className="badge" style={{fontSize:11.5}}>{open}</span>
          }
        </td>
        <td><button className="btn sm ghost" style={{color:"var(--primary)"}}>Apri →</button></td>
      </tr>
    );
  };

  const CRowPrev = ({c}) => {
    const prevAtt=c.preventivi.filter(p=>p.stato==="attesa").length;
    const prevRic=c.preventivi.filter(p=>p.stato==="ricevuto").length;
    const dl=c.nextDeadline;
    const dlColor=dl.gara?"var(--red)":dl.in.days<=3?"var(--red)":dl.in.days<=7?"var(--amber)":"var(--green)";
    const ps=c.progettiStato2||{};
    const hasProjClima=ps["Progetto Clima"]?.done;
    return (
      <tr onClick={()=>onOpen(c.id)}>
        <td><div className="insegna-cell"><Glyph c={c.color} glyph={c.glyph}/><div><b>{c.insegna}</b><span>{c.place}</span></div></div></td>
        <td><FaseBadge c={c}/></td>
        <td style={{fontSize:13,fontWeight:600}}>
          {c.consegnatoIl
            ? <span style={{color:'var(--green)'}}>Consegnato: {(p=>p[0]+'/'+p[1])(c.consegnatoIl.split('/'))}</span>
            : <><span style={{color:dlColor}}>{dl.in.days===0?"oggi":dl.in.days===1?"domani":dl.in.days+" giorni"}</span>
                <span className="dim" style={{fontWeight:400,fontSize:12}}> · {dl.dateLabel||dl.in.label}</span></>
          }
        </td>
        <td><span className={prevAtt>0?"badge amber":"badge"}>{prevAtt} attesi</span></td>
        <td><span className={prevRic>0?"badge green":"badge"}>{prevRic} ricevuti</span></td>
        <td>
          {hasProjClima
            ? <span className="badge green"><span className="pip"></span>Sì</span>
            : <span className="badge" style={{background:"var(--red-soft)",color:"var(--red)"}}><span className="pip"></span>No</span>}
        </td>
        <td><button className="btn sm ghost" style={{color:"var(--primary)"}}>Apri →</button></td>
      </tr>
    );
  };

  return (
    <div className="app-body">
      <div className="content">
        <div className="page">
          {/* header */}
          <div className="page-hd">
            <div>
              <div className="eyebrow" style={{marginBottom:4}}>{dateStr}</div>
              <h1>{greeting}, {data.user.name}</h1>
              <div className="sub">Hai {attivi.length} cantier{attivi.length===1?"e attivo":"i attivi"} e {prev.length} preventiv{prev.length===1?"o aperto":"i aperti"}</div>
            </div>
            <button className="btn primary" style={{padding:'10px 20px',fontSize:14}} onClick={()=>setModal('cantiere')}>
              <Icon name="plus" size={16}/>Nuovo
            </button>
          </div>

          {/* banner scadenze critiche */}
          {critici.length>0&&(
            <div style={{background:'var(--red-soft)',border:'1px solid var(--red-border)',borderRadius:'var(--r)',padding:'12px 16px',marginBottom:20}}>
              <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:8}}>
                <Icon name="bell" size={15} style={{color:'var(--red)'}}/>
                <span style={{fontWeight:700,fontSize:13.5,color:'var(--red)'}}>
                  {critici.length===1?"Scadenza critica":"Scadenze critiche"} — oggi o domani
                </span>
              </div>
              <div style={{display:'flex',flexDirection:'column',gap:5}}>
                {critici.map((e,i)=>(
                  <div key={i} onClick={()=>onOpen(e.c.id)} style={{display:'flex',alignItems:'center',gap:10,cursor:'pointer',padding:'8px 10px',background:'rgba(255,255,255,.7)',borderRadius:8,border:'1px solid var(--red-border)'}}>
                    <Glyph c={e.c.color} glyph={e.c.glyph} size={28} r={7} fs={11}/>
                    <div style={{flex:1,minWidth:0}}>
                      <span style={{fontWeight:600,fontSize:13}}>{e.c.insegna}</span>
                      <span style={{color:'var(--ink3)',fontSize:12,marginLeft:8}}>· {e.label}</span>
                    </div>
                    <span style={{fontWeight:700,fontSize:12.5,color:'var(--red)'}}>{e.days===0?"Oggi":"Domani"}</span>
                    <span style={{background:'var(--red)',color:'#fff',borderRadius:999,padding:'2px 9px',fontSize:11,fontWeight:700,whiteSpace:'nowrap'}}>{e.tag}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* stat strip */}
          <div className="stat-strip">
            <div className="stat-card">
              <div className="sc-label"><Icon name="box" size={14}/>Cantieri attivi</div>
              <div className="sc-val">{attivi.length}</div>
              <div className="sc-delta neutral">in corso</div>
            </div>
            <div className="stat-card">
              <div className="sc-label"><Icon name="doc" size={14}/>Gare / Preventivi</div>
              <div className="sc-val">{prev.length}</div>
              <div className="sc-delta down">{solleciti.filter(p=>p.c.tipo==="gara"?false:false,0).length>0?"gara in scadenza":"aperti"}</div>
            </div>
            <div className="stat-card">
              <div className="sc-label"><Icon name="truck" size={14}/>Consegne aperte</div>
              <div className="sc-val">{totalConsegne}</div>
              <div className="sc-delta neutral">da gestire</div>
            </div>
            <div className="stat-card">
              <div className="sc-label" style={{color:"var(--red)"}}><Icon name="flag" size={14}/>Urgenti</div>
              <div className="sc-val" style={{color:"var(--red)"}}>{totalUrgenti}</div>
              <div className="sc-delta down">richiedono azione</div>
            </div>
          </div>

          {/* cantieri attivi */}
          {attivi.length>0&&<>
            <div className="between" style={{marginBottom:12}}>
              <span className="sec-title">Cantieri in corso</span>
            </div>
            <div className="tbl-wrap" style={{marginBottom:24}}>
              <table className="tbl"><thead><tr>
                <th>Cliente / Sede</th><th>Avanzamento</th><th>Prossima scadenza</th><th>To-do</th><th></th>
              </tr></thead><tbody>{attivi.map(c=><CRowCantiere key={c.id} c={c}/>)}</tbody></table>
            </div>
          </>}

          {/* preventivi / gare */}
          {prev.length>0&&<>
            <div className="between" style={{marginBottom:12}}>
              <span className="sec-title">Preventivi &amp; Gare</span>
            </div>
            <div className="tbl-wrap" style={{marginBottom:24}}>
              <table className="tbl"><thead><tr>
                <th>Cliente / Sede</th><th>Tipo</th><th>Scadenza</th><th>Prev. attesi</th><th>Prev. ricevuti</th><th>Prog. clima</th><th></th>
              </tr></thead><tbody>{prev.map(c=><CRowPrev key={c.id} c={c}/>)}</tbody></table>
            </div>
          </>}

          {/* urgenti */}
          <div className="between" style={{marginBottom:12}}>
            <span className="sec-title">Da fare — urgenti</span>
            <span className="badge red">{urgenti.length}</span>
          </div>
          <div className="card">
            {urgenti.length===0&&<div className="empty">Nessuna urgenza 🎉</div>}
            {urgenti.map(t=>(
              <div key={t.c.id+"-"+t.id} className="li" style={{padding:"11px 16px",borderBottom:"1px solid var(--line)",alignItems:"center"}}>
                <div className={"chk"+(t.due&&t.due.days<=3?" due":"")} onClick={()=>toggleTodo(t.c.id,t.id)}></div>
                <div className="txt">
                  <span style={{fontWeight:600}}>{t.t}</span>
                  <div style={{marginTop:3,display:"flex",gap:8,alignItems:"center"}}>
                    <span style={{color:t.c.color,fontWeight:600,fontSize:12}}>{t.c.insegna}</span>
                  </div>
                </div>
                {t.due&&<span className={t.due.days<=3?"badge red":"badge"} style={{fontSize:11,whiteSpace:"nowrap",marginLeft:"auto"}}>entro {t.due.label}</span>}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* MODAL */}
      {modal && <NuovoCantiere
        defaultFase={modal}
        onClose={()=>setModal(null)}
        onAdd={onAdd}
      />}

      {/* RIGHT PANEL */}
      <aside className="right-panel">
        <div className="rp-block">
          <div className="rp-title">Countdown scadenze</div>
          {events.length===0&&<div style={{fontSize:13,color:"var(--ink3)"}}>Nessuna scadenza nei prossimi 30 giorni</div>}
          {events.length>0&&(()=>{
            const buckets=[
              {label:"Oggi & Domani",    evts:events.filter(e=>e.days<=1)},
              {label:"Questa settimana", evts:events.filter(e=>e.days>=2&&e.days<=7)},
            ].filter(b=>b.evts.length>0);
            return buckets.map(b=>(
              <div key={b.label}>
                <div style={{fontSize:10,fontWeight:700,letterSpacing:'.07em',textTransform:'uppercase',color:'var(--ink3)',margin:'10px 0 6px'}}>{b.label}</div>
                {b.evts.map((e,i)=>(
                  <div key={i} className={"cd-card "+e.kind} onClick={()=>onOpen(e.c.id)} style={{cursor:"pointer"}}>
                    <div className="cd-num">{e.days===0?"oggi":e.days}</div>
                    <div className="cd-body">
                      <b>{e.label}</b>
                      <span>
                        {e.c.insegna} · <span style={{fontWeight:600,background:"var(--card)",borderRadius:999,padding:"2px 8px",fontSize:11,border:"1px solid var(--line)"}}>{e.tag}</span>
                        {e.ora&&<span style={{marginLeft:6,fontWeight:600}}>{e.ora}</span>}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            ));
          })()}
        </div>

        <div className="rp-block">
          <div className="rp-title">Preventivi da sollecitare</div>
          {solleciti.length===0&&<div style={{fontSize:13,color:"var(--ink3)"}}>Tutti ricevuti ✓</div>}
          {solleciti.map(p=>(
            <div key={p.c.id+"-"+p.id} className="s-item">
              <div className={"s-age "+(Math.abs(p.inviato.days)>=8?"":Math.abs(p.inviato.days)>=4?"warm":"cool")}>
                {p.inviato.days===0?"oggi":Math.abs(p.inviato.days)+"gg"}
              </div>
              <div className="s-body"><b>{p.voce}</b><span>{p.c.insegna} · {p.ditta}{p.justSolleciato?" ✓":""}</span></div>
            </div>
          ))}
          <div style={{fontSize:11.5,color:"var(--ink3)",marginTop:4}}>Rosso = oltre 8 giorni</div>
        </div>
      </aside>
    </div>
  );
};
window.HomeView = HomeView;