// Reusable SVG charts.

// Smooth path through points using monotone cubic
function smoothPath(points){
  if(points.length<2) return '';
  const path = [`M ${points[0].x} ${points[0].y}`];
  for(let i=0;i<points.length-1;i++){
    const p0 = points[i-1] || points[i];
    const p1 = points[i];
    const p2 = points[i+1];
    const p3 = points[i+2] || p2;
    const cp1x = p1.x + (p2.x - p0.x)/6;
    const cp1y = p1.y + (p2.y - p0.y)/6;
    const cp2x = p2.x - (p3.x - p1.x)/6;
    const cp2y = p2.y - (p3.y - p1.y)/6;
    path.push(`C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`);
  }
  return path.join(' ');
}

function LineChart({data, height=260, showTooltipDay=15, currency=false}){
  const W = 920, H = height;
  const pad = {l:48,r:20,t:20,b:30};
  const innerW = W - pad.l - pad.r;
  const innerH = H - pad.t - pad.b;
  const allValues = data.flatMap(d => [d.inventory, d.demand].filter(v=>v!=null));
  const maxV = Math.ceil(Math.max(...allValues)/10000)*10000;
  const minV = 0;

  const x = i => pad.l + (i/(data.length-1))*innerW;
  const y = v => pad.t + innerH - ((v-minV)/(maxV-minV))*innerH;

  const invPts = data.map((d,i)=>({x:x(i),y:y(d.inventory)}));
  const demPts = data.map((d,i)=>({x:x(i),y:y(d.demand)}));

  const yTicks = 5;
  const ticks = Array.from({length:yTicks+1},(_,i)=>(maxV/yTicks)*i);

  const tipIdx = data.findIndex(d=>d.day===showTooltipDay);
  const tip = tipIdx>=0 ? data[tipIdx] : null;
  const tipX = tip ? x(tipIdx) : 0;
  const tipY = tip ? y(tip.inventory) : 0;

  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{display:'block',overflow:'visible'}}>
      <defs>
        <linearGradient id="lcGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#F5A524" stopOpacity="0.18"/>
          <stop offset="100%" stopColor="#F5A524" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {ticks.map((t,i)=>(
        <g key={i}>
          <line x1={pad.l} x2={W-pad.r} y1={y(t)} y2={y(t)} stroke="var(--line-2)" strokeDasharray={i===0?'none':'3 4'}/>
          <text x={pad.l-10} y={y(t)+4} fontSize="11" fill="var(--ink-3)" textAnchor="end" fontFamily="JetBrains Mono">{t>=1000?(t/1000)+'K':t}</text>
        </g>
      ))}
      {/* Area under inventory */}
      <path d={`${smoothPath(invPts)} L ${invPts[invPts.length-1].x} ${pad.t+innerH} L ${invPts[0].x} ${pad.t+innerH} Z`} fill="url(#lcGrad)"/>
      {/* Demand (dashed gray) */}
      <path d={smoothPath(demPts)} fill="none" stroke="var(--ink-4)" strokeWidth="1.6" strokeDasharray="5 5" strokeLinecap="round"/>
      {/* Inventory (amber) */}
      <path d={smoothPath(invPts)} fill="none" stroke="#F5A524" strokeWidth="2.4" strokeLinecap="round"/>
      {/* X labels */}
      {[0,7,14,21,30].map(i=>(
        <text key={i} x={x(i)} y={H-8} fontSize="11" fill="var(--ink-3)" textAnchor="middle" fontFamily="JetBrains Mono">{(i+1)} may.</text>
      ))}
      {tip && (
        <g>
          <line x1={tipX} x2={tipX} y1={pad.t} y2={pad.t+innerH} stroke="var(--ink-4)" strokeWidth="1" strokeDasharray="3 3"/>
          <circle cx={tipX} cy={tipY} r="5" fill="#fff" stroke="#F5A524" strokeWidth="2.5"/>
          <circle cx={tipX} cy={y(tip.demand)} r="4" fill="#fff" stroke="var(--ink-3)" strokeWidth="2"/>

          <g transform={`translate(${tipX-72}, ${tipY-72})`}>
            <rect width="144" height="58" rx="8" fill="var(--surface)" stroke="var(--line)"/>
            <text x="12" y="18" fontSize="11" fill="var(--ink-3)">{tip.day} may. 2025</text>
            <circle cx="14" cy="32" r="3.5" fill="#F5A524"/>
            <text x="22" y="35" fontSize="11.5" fill="var(--ink)">Inventario: <tspan fontWeight="700">{tip.inventory.toLocaleString()}</tspan></text>
            <circle cx="14" cy="48" r="3.5" fill="var(--ink-4)"/>
            <text x="22" y="51" fontSize="11.5" fill="var(--ink)">Demanda: <tspan fontWeight="700">{tip.demand.toLocaleString()}</tspan></text>
          </g>
        </g>
      )}
    </svg>
  );
}

