/* settings-atoms.jsx — reusable form atoms for the settings page.
   All components expect plain values + onChange callbacks (controlled mode). */

// ── Card with gradient accent + header ──────────────────────────────────
const SCard = ({ accent, iconBg, iconColor, iconName, title, subtitle, right, children, style }) => (
  <section className="sc-card" style={{
    ...(accent ? {'--accent': accent} : null),
    ...style,
  }}>
    <header className="sc-card-head">
      <span className="icon-circle" style={{
        background: iconBg || 'rgba(91,168,255,.12)',
      }}>
        <Icon name={iconName} size={18} color={iconColor || 'var(--blue)'}/>
      </span>
      <div style={{flex: '1', minWidth: 0}}>
        <h2>{title}</h2>
        {subtitle && <div className="sub">{subtitle}</div>}
      </div>
      {right && <div className="right">{right}</div>}
    </header>
    {children}
  </section>
);

// ── Generic text/number input ───────────────────────────────────────────
const SField = ({label, help, value, onChange, type='text', unit, placeholder, readOnly, disabled}) => {
  const handle = (e) => {
    if (readOnly || disabled) return;
    if (type === 'number'){
      const v = e.target.value;
      if (v === '' || v === '-') { onChange(v); return; }
      const n = parseFloat(v);
      onChange(isNaN(n) ? 0 : n);
    } else {
      onChange(e.target.value);
    }
  };
  return (
    <div>
      {label && <label className="sc-field-label" style={disabled ? {opacity:.45} : undefined}>{label}</label>}
      <div className={unit ? "sc-input-with-unit" : ""} style={disabled ? {opacity:.45} : undefined}>
        <input className="sc-input" type={type === 'number' ? 'text' : type}
          value={value ?? ''}
          onChange={handle}
          placeholder={placeholder}
          readOnly={readOnly}
          disabled={disabled === true}
          inputMode={type === 'number' ? 'decimal' : undefined}/>
        {unit && <span className="unit">{unit}</span>}
      </div>
      {help && <div className="sc-field-help">{help}</div>}
    </div>
  );
};

// ── Select ──────────────────────────────────────────────────────────────
const SSelect = ({label, help, value, onChange, options}) => (
  <div>
    {label && <label className="sc-field-label">{label}</label>}
    <select className="sc-select" value={value ?? ''} onChange={(e)=>onChange(e.target.value)}>
      {options.map(o => (
        typeof o === 'string'
          ? <option key={o} value={o}>{o}</option>
          : <option key={o.value} value={o.value}>{o.label}</option>
      ))}
    </select>
    {help && <div className="sc-field-help">{help}</div>}
  </div>
);

// ── Pill toggle (left of label) ─────────────────────────────────────────
const SToggle = ({label, value, onChange}) => (
  <label className={`sc-toggle ${value ? 'on' : ''}`}>
    <input type="checkbox" checked={!!value} onChange={(e)=>onChange(e.target.checked)}/>
    <span className="track"/>
    {label && <span className="lbl">{label}</span>}
  </label>
);

// ── Check row (green circle with checkmark on the left) ────────────────
const SCheck = ({label, help, value, onChange}) => (
  <label className={`sc-check ${value ? 'on' : ''}`}>
    <input type="checkbox" checked={!!value} onChange={(e)=>onChange(e.target.checked)}/>
    <span className="ic">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" width="11" height="11">
        <path d="M4 12l5 5L20 6"/>
      </svg>
    </span>
    <div>
      <span className="lbl">{label}</span>
      {help && <span className="help">{help}</span>}
    </div>
  </label>
);

// ── Ja/Nej-segment (tydligt svar på ja/nej-frågor) ────────────────────
const SYesNo = ({label, help, value, onChange, yes='Ja', no='Nej'}) => (
  <div className="sc-yesno">
    <div className="sc-yesno-q">
      <span className="lbl">{label}</span>
      {help && <span className="help">{help}</span>}
    </div>
    <div className="sc-seg" role="group">
      <button type="button" className={value ? 'on yes' : ''} onClick={()=>onChange(true)}>{yes}</button>
      <button type="button" className={!value ? 'on no' : ''} onClick={()=>onChange(false)}>{no}</button>
    </div>
  </div>
);

