// CSS Box Shadow Generator — build single or multi-layer box shadows with live preview.

window.TOOL_HANDLERS['css-box-shadow'] = function CssBoxShadowTool() {
  const makeShadow = (overrides) => ({
    x: 5, y: 5, blur: 15, spread: 0,
    color: '#000000', opacity: 0.25, inset: false,
    ...overrides,
  });

  const [shadows, setShadows] = React.useState([makeShadow()]);
  const [activeIdx, setActiveIdx] = React.useState(0);
  const [copied, setCopied] = React.useState(false);

  const presets = {
    Subtle:  [makeShadow({ x: 0, y: 1, blur: 3, spread: 0, opacity: 0.12 })],
    Medium:  [makeShadow({ x: 0, y: 4, blur: 12, spread: 0, opacity: 0.15 })],
    Large:   [makeShadow({ x: 0, y: 10, blur: 30, spread: -5, opacity: 0.2 })],
    Sharp:   [makeShadow({ x: 4, y: 4, blur: 0, spread: 0, opacity: 0.25 })],
    Dreamy:  [
      makeShadow({ x: 0, y: 4, blur: 6, spread: -1, opacity: 0.1 }),
      makeShadow({ x: 0, y: 10, blur: 25, spread: -5, opacity: 0.1 }),
    ],
  };

  const active = shadows[activeIdx] || shadows[0];

  const updateActive = (field, val) => {
    setShadows(prev => prev.map((s, i) => i === activeIdx ? { ...s, [field]: val } : s));
  };

  const addShadow = () => {
    setShadows(prev => [...prev, makeShadow()]);
    setActiveIdx(shadows.length);
  };

  const removeShadow = (idx) => {
    if (shadows.length <= 1) return;
    setShadows(prev => prev.filter((_, i) => i !== idx));
    setActiveIdx(ai => ai >= idx ? Math.max(0, ai - 1) : ai);
  };

  const hexToRgba = (hex, opacity) => {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
  };

  const shadowToCSS = (s) => {
    const rgba = hexToRgba(s.color, s.opacity);
    const insetStr = s.inset ? 'inset ' : '';
    return `${insetStr}${s.x}px ${s.y}px ${s.blur}px ${s.spread}px ${rgba}`;
  };

  const fullCSS = shadows.map(shadowToCSS).join(', ');
  const cssText = `box-shadow: ${fullCSS};`;

  const boxStyle = {
    width: 160, height: 160, borderRadius: 12,
    background: 'var(--id-surface)',
    boxShadow: fullCSS,
  };

  const copyCSS = () => {
    navigator.clipboard.writeText(cssText);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  const SliderRow = ({ label, min, max, step, value, onChange, unit }) => (
    <div style={{ marginBottom: 10 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--id-text)', marginBottom: 4 }}>
        <span>{label}</span>
        <span style={{ fontFamily: 'monospace', opacity: 0.7 }}>{value}{unit || 'px'}</span>
      </div>
      <input type="range" min={min} max={max} step={step || 1} value={value}
             onChange={(e) => onChange(+e.target.value)}
             style={{ width: '100%', accentColor: 'var(--id-primary)' }} />
    </div>
  );

  return (
    <div className="mini-tool">
      {/* Shadow layers tabs */}
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 16 }}>
        {shadows.map((s, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            <button className={`filter-pill${activeIdx === i ? ' active' : ''}`}
                    onClick={() => setActiveIdx(i)}>
              Shadow {i + 1}
            </button>
            {shadows.length > 1 && (
              <button onClick={() => removeShadow(i)}
                      style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--id-text)', opacity: 0.5, padding: 2 }}>
                <window.Icon name="x" size={12} />
              </button>
            )}
          </div>
        ))}
        <button className="filter-pill" onClick={addShadow}>+ Add</button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'start' }}>
        {/* Controls */}
        <div>
          <SliderRow label="Offset X" min={-50} max={50} value={active.x} onChange={(v) => updateActive('x', v)} />
          <SliderRow label="Offset Y" min={-50} max={50} value={active.y} onChange={(v) => updateActive('y', v)} />
          <SliderRow label="Blur" min={0} max={100} value={active.blur} onChange={(v) => updateActive('blur', v)} />
          <SliderRow label="Spread" min={-50} max={50} value={active.spread} onChange={(v) => updateActive('spread', v)} />
          <SliderRow label="Opacity" min={0} max={1} step={0.01} value={active.opacity}
                     onChange={(v) => updateActive('opacity', v)} unit="" />

          <div className="mini-row" style={{ marginTop: 8, gap: 12 }}>
            <div className="mini-field" style={{ flex: 1 }}>
              <label className="mini-label">Color</label>
              <input type="color" value={active.color} onChange={(e) => updateActive('color', e.target.value)}
                     style={{ width: '100%', height: 36, border: '1px solid var(--id-border)', borderRadius: 6, padding: 2, cursor: 'pointer' }} />
            </div>
            <div className="mini-field" style={{ flex: 1 }}>
              <label className="mini-label">Inset</label>
              <label style={{ display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', marginTop: 8 }}>
                <input type="checkbox" checked={active.inset}
                       onChange={(e) => updateActive('inset', e.target.checked)} />
                <span style={{ fontSize: 13, color: 'var(--id-text)' }}>Inset shadow</span>
              </label>
            </div>
          </div>
        </div>

        {/* Preview */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: 'var(--id-bg)', borderRadius: 12, padding: 40,
          border: '1px solid var(--id-border)', minHeight: 240,
        }}>
          <div style={boxStyle} />
        </div>
      </div>

      {/* Presets */}
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 16, marginBottom: 16 }}>
        {Object.entries(presets).map(([name, preset]) => (
          <button key={name} className="filter-pill" onClick={() => { setShadows(preset); setActiveIdx(0); }}>
            {name}
          </button>
        ))}
      </div>

      {/* CSS output */}
      <div className="mini-label">CSS</div>
      <textarea className="mini-input" readOnly value={cssText}
                style={{ fontFamily: 'monospace', fontSize: 13, minHeight: 48, resize: 'vertical', width: '100%' }} />

      <div className="cmp-actions">
        <button className="btn btn-primary" onClick={copyCSS}>
          <window.Icon name={copied ? 'check' : 'doc'} size={16} />
          {copied ? 'Copied!' : 'Copy CSS'}
        </button>
      </div>
    </div>
  );
};