/* gc-bil-ui.jsx — byggstenar för Bil-fliken (v766). Förenklad efter mockupen Bil-forenklad.html; André 3/10
   lät mig bestämma. Bara presentation: sparvägen, reglerna och texterna bor i gc-bil.jsx. Namnen börjar på Gbu
   eftersom text/babel-filerna delar scope. */
const GBU_I = { chev:'M9 6l6 6-6 6', down:'M6 9l6 6 6-6', bolt:'M13 2L4 14h7l-1 8 9-12h-7z',
  sun:'M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6L7 7M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z',
  x:'M6 6l12 12M18 6L6 18', plus:'M12 5v14M5 12h14', minus:'M5 12h14',
  plug:'M9 2v5M15 2v5M6 7h12v4a6 6 0 0 1-12 0zM12 17v5' };

function GbuIcon({ d, size = 16, className = '', sw = 1.9 }){
  return <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true"><path d={d}/></svg>;
}

/* Med onClick en knapp (rollen switch), utan en ren bild inne i en radknapp. */
function GbuSwitch({ on, onClick, label, tone = 'emerald', small }){
  const bg = on ? (tone === 'amber' ? 'bg-amber-400' : 'bg-emerald-500') : 'bg-slate-600';
  const cls = `relative shrink-0 rounded-full transition-colors ${small ? 'h-6 w-10' : 'h-7 w-12'} ${bg}`;
  const knob = <span className={`absolute top-0.5 rounded-full bg-white shadow transition-all ${small ? 'h-5 w-5' : 'h-6 w-6'} ${on ? (small ? 'left-[18px]' : 'left-[22px]') : 'left-0.5'}`}/>;
  return onClick
    ? <button type="button" role="switch" aria-checked={on} aria-label={label} onClick={onClick} className={cls}>{knob}</button>
    : <span aria-hidden="true" className={cls}>{knob}</span>;
}

/* En stapel för båda talen: fyllt = nuvarande laddning, ljusgrönt = det som ska laddas, linje = mål.
   Stapeln ändrar det tal som är valt under den. Tryck eller dra i sidled; ett lodrätt svep scrollar
   sidan och ändrar inget (pan-y + pointercancel). Piltangenterna ändrar en procent, med skift tio. */
function GbuBattery({ cur, target, edit, onChange }){
  const ref = React.useRef(null), drag = React.useRef(null);
  const c = cur === '' || cur == null ? null : Number(cur);
  const t = Number(target) || 0;
  const val = edit === 'cur' ? (c ?? 0) : t;
  const at = (x) => { const r = ref.current.getBoundingClientRect(); return Math.round(Math.max(0, Math.min(1, (x - r.left) / r.width)) * 100); };
  return (
    <div ref={ref} role="slider" tabIndex={0} aria-label={edit === 'cur' ? 'Nuvarande laddning' : 'Mål'}
      aria-valuemin={0} aria-valuemax={100} aria-valuenow={val}
      onKeyDown={(e) => { const s = e.shiftKey ? 10 : 1;
        if (e.key === 'ArrowRight' || e.key === 'ArrowUp'){ e.preventDefault(); onChange(Math.min(100, val + s)); }
        if (e.key === 'ArrowLeft' || e.key === 'ArrowDown'){ e.preventDefault(); onChange(Math.max(0, val - s)); } }}
      onPointerDown={(e) => { drag.current = { id:e.pointerId, x:e.clientX, moved:false }; }}
      onPointerMove={(e) => { const d = drag.current; if (!d || d.id !== e.pointerId) return;
        if (!d.moved && Math.abs(e.clientX - d.x) < 4) return;
        if (!d.moved){ d.moved = true; try { ref.current.setPointerCapture(e.pointerId); } catch(_){} }
        onChange(at(e.clientX)); }}
      onPointerUp={(e) => { const d = drag.current; drag.current = null; if (d && !d.moved) onChange(at(e.clientX)); }}
      onPointerCancel={() => { drag.current = null; }}
      style={{ touchAction:'pan-y' }}
      className="relative h-14 cursor-pointer select-none rounded-2xl bg-slate-800 outline-none focus-visible:ring-2 focus-visible:ring-sky-400">
      <div className="absolute inset-0 overflow-hidden rounded-2xl">
        {[25, 50, 75].map(k => <div key={k} className="absolute inset-y-4 w-px bg-slate-700" style={{ left: k + '%' }}/>)}
        {c != null && <div className="absolute inset-y-0 left-0 bg-sky-400" style={{ width: c + '%' }}/>}
        {t > (c ?? 0) && <div className="absolute inset-y-0 bg-emerald-400/20" style={{ left: (c ?? 0) + '%', width: (t - (c ?? 0)) + '%' }}/>}
      </div>
      <div className="pointer-events-none absolute inset-y-0 w-0.5 bg-emerald-300" style={{ left: `calc(${t}% - 1px)` }}/>
      {/* Handtaget står mitt över strecket (mål) eller fyllningens kant (nu), samma x som fingret ger (v769).
          Bara vid 0 och 100 % hålls det 4 px innanför kanten. */}
      <div className="pointer-events-none absolute top-1/2 h-9 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow-[0_0_0_3px_rgba(15,23,42,.55)]"
        style={{ left: `clamp(4px, ${val}%, calc(100% - 4px))` }}/>
    </div>
  );
}