// ── 12-month picker, value är KALENDERMÅNADER 1..12 (backend 31/8: chipsen
//    sparade index 0..11, vilket försköt säsongsgränserna en månad) ────────
const SMonthPicker = ({value=[], onChange}) => {
  const names = ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec'];
  const set = new Set(value || []);
  const toggle = (m) => {
    if (set.has(m)) set.delete(m); else set.add(m);
    onChange([...set].sort((a,b)=>a-b));
  };
  return (
    <div className="sc-months">
      {names.map((m,i)=>(
        <button key={i} type="button"
          className={`sc-month-chip ${set.has(i+1)?'on':''}`}
          onClick={()=>toggle(i+1)}>
          <span className="dot">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" width="7" height="7">
              <path d="M4 12l5 5L20 6"/>
            </svg>
          </span>
          {m}
        </button>
      ))}
    </div>
  );
};

// ── Read-only field with copy-to-clipboard button ──────────────────────
const SCopyField = ({label, value, help}) => {
  const [copied, setCopied] = React.useState(false);
  const onCopy = async () => {
    try {
      await navigator.clipboard.writeText(value || '');
      setCopied(true);
      setTimeout(()=>setCopied(false), 1500);
    } catch(e){ /* ignore */ }
  };
  return (
    <div>
      {label && <label className="sc-field-label">{label}</label>}
      <div className="sc-copy">
        <input className="sc-input readonly" type="text" value={value || ''} readOnly/>
        <button type="button" className={`copy-btn ${copied?'copied':''}`} onClick={onCopy} title="Kopiera">
          {copied ? (
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" width="16" height="16">
              <path d="M4 12l5 5L20 6"/>
            </svg>
          ) : (
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" width="16" height="16">
              <rect x="9" y="9" width="11" height="11" rx="2"/>
              <path d="M5 15V5a2 2 0 0 1 2-2h10"/>
            </svg>
          )}
        </button>
      </div>
      {help && <div className="sc-field-help">{help}</div>}
    </div>
  );
};

/* SNav — kategorinav för inställningssidan (2026-06-11, flik-läge).
   Kontrollerad komponent: föräldern äger aktiv kategori och visar BARA den
   kategorins kort (egen "sida" per kategori — användarönskemål, ersätter
   scrollspy-långrullen). Desktop (≥1160px): vertikal rail till vänster.
   Smalare: horisontell chip-rad under topbaren.
   OBS (bevarat lärdomsmönster, se DESIGN_STATE 7h): rAF och
   scrollTo({behavior:'smooth'}) är opålitliga i inbäddade vyer — undvik
   dem för all framtida scroll-logik här. ALDRIG scrollIntoView. */
const SNav = ({ sections, active, onSelect }) => (
  <nav className="settings-nav" aria-label="Inställningskategorier">
    {sections.map((sec) => (
      <button key={sec.id} type="button"
        className={`ni${active === sec.id ? ' on' : ''}`}
        onClick={() => onSelect(sec.id)}>
        <span className="dot" style={{background: sec.color}}></span>{sec.label}
      </button>
    ))}
  </nav>
);

/* ── BETA-märkning (André 7/9) ───────────────────────────────────────────────
   Samma två delar som på dashboarden (GcBeta/GcBetaNote i gc-core): pill vid
   rubriken är märkningen, notisen säger vad användaren ska göra åt den. */
const SBeta = ({ title }) => (
  <span title={title || 'Funktionen är ny och inte färdigtestad'} style={{
    display:'inline-block', fontSize:9.5, fontWeight:700, letterSpacing:'.12em',
    textTransform:'uppercase', color:'#F4C84B', background:'rgba(244,200,75,.12)',
    border:'1px solid rgba(244,200,75,.35)', borderRadius:999, padding:'2px 7px',
  }}>beta</span>
);

const SBetaNote = ({ children }) => (
  <div style={{
    display:'flex', gap:8, alignItems:'flex-start', marginBottom:14,
    fontSize:12, lineHeight:1.55, color:'#E8C97A',
    background:'rgba(244,200,75,.07)', border:'1px solid rgba(244,200,75,.25)',
    borderRadius:10, padding:'9px 11px',
  }}>
    <span style={{flexShrink:0, fontSize:9.5, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase', color:'#F4C84B', paddingTop:2}}>Beta</span>
    <span>{children}</span>
  </div>
);

Object.assign(window, { SCard, SField, SSelect, SToggle, SCheck, SYesNo, SMonthPicker, SCopyField, SNav, SBeta, SBetaNote });