// CSS Glassmorphism Generator — frosted glass effect with live preview and CSS output.

window.TOOL_HANDLERS['css-glassmorphism'] = function CssGlassmorphismTool() {
  const [blur, setBlur] = React.useState(10);
  const [opacity, setOpacity] = React.useState(0.25);
  const [bgColor, setBgColor] = React.useState('#ffffff');
  const [radius, setRadius] = React.useState(16);
  const [showBorder, setShowBorder] = React.useState(true);
  const [copied, setCopied] = React.useState(false);

  const hexToRgb = (hex) => {
    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 { r, g, b };
  };

  const { r, g, b } = hexToRgb(bgColor);

  const glassStyle = {
    background: `rgba(${r}, ${g}, ${b}, ${opacity})`,
    backdropFilter: `blur(${blur}px)`,
    WebkitBackdropFilter: `blur(${blur}px)`,
    borderRadius: `${radius}px`,
    border: showBorder ? '1px solid rgba(255, 255, 255, 0.18)' : 'none',
    padding: '32px 28px',
    color: '#ffffff',
    textAlign: 'center',
    width: '260px',
    maxWidth: '80%',
  };

  const cssLines = [
    `background: rgba(${r}, ${g}, ${b}, ${opacity});`,
    `backdrop-filter: blur(${blur}px);`,
    `-webkit-backdrop-filter: blur(${blur}px);`,
    `border-radius: ${radius}px;`,
  ];
  if (showBorder) {
    cssLines.push('border: 1px solid rgba(255, 255, 255, 0.18);');
  }
  const cssText = cssLines.join('\n');

  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 }}>{typeof value === 'number' && step && step < 1 ? value.toFixed(2) : value}{unit}</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">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'start' }}>
        {/* Controls */}
        <div>
          <SliderRow label="Blur" min={0} max={30} value={blur} onChange={setBlur} unit="px" />
          <SliderRow label="Transparency" min={0} max={1} step={0.01} value={opacity} onChange={setOpacity} unit="" />
          <SliderRow label="Border Radius" min={0} max={30} value={radius} onChange={setRadius} unit="px" />

          <div className="mini-row" style={{ marginTop: 8, gap: 12 }}>
            <div className="mini-field" style={{ flex: 1 }}>
              <label className="mini-label">Background Color</label>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                <input type="color" value={bgColor} onChange={(e) => setBgColor(e.target.value)}
                       style={{ width: 40, height: 36, border: '1px solid var(--id-border)', borderRadius: 6, padding: 2, cursor: 'pointer' }} />
                <input type="text" className="mini-input" value={bgColor}
                       onChange={(e) => setBgColor(e.target.value)}
                       style={{ width: 90, fontFamily: 'monospace' }} />
              </div>
            </div>
          </div>

          <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', marginTop: 14 }}>
            <input type="checkbox" checked={showBorder}
                   onChange={(e) => setShowBorder(e.target.checked)} />
            <span style={{ fontSize: 13, color: 'var(--id-text)' }}>Semi-transparent border</span>
          </label>
        </div>

        {/* Preview */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          borderRadius: 12, overflow: 'hidden',
          border: '1px solid var(--id-border)', minHeight: 280,
          position: 'relative',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 40%, #f093fb 70%, #f5576c 100%)',
        }}>
          {/* Decorative shapes behind the glass card */}
          <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
            <div style={{
              position: 'absolute', width: 120, height: 120, borderRadius: '50%',
              background: 'rgba(251, 215, 134, 0.6)', top: 20, left: 20,
            }} />
            <div style={{
              position: 'absolute', width: 80, height: 80, borderRadius: '50%',
              background: 'rgba(72, 219, 251, 0.5)', bottom: 30, right: 30,
            }} />
            <div style={{
              position: 'absolute', width: 100, height: 100, borderRadius: '50%',
              background: 'rgba(29, 209, 161, 0.5)', bottom: 60, left: 60,
            }} />
            <div style={{
              position: 'absolute', width: 60, height: 60, borderRadius: 12,
              background: 'rgba(255, 107, 107, 0.5)', top: 50, right: 50,
              transform: 'rotate(45deg)',
            }} />
          </div>

          {/* Glass card */}
          <div style={glassStyle}>
            <div style={{ fontSize: 22, fontWeight: 700, marginBottom: 8, letterSpacing: '-0.02em' }}>
              Glassmorphism
            </div>
            <div style={{ fontSize: 13, opacity: 0.85, lineHeight: 1.5 }}>
              A frosted glass effect with blur, transparency, and subtle borders.
            </div>
          </div>
        </div>
      </div>

      {/* CSS output */}
      <div className="mini-label" style={{ marginTop: 16 }}>CSS</div>
      <textarea className="mini-input" readOnly value={cssText}
                style={{ fontFamily: 'monospace', fontSize: 13, minHeight: 80, 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>
  );
};