// circuit-loader.jsx — Uiverse-style PCB loading animation (Vosoone), adapted for portfolio

const CIRCUIT_TRACES_FULL = [
  { d: 'M 246 131 L 95 131 L 95 48', cls: 'circuit-yellow', delay: '0s' },
  { d: 'M 246 151 L 72 151 L 72 48', cls: 'circuit-blue', delay: '0.25s' },
  { d: 'M 246 171 L 72 171 L 72 272', cls: 'circuit-green', delay: '0.5s' },
  { d: 'M 246 191 L 95 191 L 95 272', cls: 'circuit-purple', delay: '0.75s' },
  { d: 'M 394 131 L 545 131 L 545 48', cls: 'circuit-purple', delay: '0.12s' },
  { d: 'M 394 151 L 568 151 L 568 48', cls: 'circuit-green', delay: '0.37s' },
  { d: 'M 394 171 L 568 171 L 568 272', cls: 'circuit-blue', delay: '0.62s' },
  { d: 'M 394 191 L 545 191 L 545 272', cls: 'circuit-yellow', delay: '0.87s' },
];

const CIRCUIT_NODES_FULL = [
  { cx: 95, cy: 48 }, { cx: 72, cy: 48 }, { cx: 72, cy: 272 }, { cx: 95, cy: 272 },
  { cx: 545, cy: 48 }, { cx: 568, cy: 48 }, { cx: 568, cy: 272 }, { cx: 545, cy: 272 },
];

const CIRCUIT_TRACES_FAB = [
  { d: 'M 44 34 L 14 34 L 14 14', cls: 'circuit-purple', delay: '0s' },
  { d: 'M 44 46 L 10 46 L 10 66', cls: 'circuit-blue', delay: '0.3s' },
  { d: 'M 84 34 L 114 34 L 114 14', cls: 'circuit-green', delay: '0.15s' },
  { d: 'M 84 46 L 118 46 L 118 66', cls: 'circuit-yellow', delay: '0.45s' },
];

const CIRCUIT_NODES_FAB = [
  { cx: 14, cy: 14 }, { cx: 10, cy: 66 }, { cx: 114, cy: 14 }, { cx: 118, cy: 66 },
];

function CircuitBoardLoader({ label = 'Loading', variant = 'default', className = '' }) {
  const isFab = variant === 'fab';

  if (isFab) {
    return (
      <div className={`circuit-loader-root circuit-loader-root--fab ${className}`.trim()} aria-hidden="true">
        <div className="circuit-loader-wrap circuit-loader-wrap--fab">
          <svg className="circuit-loader-svg" viewBox="0 0 128 80" preserveAspectRatio="xMidYMid meet">
            <rect
              className="circuit-chip-body"
              x="44"
              y="28"
              width="40"
              height="24"
              rx="8"
              ry="8"
            />
            {CIRCUIT_TRACES_FAB.map((t, i) => (
              <React.Fragment key={`fab-${i}`}>
                <path className="circuit-trace-bg" d={t.d} />
                <path
                  className={`circuit-trace-flow ${t.cls}`}
                  d={t.d}
                  style={{ animationDelay: t.delay }}
                />
              </React.Fragment>
            ))}
            {CIRCUIT_NODES_FAB.map((n, i) => (
              <circle key={`fabn-${i}`} className="circuit-node" cx={n.cx} cy={n.cy} r="3.5" />
            ))}
          </svg>
        </div>
      </div>
    );
  }

  return (
    <div className={`circuit-loader-root ${className}`.trim()} aria-busy="true" aria-label={label}>
      <div className="circuit-loader-wrap">
        <svg className="circuit-loader-svg" viewBox="0 0 640 320" preserveAspectRatio="xMidYMid meet">
          {/* Pins */}
          {[126, 146, 166, 186].map((y, i) => (
            <rect
              key={`pl-${i}`}
              className="circuit-chip-pin"
              x="234"
              y={y}
              width="12"
              height="10"
              rx="2"
            />
          ))}
          {[126, 146, 166, 186].map((y, i) => (
            <rect
              key={`pr-${i}`}
              className="circuit-chip-pin"
              x="394"
              y={y}
              width="12"
              height="10"
              rx="2"
            />
          ))}

          <rect
            className="circuit-chip-body"
            x="246"
            y="114"
            width="148"
            height="92"
            rx="20"
            ry="20"
          />
          <text
            className="circuit-chip-text"
            x="320"
            y="168"
            textAnchor="middle"
          >
            {label}
          </text>

          {CIRCUIT_TRACES_FULL.map((t, i) => (
            <React.Fragment key={`tr-${i}`}>
              <path className="circuit-trace-bg" d={t.d} />
              <path
                className={`circuit-trace-flow ${t.cls}`}
                d={t.d}
                style={{ animationDelay: t.delay }}
              />
            </React.Fragment>
          ))}

          {CIRCUIT_NODES_FULL.map((n, i) => (
            <circle key={`nd-${i}`} className="circuit-node" cx={n.cx} cy={n.cy} r="5" />
          ))}
        </svg>
      </div>
    </div>
  );
}

window.CircuitBoardLoader = CircuitBoardLoader;