/* BUSINESS & AI — Editor do Roadmap */

const RESP_OPTS  = ['JP','FC','WN','MF',''];
const PRIOR_OPTS = ['P1','P2','P3','P4',''];
const LS_KEY     = 'digi-roadmap-data';

// ─── helpers ─────────────────────────────────────────────────
const edSave = (data) => {
  try { localStorage.setItem(LS_KEY, JSON.stringify(data)); } catch(e) {}
};
const dateStr = (d) => {
  if (!d) return '';
  try {
    const dt = d instanceof Date ? d : new Date(d);
    const y = dt.getFullYear(), m = String(dt.getMonth()+1).padStart(2,'0'), day = String(dt.getDate()).padStart(2,'0');
    return `${y}-${m}-${day}`;
  } catch(e) { return ''; }
};
const parseDate = (s) => {
  if (!s) return null;
  const p = s.split('-').map(Number);
  if (p.length !== 3 || p.some(isNaN)) return null;
  const d = new Date(p[0], p[1]-1, p[2]); // local midnight, sem problemas de timezone
  return isNaN(d) ? null : d;
};
const newId = () => 'ph_' + Math.random().toString(36).slice(2,8);

// ─── EditCell ─────────────────────────────────────────────────
const EC = ({ v, onChange, w=100, mono=false, placeholder='' }) => {
  const [edit, setEdit] = React.useState(false);
  const [val,  setVal]  = React.useState(v||'');
  React.useEffect(() => setVal(v||''), [v]);
  if (!edit) return (
    <span onClick={()=>setEdit(true)} style={{ cursor:'text', fontSize:11, fontFamily:mono?'var(--font-mono)':'inherit',
      display:'block', minWidth:w, padding:'2px 4px', borderRadius:3, lineHeight:1.4,
      color: v ? 'var(--text)' : 'var(--text-dim)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
      {v||<span style={{opacity:.35}}>{placeholder||'—'}</span>}
    </span>
  );
  return <input autoFocus value={val} placeholder={placeholder}
    onChange={e=>setVal(e.target.value)}
    onBlur={()=>{setEdit(false); onChange(val);}}
    onKeyDown={e=>{ if(e.key==='Enter'||e.key==='Escape'){setEdit(false); onChange(val);} }}
    style={{ fontSize:11, fontFamily:mono?'var(--font-mono)':'inherit', width:w,
      border:'1px solid var(--ai-500)', borderRadius:3, padding:'2px 4px',
      background:'var(--surface)', color:'var(--text)', outline:'none' }}/>;
};

const Sel = ({ v, opts, onChange, w=52 }) => (
  <select value={v||''} onChange={e=>onChange(e.target.value)}
    style={{ fontSize:10, fontFamily:'var(--font-mono)', width:w, border:'1px solid var(--border)',
      borderRadius:3, padding:'2px 3px', background:'var(--surface)', color:'var(--text)', cursor:'pointer' }}>
    {opts.map(o => <option key={o} value={o}>{o||'—'}</option>)}
  </select>
);

const Chk = ({ label, v, onChange }) => (
  <label style={{ display:'flex', alignItems:'center', gap:3, fontSize:10, color:'var(--text-muted)', cursor:'pointer', userSelect:'none' }}>
    <input type="checkbox" checked={!!v} onChange={e=>onChange(e.target.checked)}
      style={{ accentColor:'var(--ai-500)', cursor:'pointer' }}/>
    {label}
  </label>
);

// ─── Phase Row ────────────────────────────────────────────────
const EdPhaseRow = ({ ph, trackColor, onU, onDel, onMoveUp, onMoveDown, isFirst, isLast }) => {
  const [open, setOpen] = React.useState(false);
  const c = ph.cor || trackColor || '#94a3b8';
  const u = (k,v) => onU(ph.id, k, v);
  const moveBtnStyle = (disabled) => ({
    fontSize:10, color: disabled ? 'var(--text-dim)' : 'var(--text-muted)',
    background:'none', border:'none', cursor: disabled ? 'default' : 'pointer',
    padding:'1px 3px', lineHeight:1, opacity: disabled ? 0.25 : 1
  });
  return (
    <div style={{ borderBottom:'1px solid var(--border)' }}>
      <div style={{ display:'flex', alignItems:'center', gap:6, padding:'5px 12px',
        background: open ? 'rgba(99,102,241,0.04)' : 'transparent' }}>
        <span style={{ fontSize:8, fontWeight:700, padding:'1px 4px', borderRadius:3,
          background:c, color:'#fff', fontFamily:'var(--font-mono)', flexShrink:0 }}>{ph.sh||'?'}</span>
        <div style={{ flex:1, minWidth:0 }}>
          <EC v={ph.n} onChange={v=>u('n',v)} w={180} placeholder="Nome da tarefa"/>
        </div>
        <Sel v={ph.resp} opts={RESP_OPTS} onChange={v=>u('resp',v)} w={50}/>
        <Sel v={ph.prior} opts={PRIOR_OPTS} onChange={v=>u('prior',v)} w={44}/>
        <EC v={dateStr(ph.s)} onChange={v=>u('s',parseDate(v)||ph.s)} w={88} mono placeholder="YYYY-MM-DD"/>
        <EC v={dateStr(ph.e)} onChange={v=>u('e',parseDate(v)||ph.e)} w={88} mono placeholder="YYYY-MM-DD"/>
        <div style={{ display:'flex', flexDirection:'column', gap:0 }}>
          <button onClick={isFirst ? undefined : onMoveUp} title="Mover para cima"
            style={moveBtnStyle(isFirst)}>↑</button>
          <button onClick={isLast ? undefined : onMoveDown} title="Mover para baixo"
            style={moveBtnStyle(isLast)}>↓</button>
        </div>
        <button onClick={()=>setOpen(o=>!o)} style={{ fontSize:9, color:'var(--text-dim)', background:'none',
          border:'none', cursor:'pointer', padding:'2px 4px' }}>{open?'▲':'▼'}</button>
        <button onClick={onDel} title="Apagar" style={{ fontSize:12, color:'var(--danger)',
          background:'none', border:'none', cursor:'pointer', padding:'2px 4px', lineHeight:1 }}>×</button>
      </div>
      {open && (
        <div style={{ padding:'8px 12px 10px 32px', background:'var(--surface-muted)',
          borderTop:'1px solid var(--border)', display:'flex', flexWrap:'wrap', gap:10, alignItems:'flex-start' }}>
          <div style={{ flex:2, minWidth:200 }}>
            <div style={{ fontSize:10, color:'var(--text-dim)', marginBottom:3 }}>Descrição</div>
            <EC v={ph.d} onChange={v=>u('d',v)} w={300} placeholder="Descrição…"/>
          </div>
          <div>
            <div style={{ fontSize:10, color:'var(--text-dim)', marginBottom:3 }}>SH</div>
            <EC v={ph.sh} onChange={v=>u('sh',v)} w={56} mono/>
          </div>
          <div>
            <div style={{ fontSize:10, color:'var(--text-dim)', marginBottom:3 }}>Cor</div>
            <div style={{ display:'flex', alignItems:'center', gap:4 }}>
              <span style={{ width:14, height:14, borderRadius:3, background:ph.cor||'transparent',
                border:'1px solid var(--border)', display:'inline-block' }}/>
              <EC v={ph.cor} onChange={v=>u('cor',v)} w={70} mono placeholder="#hex"/>
            </div>
          </div>
          <div>
            <div style={{ fontSize:10, color:'var(--text-dim)', marginBottom:3 }}>Dep</div>
            <EC v={ph.xdep} onChange={v=>u('xdep',v)} w={70} mono placeholder="id"/>
          </div>
          <div style={{ display:'flex', gap:12, alignItems:'center', paddingTop:16 }}>
            <Chk label="buf"   v={ph.buf}   onChange={v=>u('buf',v||undefined)}/>
            <Chk label="vac"   v={ph.vac}   onChange={v=>u('vac',v||undefined)}/>
            <Chk label="marco" v={ph.marco} onChange={v=>u('marco',v||undefined)}/>
          </div>
        </div>
      )}
    </div>
  );
};

// ─── Track Section ────────────────────────────────────────────
const EdTrackSection = ({ track, onUpdateTrack, onUpdatePhase, onDeletePhase, onAddPhase, onDeleteTrack, onMovePhase }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="card" style={{ marginBottom:12, overflow:'hidden' }}>
      {/* Track header */}
      <div style={{ display:'flex', alignItems:'center', gap:8, padding:'8px 12px',
        background:'var(--surface-muted)', borderBottom:'1px solid var(--border)' }}>
        <span style={{ width:10, height:10, borderRadius:'50%', background:track.color, flexShrink:0 }}/>
        <EC v={track.label} onChange={v=>onUpdateTrack('label',v)} w={160}/>
        <EC v={track.color} onChange={v=>onUpdateTrack('color',v)} w={70} mono placeholder="#hex"/>
        <span style={{ fontSize:10, color:'var(--text-dim)', fontFamily:'var(--font-mono)', marginLeft:4 }}>
          {track.phases.length} fases
        </span>
        <button onClick={()=>setOpen(o=>!o)} style={{ marginLeft:'auto', fontSize:10,
          color:'var(--text-dim)', background:'none', border:'none', cursor:'pointer' }}>
          {open?'▲ fechar':'▼ ver fases'}
        </button>
        <button onClick={onDeleteTrack} title="Apagar track"
          style={{ fontSize:12, color:'var(--danger)', background:'none', border:'none', cursor:'pointer', lineHeight:1 }}>×</button>
      </div>
      {open && (
        <>
          {/* Column headers */}
          <div style={{ display:'flex', gap:6, padding:'4px 12px 4px 32px',
            borderBottom:'1px solid var(--border)', background:'var(--surface-muted)' }}>
            {['SH','Nome','Resp','Prior','Início','Fim'].map((l,i) => (
              <span key={i} style={{ fontSize:9, fontWeight:700, letterSpacing:'0.06em',
                color:'var(--text-dim)', fontFamily:'var(--font-display)', textTransform:'uppercase',
                minWidth:[0,180,50,44,88,88][i] }}>{l}</span>
            ))}
          </div>
          {track.phases.map((ph, i) => (
            <EdPhaseRow key={ph.id} ph={ph} trackColor={track.color}
              onU={(id,k,v) => onUpdatePhase(id,k,v)}
              onDel={() => onDeletePhase(ph.id)}
              onMoveUp={() => onMovePhase(ph.id, -1)}
              onMoveDown={() => onMovePhase(ph.id, 1)}
              isFirst={i === 0}
              isLast={i === track.phases.length - 1}/>
          ))}
          <div style={{ padding:'6px 12px' }}>
            <button onClick={onAddPhase} style={{ fontSize:11, color:'var(--ai-500)',
              background:'none', border:'1px dashed var(--ai-500)', borderRadius:5,
              padding:'4px 12px', cursor:'pointer' }}>+ Adicionar fase</button>
          </div>
        </>
      )}
    </div>
  );
};

// ─── Main Screen ──────────────────────────────────────────────
const BusinessAIEditorScreen = () => {
  const [data, setData] = React.useState(() => {
    try { const s = localStorage.getItem(LS_KEY); if (s) return JSON.parse(s, (k,v)=>(k==='s'||k==='e')&&typeof v==='string'?new Date(v):v); } catch(e) {}
    return JSON.parse(JSON.stringify(TRACKS_DATA_DEFAULT), (k,v)=>(k==='s'||k==='e')&&v?new Date(v):v);
  });
  const [saved, setSaved] = React.useState(false);

  // Ler prefill do localStorage (vindo de Sugestões de Board)
  React.useEffect(() => {
    try {
      const raw = localStorage.getItem('digi-roadmap-prefill');
      if (!raw) return;
      localStorage.removeItem('digi-roadmap-prefill');
      const ph = JSON.parse(raw);
      const newPhase = {
        id: 'ph_' + Math.random().toString(36).slice(2,8),
        sh: ph.sh || 'NEW',
        n:  ph.n  || 'Nova fase',
        d:  ph.d  || '',
        resp: ph.resp || 'JP',
        prior: ph.prior || 'P2',
        s: ph.s ? new Date(ph.s) : new Date(),
        e: ph.e ? new Date(ph.e) : new Date(Date.now() + 30 * 864e5),
        cor: ph.cor || '',
      };
      setData(prev => {
        if (!prev.length) return prev;
        const updated = prev.map((t, i) => i === 0
          ? { ...t, phases: [...t.phases, newPhase] }
          : t
        );
        edSave(updated);
        return updated;
      });
    } catch(e) {}
  }, []);

  const persist = (d) => { setData(d); edSave(d); setSaved(true); setTimeout(()=>setSaved(false),1500); };

  const updateTrack = (tid, field, val) => persist(data.map(t => t.id===tid ? {...t,[field]:val} : t));
  const updatePhase = (tid, pid, field, val) => persist(data.map(t => t.id!==tid ? t : {
    ...t, phases: t.phases.map(p => p.id!==pid ? p : {...p,[field]:val})
  }));
  const deletePhase = (tid, pid) => persist(data.map(t => t.id!==tid ? t : {
    ...t, phases: t.phases.filter(p => p.id!==pid)
  }));
  const addPhase = (tid) => persist(data.map(t => t.id!==tid ? t : {
    ...t, phases: [...t.phases, { id:newId(), sh:'NEW', n:'Nova fase', d:'', resp:'JP', prior:'P2',
      s:new Date(), e:new Date(Date.now()+7*864e5), cor:'' }]
  }));
  const movePhase = (tid, pid, dir) => persist(data.map(t => {
    if (t.id !== tid) return t;
    const idx = t.phases.findIndex(p => p.id === pid);
    if (idx === -1 || (dir === -1 && idx === 0) || (dir === 1 && idx === t.phases.length - 1)) return t;
    const phases = [...t.phases];
    [phases[idx], phases[idx + dir]] = [phases[idx + dir], phases[idx]];
    return { ...t, phases };
  }));
  const deleteTrack = (tid) => { if(confirm('Apagar track?')) persist(data.filter(t=>t.id!==tid)); };
  const addTrack = () => persist([...data, {
    id:'track_'+newId(), label:'Novo Track', color:'#6366f1', phases:[]
  }]);

  const exportCSV = () => {
    const hdrs = ['track','track_label','track_color','id','sh','nome','descricao','resp','prior','data_inicio','data_fim','cor','xdep','buf','vac','marco'];
    const rows = data.flatMap(t => t.phases.map(p => [
      t.id,t.label,t.color,p.id,p.sh,p.n,p.d||'',p.resp||'',p.prior||'',
      dateStr(p.s),dateStr(p.e),p.cor||'',p.xdep||'',p.buf?'true':'',p.vac?'true':'',p.marco?'true':''
    ]));
    const csv = [hdrs,...rows].map(r=>r.map(c=>`"${String(c).replace(/"/g,'""')}"`).join(',')).join('\n');
    const a = document.createElement('a');
    a.href = URL.createObjectURL(new Blob(['\ufeff'+csv],{type:'text/csv;charset=utf-8'}));
    a.download = `roadmap_farben_${new Date().toISOString().slice(0,10)}.csv`;
    a.click();
  };

  const importCSV = (e) => {
    const file = e.target.files[0]; if (!file) return;
    const reader = new FileReader();
    reader.onload = (ev) => {
      try {
        const lines = ev.target.result.replace(/\r/g,'').split('\n').filter(Boolean);
        const hdrs = lines[0].split(',').map(h=>h.replace(/^"|"$/g,'').trim());
        const get = (row,key) => { const i=hdrs.indexOf(key); return i>=0?(row[i]||'').replace(/^"|"$/g,'').trim():''; };
        const rows = lines.slice(1).map(l=>{
          const r=[]; let cur='',inQ=false;
          for(const c of l){if(c==='"'){inQ=!inQ;}else if(c===','&&!inQ){r.push(cur);cur='';}else{cur+=c;}}
          r.push(cur); return r;
        });
        const tracks = {}; const order = [];
        rows.forEach(r => {
          const tid=get(r,'track');
          if(!tracks[tid]){ tracks[tid]={id:tid,label:get(r,'track_label'),color:get(r,'track_color'),phases:[]}; order.push(tid); }
          const si=get(r,'data_inicio'), ei=get(r,'data_fim');
          tracks[tid].phases.push({
            id:get(r,'id')||newId(), sh:get(r,'sh'), n:get(r,'nome'), d:get(r,'descricao'),
            resp:get(r,'resp'), prior:get(r,'prior'),
            s:si?new Date(si):new Date(), e:ei?new Date(ei):new Date(),
            cor:get(r,'cor'), xdep:get(r,'xdep'),
            buf:get(r,'buf')==='true'||undefined, vac:get(r,'vac')==='true'||undefined,
            marco:get(r,'marco')==='true'||undefined,
          });
        });
        persist(order.map(id=>tracks[id]));
      } catch(err) { alert('Erro ao importar CSV: '+err.message); }
    };
    reader.readAsText(file);
    e.target.value='';
  };

  const btnStyle = { fontSize:11, padding:'5px 12px', borderRadius:5, cursor:'pointer',
    border:'1px solid var(--border)', background:'var(--surface-muted)', color:'var(--text)' };

  return (
    <div className="scrollbar" style={{ flex:1, overflowY:'auto', padding:'24px 28px 80px' }}>
      <div className="font-mono" style={{ fontSize:11, color:'var(--text-dim)', letterSpacing:'0.08em', marginBottom:6 }}>
        BUSINESS & AI · EDITOR
      </div>
      <h2 className="font-display" style={{ margin:'0 0 4px', fontSize:26, fontWeight:500, letterSpacing:'-0.01em' }}>
        Editar Roadmap
      </h2>
      <p style={{ fontSize:13, color:'var(--text-muted)', marginBottom:20, lineHeight:1.55 }}>
        Edita tracks e fases directamente. As alterações ficam guardadas no browser e reflectem-se no Roadmap.
      </p>

      {/* Actions bar */}
      <div style={{ display:'flex', gap:8, marginBottom:20, flexWrap:'wrap', alignItems:'center' }}>
        <button style={{...btnStyle, background:'var(--ai-500)', color:'#fff', border:'none'}}
          onClick={exportCSV}>↓ Exportar CSV</button>
        <label style={{...btnStyle, cursor:'pointer'}}>
          ↑ Importar CSV
          <input type="file" accept=".csv" onChange={importCSV} style={{ display:'none' }}/>
        </label>
        <button style={btnStyle} onClick={addTrack}>+ Novo track</button>
        <button style={{...btnStyle, color:'var(--danger)'}}
          onClick={()=>{ if(confirm('Repor dados originais?')){ localStorage.removeItem(LS_KEY); setData(JSON.parse(JSON.stringify(TRACKS_DATA_DEFAULT),(k,v)=>(k==='s'||k==='e')&&v?new Date(v):v)); }}}>
          ↺ Repor originais
        </button>
        {saved && <span style={{ fontSize:11, color:'#10b981', fontFamily:'var(--font-mono)' }}>✓ guardado</span>}
      </div>

      {data.map(track => (
        <EdTrackSection key={track.id} track={track}
          onUpdateTrack={(f,v) => updateTrack(track.id,f,v)}
          onUpdatePhase={(pid,f,v) => updatePhase(track.id,pid,f,v)}
          onDeletePhase={(pid) => deletePhase(track.id,pid)}
          onAddPhase={() => addPhase(track.id)}
          onDeleteTrack={() => deleteTrack(track.id)}
          onMovePhase={(pid,dir) => movePhase(track.id,pid,dir)}/>
      ))}
    </div>
  );
};
window.BusinessAIEditorScreen = BusinessAIEditorScreen;