// SVG Pattern Generator — create repeating SVG patterns for backgrounds.

window.TOOL_HANDLERS['svg-pattern'] = function SvgPatternTool() {
  const [patternType, setPatternType] = React.useState('Dots');
  const [size, setSize] = React.useState(20);
  const [color, setColor] = React.useState('#6366f1');
  const [bgColor, setBgColor] = React.useState('#ffffff');
  const [strokeWidth, setStrokeWidth] = React.useState(1.5);
  const [opacity, setOpacity] = React.useState(0.6);
  const [copied, setCopied] = React.useState('');

  const types = ['Dots', 'Lines', 'Crosses', 'Diagonal', 'Zigzag', 'Grid', 'Triangles', 'Hexagons'];

  const buildPattern = React.useCallback(() => {
    const s = size;
    const sw = strokeWidth;
    const c = color;
    const op = opacity;
    let inner = '';
    let w = s;
    let h = s;

    switch (patternType) {
      case 'Dots':
        inner = `<circle cx="${s/2}" cy="${s/2}" r="${Math.max(1.5, s/8)}" fill="${c}" opacity="${op}" />`;
        break;

      case 'Lines':
        inner = `<line x1="0" y1="${s/2}" x2="${s}" y2="${s/2}" stroke="${c}" stroke-width="${sw}" opacity="${op}" />`;
        break;

      case 'Crosses': {
        const arm = s * 0.3;
        const cx = s / 2;
        const cy = s / 2;
        inner = `<line x1="${cx - arm}" y1="${cy}" x2="${cx + arm}" y2="${cy}" stroke="${c}" stroke-width="${sw}" opacity="${op}" />`
              + `<line x1="${cx}" y1="${cy - arm}" x2="${cx}" y2="${cy + arm}" stroke="${c}" stroke-width="${sw}" opacity="${op}" />`;
        break;
      }

      case 'Diagonal':
        inner = `<line x1="0" y1="${s}" x2="${s}" y2="0" stroke="${c}" stroke-width="${sw}" opacity="${op}" />`
              + `<line x1="${-s*0.5}" y1="${s*0.5}" x2="${s*0.5}" y2="${-s*0.5}" stroke="${c}" stroke-width="${sw}" opacity="${op}" />`
              + `<line x1="${s*0.5}" y1="${s*1.5}" x2="${s*1.5}" y2="${s*0.5}" stroke="${c}" stroke-width="${sw}" opacity="${op}" />`;
        break;

      case 'Zigzag': {
        const q = s / 4;
        inner = `<polyline points="0,${s*0.75} ${q},${s*0.25} ${s/2},${s*0.75} ${s*0.75},${s*0.25} ${s},${s*0.75}" `
              + `fill="none" stroke="${c}" stroke-width="${sw}" opacity="${op}" />`;
        break;
      }

      case 'Grid':
        inner = `<line x1="0" y1="${s/2}" x2="${s}" y2="${s/2}" stroke="${c}" stroke-width="${sw}" opacity="${op}" />`
              + `<line x1="${s/2}" y1="0" x2="${s/2}" y2="${s}" stroke="${c}" stroke-width="${sw}" opacity="${op}" />`;
        break;

      case 'Triangles': {
        const tx = s / 2;
        const t1 = s * 0.2;
        const t2 = s * 0.8;
        inner = `<polygon points="${tx},${t1} ${t2},${t2} ${t1},${t2}" `
              + `fill="none" stroke="${c}" stroke-width="${sw}" opacity="${op}" />`;
        break;
      }

      case 'Hexagons': {
        // Flat-top hexagon pattern
        const hs = s * 0.5;
        const hh = hs * Math.sqrt(3) / 2;
        w = hs * 3;
        h = hh * 2;
        const hex = (cx, cy) => {
          const pts = [];
          for (let a = 0; a < 6; a++) {
            const angle = Math.PI / 3 * a;
            pts.push(`${(cx + hs * Math.cos(angle)).toFixed(2)},${(cy + hs * Math.sin(angle)).toFixed(2)}`);
          }
          return `<polygon points="${pts.join(' ')}" fill="none" stroke="${c}" stroke-width="${sw}" opacity="${op}" />`;
        };
        inner = hex(hs, hh) + hex(hs * 2.5, 0) + hex(hs * 2.5, hh * 2);
        break;
      }
    }

    return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">\n  <rect width="${w}" height="${h}" fill="${bgColor}" />\n  ${inner}\n</svg>`;
  }, [patternType, size, color, bgColor, strokeWidth, opacity]);

  const svgCode = React.useMemo(() => buildPattern(), [buildPattern]);

  const dataUri = React.useMemo(() => {
    const encoded = encodeURIComponent(svgCode)
      .replace(/'/g, '%27')
      .replace(/"/g, '%22');
    return `url("data:image/svg+xml,${encoded}")`;
  }, [svgCode]);

  const cssCode = `background-image: ${dataUri};`;

  const copySvg = () => {
    navigator.clipboard.writeText(svgCode);
    setCopied('svg');
    setTimeout(() => setCopied(''), 1200);
  };

  const copyCss = () => {
    navigator.clipboard.writeText(cssCode);
    setCopied('css');
    setTimeout(() => setCopied(''), 1200);
  };

  return (
    <div className="mini-tool">
      {/* Pattern type selector */}
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 16 }}>
        {types.map(t => (
          <button key={t}
                  className={`filter-pill ${patternType === t ? 'active' : ''}`}
                  onClick={() => setPatternType(t)}>
            {t}
          </button>
        ))}
      </div>

      {/* Controls */}
      <div className="mini-row" style={{ gap: 12, marginBottom: 16, flexWrap: 'wrap', alignItems: 'flex-end' }}>
        <div className="mini-field">
          <label className="mini-label">Size: {size}px</label>
          <input type="range" min="10" max="80" value={size}
                 onChange={(e) => setSize(Number(e.target.value))}
                 style={{ width: 100 }} />
        </div>
        <div className="mini-field">
          <label className="mini-label">Color</label>
          <input type="color" className="mini-input" value={color}
                 onChange={(e) => setColor(e.target.value)}
                 style={{ width: 40, height: 32, padding: 3, cursor: 'pointer' }} />
        </div>
        <div className="mini-field">
          <label className="mini-label">Background</label>
          <input type="color" className="mini-input" value={bgColor}
                 onChange={(e) => setBgColor(e.target.value)}
                 style={{ width: 40, height: 32, padding: 3, cursor: 'pointer' }} />
        </div>
        <div className="mini-field">
          <label className="mini-label">Stroke: {strokeWidth}</label>
          <input type="range" min="1" max="4" step="0.5" value={strokeWidth}
                 onChange={(e) => setStrokeWidth(Number(e.target.value))}
                 style={{ width: 80 }} />
        </div>
        <div className="mini-field">
          <label className="mini-label">Opacity: {opacity}</label>
          <input type="range" min="0.1" max="1" step="0.05" value={opacity}
                 onChange={(e) => setOpacity(Number(e.target.value))}
                 style={{ width: 80 }} />
        </div>
      </div>

      {/* Live preview */}
      <div style={{
        width: '100%', height: 300,
        borderRadius: 12,
        border: '1px solid var(--id-border)',
        backgroundImage: dataUri,
        backgroundRepeat: 'repeat',
        marginBottom: 16,
      }} />

      {/* SVG Code */}
      <div className="mini-field" style={{ marginBottom: 12 }}>
        <label className="mini-label">SVG Pattern Code</label>
        <textarea
          className="mini-input"
          readOnly
          value={svgCode}
          style={{
            width: '100%', minHeight: 80, resize: 'vertical',
            fontFamily: 'monospace', fontSize: 11,
          }}
          onClick={(e) => e.target.select()}
        />
      </div>

      {/* CSS Code */}
      <div className="mini-field">
        <label className="mini-label">CSS Background Property</label>
        <textarea
          className="mini-input"
          readOnly
          value={cssCode}
          style={{
            width: '100%', minHeight: 40, resize: 'vertical',
            fontFamily: 'monospace', fontSize: 11,
          }}
          onClick={(e) => e.target.select()}
        />
      </div>

      {copied && (
        <div style={{
          textAlign: 'center', marginTop: 8,
          color: 'var(--id-primary)', fontWeight: 600, fontSize: 13,
        }}>
          {copied === 'svg' ? 'SVG code copied!' : 'CSS copied!'}
        </div>
      )}

      <div className="cmp-actions">
        <button className="btn btn-secondary" onClick={copySvg}>
          <window.Icon name="clipboard" size={16} /> Copy SVG
        </button>
        <button className="btn btn-primary" onClick={copyCss}>
          <window.Icon name="clipboard" size={16} /> Copy CSS
        </button>
      </div>
    </div>
  );
};