function Donut({data, total, label, size=180}){
  const r = size/2 - 14;
  const C = 2*Math.PI*r;
  const cx = size/2, cy = size/2;
  let acc = 0;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{display:'block'}}>
      <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--line-2)" strokeWidth="14"/>
      {data.map((d,i)=>{
        const len = (d.pct/100)*C;
        const dash = `${len} ${C-len}`;
        const offset = -((acc/100)*C);
        const el = <circle key={i} cx={cx} cy={cy} r={r} fill="none" stroke={d.color} strokeWidth="14" strokeDasharray={dash} strokeDashoffset={offset} transform={`rotate(-90 ${cx} ${cy})`} strokeLinecap="butt"/>;
        acc += d.pct;
        return el;
      })}
      <text x={cx} y={cy-2} fontSize="22" fontWeight="800" fill="var(--ink)" textAnchor="middle" letterSpacing="-0.5">{total.toLocaleString()}</text>
      <text x={cx} y={cy+18} fontSize="11" fill="var(--ink-3)" textAnchor="middle">{label}</text>
    </svg>
  );
}

function HBar({items, suffix=''}){
  const max = Math.max(...items.map(i=>Math.abs(i.value)));
  return (
    <div style={{display:'flex',flexDirection:'column',gap:14}}>
      {items.map((it,i)=>(
        <div key={i} style={{display:'grid',gridTemplateColumns:'90px 1fr 56px',alignItems:'center',gap:12}}>
          <div style={{fontSize:13,color:'var(--ink-2)',fontWeight:500}}>{it.label}</div>
          <div className="bar"><span style={{width:(Math.abs(it.value)/max*100)+'%',background:it.color||'#F5A524'}}/></div>
          <div className="mono" style={{fontSize:12.5,color:'var(--ink)',fontWeight:600,textAlign:'right'}}>{it.value>0?'+':''}{it.value}{suffix}</div>
        </div>
      ))}
    </div>
  );
}

function Sparkline({data, w=80, h=24, color='#F5A524', fill=true}){
  if(!data || !data.length) return null;
  const min = Math.min(...data), max = Math.max(...data);
  const range = max-min || 1;
  const pts = data.map((v,i)=>({
    x: (i/(data.length-1))*w,
    y: h - ((v-min)/range)*h*0.85 - h*0.1
  }));
  const path = smoothPath(pts);
  const area = `${path} L ${pts[pts.length-1].x} ${h} L ${pts[0].x} ${h} Z`;
  return (
    <svg className="spark" width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
      {fill && <path d={area} fill={color} opacity="0.12"/>}
      <path d={path} fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  );
}

