// budsjett-prosess-kart.jsx
// Flytdiagram for budsjettprosesskart + linjedetaljer

// ══════════════════════════════════════════════════════════════
// PROSESSKART — SVG-basert flytdiagram
// ══════════════════════════════════════════════════════════════

function BudProsessKart({ steg, stegStatus, gåTilFane }) {
  const ST_FARGE = { ikke_startet:'#b0b8c9', pagar:'#e08d3c', fullfort:'#1b6a2e' };

  // Layout: kolonne per fase, rader per steg innen fase
  const FASE_X = { 1:40, 2:240, 3:440, 4:640, 5:800 };
  const FASE_W = 160;
  const NODE_H = 52;
  const NODE_GAP = 14;

  // Plasser stegene
  const faseStegs = {};
  steg.forEach(s => {
    if (!faseStegs[s.fase]) faseStegs[s.fase] = [];
    faseStegs[s.fase].push(s);
  });

  const nodePos = {};
  Object.entries(faseStegs).forEach(([fase, stegs]) => {
    const x = FASE_X[fase];
    stegs.forEach((s, i) => {
      nodePos[s.nokkel] = {
        x, y: 80 + i * (NODE_H + NODE_GAP),
        cx: x + FASE_W/2,
        cy: 80 + i * (NODE_H + NODE_GAP) + NODE_H/2,
      };
    });
  });

  // Beregn total høyde
  const maxSteg = Math.max(...Object.values(faseStegs).map(s=>s.length));
  const svgH = 80 + maxSteg * (NODE_H + NODE_GAP) + 40;
  const svgW = 980;

  // Tegn piler mellom avhengigheter
  const piler = [];
  steg.forEach(s => {
    s.avhenger_av.forEach(dep => {
      const fra = nodePos[dep];
      const til = nodePos[s.nokkel];
      if (!fra || !til) return;
      const x1 = fra.x + FASE_W;
      const y1 = fra.cy;
      const x2 = til.x;
      const y2 = til.cy;
      const mx = (x1 + x2) / 2;
      piler.push({ dep, til: s.nokkel, x1, y1, x2, y2, mx });
    });
  });

  const FASE_META = {
    1: { navn:'Grunnlag',        farge:'#378ADD' },
    2: { navn:'Beregninger',     farge:'#BA7517' },
    3: { navn:'Fordeling',       farge:'#7c5cbc' },
    4: { navn:'Konsolidering',   farge:'#e05c6b' },
    5: { navn:'Rapport',         farge:'#1b6a2e' },
  };

  return (
    <div style={{ background:'#fff', borderRadius:12, border:'1px solid rgba(17,24,61,.08)',
      marginBottom:20, overflowX:'auto' }}>
      <svg width={svgW} height={svgH} viewBox={`0 0 ${svgW} ${svgH}`}
        style={{ display:'block', minWidth:svgW }}>
        <defs>
          <marker id="arrowhead" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
            <polygon points="0 0, 8 3, 0 6" fill="rgba(17,24,61,.2)"/>
          </marker>
        </defs>

        {/* Fase-kolonner */}
        {Object.entries(FASE_META).map(([fase, meta]) => {
          const x = FASE_X[fase];
          if (!x) return null;
          return (
            <g key={fase}>
              <rect x={x} y={10} width={FASE_W} height={svgH-20} rx={10}
                fill={`${meta.farge}08`} stroke={`${meta.farge}30`} strokeWidth={1}/>
              <text x={x + FASE_W/2} y={36} textAnchor="middle"
                fontSize={11} fontWeight={700} fill={meta.farge} fontFamily="inherit">
                {meta.navn}
              </text>
              <text x={x + FASE_W/2} y={52} textAnchor="middle"
                fontSize={9.5} fill={meta.farge} opacity={0.7} fontFamily="inherit">
                Fase {fase}
              </text>
            </g>
          );
        })}

        {/* Piler */}
        {piler.map((p,i) => (
          <path key={i}
            d={`M ${p.x1} ${p.y1} C ${p.mx+20} ${p.y1}, ${p.mx-20} ${p.y2}, ${p.x2} ${p.y2}`}
            fill="none" stroke="rgba(17,24,61,.18)" strokeWidth={1.5}
            strokeDasharray={p.y1===p.y2?"none":"4 3"}
            markerEnd="url(#arrowhead)"/>
        ))}

        {/* Noder */}
        {steg.map(s => {
          const pos = nodePos[s.nokkel];
          if (!pos) return null;
          const st    = stegStatus(s);
          const farge = ST_FARGE[st];
          const meta  = FASE_META[s.fase];
          const er_fullfort = st === 'fullfort';
          const er_aktiv    = st === 'pagar';

          return (
            <g key={s.nokkel}
              style={{ cursor:'pointer' }}
              onClick={() => gåTilFane(s.fane)}>
              {/* Skygge */}
              <rect x={pos.x+3} y={pos.y+3} width={FASE_W-16} height={NODE_H}
                rx={8} fill="rgba(0,0,0,.06)"/>
              {/* Boks */}
              <rect x={pos.x+2} y={pos.y} width={FASE_W-16} height={NODE_H}
                rx={8}
                fill={er_fullfort ? '#f0faf3' : er_aktiv ? '#fff8f0' : '#fff'}
                stroke={er_fullfort ? '#1b6a2e' : er_aktiv ? '#e08d3c' : 'rgba(17,24,61,.15)'}
                strokeWidth={er_aktiv ? 1.5 : 1}/>
              {/* Status-stripe venstre */}
              <rect x={pos.x+2} y={pos.y} width={4} height={NODE_H}
                rx={8} fill={farge} opacity={0.7}/>
              {/* Ikon */}
              <text x={pos.x+22} y={pos.y+22} fontSize={14} textAnchor="middle"
                dominantBaseline="middle" fontFamily="inherit">
                {s.ikon}
              </text>
              {/* Navn */}
              <text x={pos.x+32} y={pos.y+18} fontSize={11} fontWeight={600}
                fill={er_fullfort?'#1b6a2e':SK?.ink||'#11183d'} fontFamily="inherit">
                {s.navn}
              </text>
              {/* Status-tekst */}
              <text x={pos.x+32} y={pos.y+33} fontSize={9.5}
                fill={farge} fontFamily="inherit">
                {st==='fullfort'?'✓ Fullført':st==='pagar'?'Pågår':'Ikke startet'}
                {s.beregnet && ' · beregnet'}
              </text>
              {/* Klikk-indikator */}
              <text x={pos.x+FASE_W-22} y={pos.y+29} fontSize={10}
                fill="rgba(17,24,61,.3)" fontFamily="inherit">→</text>
            </g>
          );
        })}
      </svg>

      {/* Forklaring */}
      <div style={{ padding:'10px 16px', borderTop:'1px solid rgba(17,24,61,.06)',
        display:'flex', gap:20, fontSize:11.5, flexWrap:'wrap' }}>
        {[['#b0b8c9','Ikke startet'],['#e08d3c','Pågår'],['#1b6a2e','Fullført']].map(([f,l])=>(
          <span key={l} style={{ display:'flex', alignItems:'center', gap:5, color:SK?.soft||'#666' }}>
            <span style={{ width:10,height:10,borderRadius:2,background:f,display:'inline-block'}}/>
            {l}
          </span>
        ))}
        <span style={{ color:SK?.soft||'#666' }}>· Klikk et steg for å gå direkte til modulen</span>
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// LINJEDETALJ-PANEL — underposter per budsjettlinje
// ══════════════════════════════════════════════════════════════

async function budHentLinjeDetaljer(linjeId) {
  const { data, error } = await window._sb.from('bud_linje_detalj')
    .select('*').eq('linje_id', linjeId).order('sortering').order('created_at');
  if (error) throw error;
  return data || [];
}

async function budLagreLinjeDetalj(linjeId, detalj) {
  const felt = {
    linje_id: linjeId,
    beskrivelse: detalj.beskrivelse,
    belop_ar: detalj.belop_ar || 0,
    er_inntekt: detalj.er_inntekt || false,
    antall: detalj.antall || null,
    enhetspris: detalj.enhetspris || null,
    antall_mnd: detalj.antall_mnd || null,
    note: detalj.note || null,
    sortering: detalj.sortering || 0,
  };
  if (detalj.id) {
    const { data, error } = await window._sb.from('bud_linje_detalj')
      .update(felt).eq('id', detalj.id).select().single();
    if (error) throw error;
    return data;
  } else {
    const { data, error } = await window._sb.from('bud_linje_detalj')
      .insert([felt]).select().single();
    if (error) throw error;
    return data;
  }
}

async function budSlettLinjeDetalj(id) {
  const { error } = await window._sb.from('bud_linje_detalj').delete().eq('id', id);
  if (error) throw error;
}

// ── Komponent: linjedetalj-panel ─────────────────────────────
function BudLinjeDetaljPanel({ linjeId, belopAr, laast }) {
  const [detaljer,  setDetaljer]  = React.useState([]);
  const [laster,    setLaster]    = React.useState(true);
  const [redigerer, setRedigerer] = React.useState(null); // id eller 'ny'
  const [feil,      setFeil]      = React.useState(null);

  const lastInn = async () => {
    if (!linjeId) return;
    setLaster(true);
    try { setDetaljer(await budHentLinjeDetaljer(linjeId)); }
    catch(e) { setFeil(e.message); }
    setLaster(false);
  };

  React.useEffect(() => { lastInn(); }, [linjeId]);

  const sumDetaljer = detaljer.reduce((s,d) => s + (d.er_inntekt?-1:1)*Number(d.belop_ar||0), 0);
  const avvik = belopAr - sumDetaljer;

  if (laster) return <div style={{padding:12,color:SK.soft,fontSize:12}}>Laster detaljer…</div>;

  return (
    <div style={{ marginTop:16, padding:'12px 16px', borderRadius:10,
      background:'rgba(17,24,61,.02)', border:'1px solid rgba(17,24,61,.08)' }}>

      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
        <div style={{ fontSize:12.5, fontWeight:600 }}>
          Grunnlag og underposter
          {detaljer.length > 0 && (
            <span style={{ fontSize:11.5, fontWeight:400, color:SK.soft, marginLeft:8 }}>
              Sum: {sumDetaljer.toLocaleString('nb-NO')} kr
              {Math.abs(avvik) > 100 && (
                <span style={{ color:'#e08d3c', marginLeft:6 }}>
                  (avvik {avvik>0?'+':''}{avvik.toLocaleString('nb-NO')} vs. linjebeløp)
                </span>
              )}
            </span>
          )}
        </div>
        {!laast && (
          <button onClick={() => setRedigerer('ny')}
            style={{ padding:'4px 10px', borderRadius:6, border:'1px solid rgba(17,24,61,.15)',
              background:'transparent', color:SK.soft, fontSize:12, cursor:'pointer', fontFamily:'inherit' }}>
            + Legg til
          </button>
        )}
      </div>

      {feil && <div style={{fontSize:12,color:SK.coral,marginBottom:8}}>{feil}</div>}

      {detaljer.length === 0 && redigerer !== 'ny' && (
        <div style={{ fontSize:12, color:SK.soft, fontStyle:'italic', padding:'4px 0' }}>
          Ingen underposter. Klikk "+ Legg til" for å forklare grunnlaget for beløpet.
        </div>
      )}

      {/* Liste over detaljer */}
      <div style={{ display:'flex', flexDirection:'column', gap:4 }}>
        {detaljer.map(d => (
          redigerer === d.id
            ? <BudLinjeDetaljForm key={d.id} detalj={d} onLagret={async (felt)=>{
                await budLagreLinjeDetalj(linjeId, {...d,...felt});
                setRedigerer(null); lastInn();
              }} onAvbryt={()=>setRedigerer(null)} />
            : (
              <div key={d.id} style={{ display:'flex', alignItems:'center', gap:8,
                padding:'6px 10px', borderRadius:7, background:'#fff',
                border:'1px solid rgba(17,24,61,.07)' }}>
                <div style={{ flex:1 }}>
                  <span style={{ fontSize:12.5, fontWeight:500 }}>{d.beskrivelse}</span>
                  {d.antall && d.enhetspris && (
                    <span style={{ fontSize:11, color:SK.soft, marginLeft:8 }}>
                      {d.antall} × {Number(d.enhetspris).toLocaleString('nb-NO')} kr
                      {d.antall_mnd && ` × ${d.antall_mnd} mnd`}
                    </span>
                  )}
                  {d.note && <div style={{ fontSize:11, color:SK.soft, marginTop:1 }}>{d.note}</div>}
                </div>
                <div style={{ fontSize:13, fontWeight:600, minWidth:100, textAlign:'right',
                  color: d.er_inntekt ? '#1b6a2e' : SK.ink }}>
                  {d.er_inntekt ? '-' : ''}{Number(d.belop_ar).toLocaleString('nb-NO')} kr
                </div>
                {!laast && (
                  <>
                    <button onClick={()=>setRedigerer(d.id)}
                      style={{border:'none',background:'none',color:SK.soft,cursor:'pointer',fontSize:13,padding:'2px 4px'}}>
                      ✏️
                    </button>
                    <button onClick={async()=>{
                      if (!confirm('Slett denne underposten?')) return;
                      await budSlettLinjeDetalj(d.id); lastInn();
                    }} style={{border:'none',background:'none',color:SK.coral,cursor:'pointer',fontSize:13,padding:'2px 4px'}}>
                      🗑
                    </button>
                  </>
                )}
              </div>
            )
        ))}

        {/* Ny detalj-form */}
        {redigerer === 'ny' && (
          <BudLinjeDetaljForm detalj={null}
            onLagret={async (felt) => {
              await budLagreLinjeDetalj(linjeId, felt);
              setRedigerer(null); lastInn();
            }}
            onAvbryt={() => setRedigerer(null)} />
        )}
      </div>
    </div>
  );
}

// ── Enkel form for én detalj ──────────────────────────────────
function BudLinjeDetaljForm({ detalj, onLagret, onAvbryt }) {
  const [besk,       setBesk]       = React.useState(detalj?.beskrivelse || '');
  const [belop,      setBelop]      = React.useState(detalj ? Math.abs(detalj.belop_ar) : '');
  const [erInntekt,  setErInntekt]  = React.useState(detalj?.er_inntekt || false);
  const [antall,     setAntall]     = React.useState(detalj?.antall || '');
  const [enhetspris, setEnhetspris] = React.useState(detalj?.enhetspris || '');
  const [antallMnd,  setAntallMnd]  = React.useState(detalj?.antall_mnd || '');
  const [note,       setNote]       = React.useState(detalj?.note || '');
  const [visKalc,    setVisKalc]    = React.useState(!!(detalj?.antall));
  const [lagrer,     setLagrer]     = React.useState(false);

  // Auto-beregn beløp fra kalkulator
  React.useEffect(() => {
    if (!visKalc) return;
    const b = (Number(antall)||1) * (Number(enhetspris)||0) * (Number(antallMnd)||1);
    if (b > 0) setBelop(String(Math.round(b)));
  }, [antall, enhetspris, antallMnd, visKalc]);

  const lagre = async () => {
    if (!besk.trim()) return;
    setLagrer(true);
    await onLagret({
      beskrivelse: besk,
      belop_ar: Math.round(Number(belop)||0),
      er_inntekt: erInntekt,
      antall: antall ? Number(antall) : null,
      enhetspris: enhetspris ? Number(enhetspris) : null,
      antall_mnd: antallMnd ? Number(antallMnd) : null,
      note: note || null,
    });
    setLagrer(false);
  };

  const INP = { padding:'5px 8px', borderRadius:6, border:'1px solid rgba(17,24,61,.15)',
    fontFamily:'inherit', fontSize:12.5, width:'100%', boxSizing:'border-box' };

  return (
    <div style={{ padding:'10px 12px', borderRadius:8, background:'rgba(55,138,221,.04)',
      border:'1px solid rgba(55,138,221,.2)', display:'flex', flexDirection:'column', gap:8 }}>

      <input value={besk} onChange={e=>setBesk(e.target.value)}
        style={INP} placeholder="Beskrivelse, f.eks. «Terminalbriller»" autoFocus />

      <div style={{ display:'flex', gap:8, alignItems:'center' }}>
        <div style={{ flex:1 }}>
          <input type="number" value={belop} onChange={e=>setBelop(e.target.value)}
            style={INP} placeholder="Årsbeløp (kr)" />
        </div>
        <label style={{ fontSize:12, color:SK.soft, display:'flex', alignItems:'center', gap:4, whiteSpace:'nowrap' }}>
          <input type="checkbox" checked={erInntekt} onChange={e=>setErInntekt(e.target.checked)} />
          Inntekt
        </label>
        <button onClick={()=>setVisKalc(v=>!v)}
          style={{ padding:'5px 10px', borderRadius:6, border:'1px solid rgba(17,24,61,.15)',
            background:'transparent', fontSize:11.5, cursor:'pointer', fontFamily:'inherit',
            color: visKalc ? SK.ink : SK.soft, whiteSpace:'nowrap' }}>
          {visKalc ? '− Kalkulator' : '+ Kalkulator'}
        </button>
      </div>

      {visKalc && (
        <div style={{ display:'flex', gap:8, padding:'8px', borderRadius:7,
          background:'rgba(17,24,61,.03)', border:'1px solid rgba(17,24,61,.06)' }}>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:10.5, color:SK.soft, marginBottom:3 }}>Antall</div>
            <input type="number" value={antall} onChange={e=>setAntall(e.target.value)}
              style={INP} placeholder="1" />
          </div>
          <div style={{ alignSelf:'flex-end', paddingBottom:6, color:SK.soft }}>×</div>
          <div style={{ flex:2 }}>
            <div style={{ fontSize:10.5, color:SK.soft, marginBottom:3 }}>Enhetspris (kr)</div>
            <input type="number" value={enhetspris} onChange={e=>setEnhetspris(e.target.value)}
              style={INP} placeholder="Kr per enhet" />
          </div>
          <div style={{ alignSelf:'flex-end', paddingBottom:6, color:SK.soft }}>×</div>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:10.5, color:SK.soft, marginBottom:3 }}>Mnd</div>
            <input type="number" value={antallMnd} onChange={e=>setAntallMnd(e.target.value)}
              style={INP} placeholder="12" />
          </div>
          <div style={{ alignSelf:'flex-end', paddingBottom:6, color:SK.soft }}>=</div>
          <div style={{ flex:2 }}>
            <div style={{ fontSize:10.5, color:SK.soft, marginBottom:3 }}>Beregnet beløp</div>
            <input value={belop ? Number(belop).toLocaleString('nb-NO')+' kr' : '—'}
              readOnly style={{ ...INP, background:'rgba(17,24,61,.04)', color:SK.ink, fontWeight:600 }} />
          </div>
        </div>
      )}

      <input value={note} onChange={e=>setNote(e.target.value)}
        style={INP} placeholder="Notat / forklaring (valgfritt)" />

      <div style={{ display:'flex', gap:8 }}>
        <button onClick={lagre} disabled={!besk.trim()||lagrer}
          style={{ padding:'5px 14px', borderRadius:6, border:'none',
            background: besk.trim() ? SK.ink : '#ccc', color:'#fff',
            fontSize:12.5, fontWeight:600, cursor: besk.trim()?'pointer':'default', fontFamily:'inherit' }}>
          {lagrer ? 'Lagrer…' : 'Lagre'}
        </button>
        <button onClick={onAvbryt}
          style={{ padding:'5px 12px', borderRadius:6, border:'1px solid rgba(17,24,61,.15)',
            background:'transparent', fontSize:12.5, cursor:'pointer', fontFamily:'inherit', color:SK.soft }}>
          Avbryt
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { BudProsessKart, BudLinjeDetaljPanel });