function GbuValTab({ label, value, on, tone, onSelect, onStep }){
  const col = tone === 'sky' ? 'text-sky-200' : 'text-emerald-300';
  const ring = tone === 'sky' ? 'ring-sky-400/70' : 'ring-emerald-400/70';
  const empty = value === '' || value == null;
  const step = (s) => (
    <button type="button" aria-label={`${label} ${s > 0 ? 'upp' : 'ner'} en procent`} onClick={() => onStep(s)} style={{ touchAction:'manipulation' }}
      className="flex h-11 w-10 shrink-0 items-center justify-center rounded-lg text-slate-300 hover:bg-slate-700/60 hover:text-white">
      <GbuIcon d={s > 0 ? GBU_I.plus : GBU_I.minus} size={18}/>
    </button>
  );
  return (
    <div className={`flex min-w-0 flex-1 items-center rounded-xl transition-colors ${on ? 'bg-slate-800 ring-1 ' + ring : 'bg-slate-800/40'}`}>
      {on && step(-1)}
      <button type="button" onClick={onSelect} aria-pressed={on} className="min-w-0 flex-1 py-2 text-center">
        <span className="block text-[11px] font-semibold text-slate-400">{label}</span>
        <span className={`block text-[22px] font-bold leading-tight ${col}`} style={window.GC_MONO}>{empty ? '—' : value}{!empty && <span className="text-sm"> %</span>}</span>
      </button>
      {on && step(1)}
    </div>
  );
}

/* Backendens plan ritad från nu till fönstrets slut. Inga egna tal: blocken är planens kvartar.
   depQ = avresans kvart i fönstret (dag 0 = i dag), ritas bara inne i fönstret. */
function GbuTimeline({ ranges, from, to, depQ, depTime, tomLbl, colOf }){
  const span = Math.max(1, to - from);
  const xp = (q) => Math.max(0, Math.min(100, ((q - from) / span) * 100));
  const ticks = [24, 48, 72, 96, 120, 144, 168].filter(q => q > from + 6 && q < to);
  const depX = depQ != null && depQ > from && depQ <= to ? xp(depQ) : null;
  const lbl = (q) => q % 96 === 0 ? tomLbl : String(Math.floor((q % 96) / 4)).padStart(2, '0');
  return (
    <div className="mt-2">
      <div className="relative h-5">
        {depX != null && <span className="absolute top-0.5 whitespace-nowrap text-[11px] font-semibold text-emerald-300"
          style={{ left: depX + '%', transform: depX > 80 ? 'translateX(-100%)' : depX < 15 ? 'none' : 'translateX(-50%)' }}>avresa {depTime}</span>}
      </div>
      <div className="relative h-8 overflow-hidden rounded-lg bg-slate-800/80">
        {ticks.map(q => <div key={q} className="absolute inset-y-0 w-px bg-slate-700/80" style={{ left: xp(q) + '%' }}/>)}
        {ranges.map((r, k) => <div key={k} className="absolute inset-y-1.5 rounded-[3px]"
          style={{ left: xp(r.start) + '%', width: Math.max(1, xp(r.end) - xp(r.start)) + '%', background: colOf(r.src) }}/>)}
        {depX != null && <div className="absolute inset-y-0 w-0.5 bg-emerald-300" style={{ left: `calc(${depX}% - 1px)` }}/>}
      </div>
      <div className="relative mt-1 h-4 text-[10px] text-slate-500" style={window.GC_MONO}>
        <span className="absolute left-0">nu</span>
        {ticks.map(q => <span key={q} className="absolute -translate-x-1/2" style={{ left: xp(q) + '%' }}>{lbl(q)}</span>)}
      </div>
    </div>
  );
}