function ForecastChart({data, height=300}){
  const W=920, H=height;
  const pad={l:50,r:20,t:20,b:30};
  const innerW = W-pad.l-pad.r, innerH = H-pad.t-pad.b;
  const all = data.flatMap(d=>[d.actual,d.forecast,d.upper,d.lower].filter(v=>v!=null));
  const maxV = Math.ceil(Math.max(...all)/5000)*5000;
  const x = i => pad.l + (i/(data.length-1))*innerW;
  const y = v => pad.t + innerH - (v/maxV)*innerH;

  const actualPts = data.filter(d=>d.actual!=null).map((d,i)=>({x:x(data.indexOf(d)),y:y(d.actual)}));
  const fcPts = data.filter(d=>d.forecast!=null).map((d)=>({x:x(data.indexOf(d)),y:y(d.forecast)}));
  const upperPts = data.filter(d=>d.upper!=null).map((d)=>({x:x(data.indexOf(d)),y:y(d.upper)}));
  const lowerPts = data.filter(d=>d.lower!=null).map((d)=>({x:x(data.indexOf(d)),y:y(d.lower)}));

  const bandPath = `${smoothPath(upperPts)} L ${lowerPts[lowerPts.length-1].x} ${lowerPts[lowerPts.length-1].y} ${smoothPath([...lowerPts].reverse()).replace(/^M/,'L')} Z`;

  const splitX = x(60);

  const ticks = [0,1,2,3,4].map(i=>maxV/4*i);
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{display:'block'}}>
      <defs>
        <linearGradient id="fcBand" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#F5A524" stopOpacity="0.22"/>
          <stop offset="100%" stopColor="#F5A524" stopOpacity="0.04"/>
        </linearGradient>
      </defs>
      {ticks.map((t,i)=>(
        <g key={i}>
          <line x1={pad.l} x2={W-pad.r} y1={y(t)} y2={y(t)} stroke="var(--line-2)" strokeDasharray={i===0?'none':'3 4'}/>
          <text x={pad.l-8} y={y(t)+4} fontSize="11" fill="var(--ink-3)" textAnchor="end" fontFamily="JetBrains Mono">{(t/1000).toFixed(0)}K</text>
        </g>
      ))}
      {/* Forecast region */}
      <rect x={splitX} y={pad.t} width={W-pad.r-splitX} height={innerH} fill="var(--amber-bg)" opacity="0.6"/>
      <line x1={splitX} x2={splitX} y1={pad.t} y2={pad.t+innerH} stroke="var(--amber)" strokeWidth="1.5" strokeDasharray="4 4"/>
      <text x={splitX+8} y={pad.t+14} fontSize="10.5" fill="var(--amber-2)" fontWeight="700" letterSpacing="0.04em">PRONÓSTICO IA →</text>

      {/* Confidence band */}
      <path d={bandPath} fill="url(#fcBand)" stroke="none"/>
      {/* Actual line */}
      <path d={smoothPath(actualPts)} fill="none" stroke="#1A1614" strokeWidth="2" strokeLinecap="round"/>
      {/* Forecast line */}
      <path d={smoothPath(fcPts)} fill="none" stroke="#F5A524" strokeWidth="2.4" strokeLinecap="round" strokeDasharray="0"/>

      {/* X labels */}
      {[0,15,30,45,60,75,89].map(i=>{
        const day = i+1;
        const month = i<31?'mar':i<61?'abr':'may';
        const dom = i<31?day:i<61?day-31:day-61;
        return <text key={i} x={x(i)} y={H-8} fontSize="11" fill="var(--ink-3)" textAnchor="middle" fontFamily="JetBrains Mono">{dom} {month}</text>;
      })}
    </svg>
  );
}

// Heatmap by store x category
function Heatmap({rows, cols, values, format=(v)=>v}){
  const max = Math.max(...values.flat());
  const min = Math.min(...values.flat());
  const colorFor = v => {
    const t = (v-min)/(max-min||1);
    // amber scale
    return `rgba(245, 165, 36, ${0.08 + t*0.85})`;
  };
  return (
    <div style={{overflowX:'auto'}}>
      <table style={{borderCollapse:'separate',borderSpacing:4,width:'100%'}}>
        <thead>
          <tr>
            <th></th>
            {cols.map(c=><th key={c} style={{fontSize:11,fontWeight:600,color:'var(--ink-3)',textAlign:'center',padding:'4px 0',textTransform:'uppercase',letterSpacing:'0.04em'}}>{c}</th>)}
          </tr>
        </thead>
        <tbody>
          {rows.map((r,i)=>(
            <tr key={r}>
              <td style={{fontSize:12.5,color:'var(--ink-2)',fontWeight:500,paddingRight:8,whiteSpace:'nowrap'}}>{r}</td>
              {cols.map((c,j)=>(
                <td key={j} className="mono" style={{background:colorFor(values[i][j]),color: ((values[i][j]-min)/(max-min||1))>0.55 ? 'var(--ink)' : 'var(--ink-2)',fontSize:12,fontWeight:600,textAlign:'center',padding:'10px 0',borderRadius:6,minWidth:64}}>{format(values[i][j])}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Object.assign(window, { LineChart, Donut, HBar, Sparkline, ForecastChart, Heatmap, smoothPath });