/* Det man ställer in en gång: ihopfällt med valt värde, förklaringarna i den öppnade raden. */
function GbuSetRow({ id, title, value, note, tag, tagBad, open, onToggle, children }){
  return (
    <div className="border-t border-slate-800">
      <button type="button" onClick={() => onToggle(id)} aria-expanded={open} className="flex min-h-[52px] w-full flex-col justify-center px-4 py-2 text-left">
        <span className="flex w-full items-center gap-3">
          <span className="min-w-0 flex-1 text-sm text-slate-200">{title}</span>
          {tag && <span className={`shrink-0 whitespace-nowrap rounded-full border px-2 py-0.5 text-[10px] font-bold ${tagBad ? 'border-rose-400/50 bg-rose-500/10 text-rose-200' : 'border-amber-300/40 bg-amber-300/10 text-amber-200'}`}>{tag}</span>}
          <span className="shrink-0 whitespace-nowrap text-right text-sm font-semibold text-slate-400">{value}</span>
          <GbuIcon d={GBU_I.down} size={16} className={`shrink-0 text-slate-500 transition-transform ${open ? 'rotate-180' : ''}`}/>
        </span>
        {note && <span className="mt-0.5 block text-[11px] text-rose-300">{note}</span>}
      </button>
      {open && <div className="px-4 pb-4">{children}</div>}
    </div>
  );
}

function GbuToggleRow({ on, tone, title, desc, onClick }){
  const onCls = tone === 'amber' ? 'border-amber-400/50 bg-amber-500/10' : 'border-emerald-400/50 bg-emerald-500/10';
  const tCol = on ? (tone === 'amber' ? 'text-amber-200' : 'text-emerald-200') : 'text-slate-200';
  return (
    <button type="button" role="switch" aria-checked={on} onClick={onClick}
      className={`flex w-full items-start gap-3 rounded-xl border px-3 py-2.5 text-left transition-colors ${on ? onCls : 'border-slate-700 bg-slate-800/40'}`}>
      <span className="min-w-0 flex-1">
        <span className={`block text-sm font-bold ${tCol}`}>{title}</span>
        <span className="mt-0.5 block text-xs leading-snug text-slate-400">{desc}</span>
      </span>
      <GbuSwitch on={on} tone={tone} small/>
    </button>
  );
}

/* Två laddboxar: en flik per box, en box i taget. items: [{key, name, sub, col}]. */
function GbuBoxTabs({ items, sel, onSel }){
  return (
    <div role="tablist" aria-label="Laddboxar" className="grid grid-cols-2 gap-1 rounded-2xl border border-slate-800 bg-slate-900/40 p-1">
      {items.map((it, k) => { const on = k === sel; return (
        <button key={it.key} type="button" role="tab" aria-selected={on} onClick={() => onSel(k)}
          className={`min-w-0 rounded-xl px-3 py-2 text-left transition-colors ${on ? 'bg-slate-800' : 'hover:bg-slate-800/40'}`}>
          <span className={`flex items-center gap-1.5 text-sm font-bold ${on ? 'text-slate-50' : 'text-slate-300'}`}>
            <span className="h-2 w-2 shrink-0 rounded-full" style={{ background: it.col }}/><span className="truncate">{it.name}</span>
          </span>
          {it.sub && <span className="block truncate text-[11px] text-slate-400">{it.sub}</span>}
        </button>); })}
    </div>
  );
}

/* Spara och Ångra i en rad ovanför bottenflikarna. Spärren (v697/v698) står i den gula ramen. */
function GbuSaveBar({ dirty, blocked, toast, onSave, onUndo }){
  if (!dirty && !toast) return null;
  const tc = toast ? ({ ok:'text-emerald-300', warn:'text-yellow-300', err:'text-rose-300' }[toast.kind] || 'text-slate-300') : 'text-slate-200';
  return (
    <div className="gbu-savebar fixed inset-x-0 z-30 px-3">
      <div className="mx-auto max-w-2xl rounded-2xl border border-slate-700 bg-[#111a2b]/95 p-2.5 shadow-2xl shadow-black/60 backdrop-blur lg:max-w-4xl">
        {dirty && blocked && <p className="mb-2 rounded-lg border border-yellow-400/50 bg-yellow-500/[0.08] px-2.5 py-1.5 text-xs leading-relaxed text-yellow-300">Lägg till en avresedag i veckoschemat eller välj ett annat laddläge för att spara.</p>}
        <div className="flex items-center gap-2">
          <span className={`min-w-0 flex-1 pl-1 text-sm font-semibold leading-snug ${tc}`}>
            {toast ? toast.msg : 'Osparade ändringar'}
            {toast && toast.link && <a href={toast.link.href} className="ml-1 underline decoration-rose-300/50 hover:text-rose-200">{toast.link.txt}</a>}
          </span>
          {dirty && <button type="button" onClick={onUndo} className="h-10 shrink-0 rounded-lg px-3 text-sm font-semibold text-slate-300 hover:text-white">Ångra</button>}
          {dirty && <button type="button" onClick={onSave} disabled={blocked}
            className={`h-10 shrink-0 rounded-lg px-5 text-sm font-bold ${blocked ? 'bg-slate-800 text-slate-500' : 'bg-sky-400 text-slate-950 hover:bg-sky-300'}`}>Spara</button>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { GBU_I, GbuIcon, GbuSwitch, GbuBattery, GbuValTab, GbuTimeline, GbuSetRow, GbuToggleRow, GbuBoxTabs, GbuSaveBar });