/* global React */
// AI Engine hub diagram — channels in, capabilities out, central core

// Icon paths reused inside SVG (so we don't need foreignObject)
const ICON_PATHS = {
  WhatsApp: "M3 21l2-5.5A8.5 8.5 0 1 1 8.5 19L3 21Z M8.5 9.5c.5 2 1.5 3 3 4l1.5-1.2c.4-.3.9-.4 1.4-.2l2.4 1c.4.2.7.6.7 1v1.4c0 .6-.4 1.2-1 1.4-3.6.8-8.4-2-9.2-5.6-.1-.6.3-1.2.8-1.4l1.3-.6c.5-.2 1-.1 1.4.2L11 10",
  Ses: "M4 9v6M8 6v12M12 4v16M16 7v10M20 10v4",
  WebChat: "M4 6h16v10H10l-4 4v-4H4z M8 10h.01M12 10h.01M16 10h.01",
  Mobil: "M9 3h6a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z M11 18h2",
  Instagram: "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z M8 12a4 4 0 1 0 8 0 4 4 0 0 0-8 0Z",
  Eposta: "M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z M3 7l9 6 9-6",
  Cagri: "M4 13a8 8 0 0 1 16 0v4a2 2 0 0 1-2 2h-2v-6h4 M4 13v4a2 2 0 0 0 2 2h2v-6H4",
  Karsilama: "M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z M4 21c0-4 4-6 8-6s8 2 8 6",
  Bilgi: "M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z M14 3v5h5M9 13h6M9 17h4",
  Operasyon: "M4 4v17h17 M8 16v-4M13 16V9M18 16v-6",
  Randevu: "M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z M3 10h18M8 3v4M16 3v4",
  Satis: "M3 4h2l2 12h12l2-8H7 M9 20a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z M18 20a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z",
};

const SVGIcon = ({ path, x, y, size = 22, color }) => (
  <svg x={x - size/2} y={y - size/2} width={size} height={size} viewBox="0 0 24 24"
       fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
    {path.split(" M ").map((d, i) => <path key={i} d={(i === 0 ? d : "M " + d)} />)}
  </svg>
);

function AIEngine({ content }) {
  // Icon order is fixed; labels come from content.engine in the active language.
  // If content is missing (e.g. AIEngine used outside the app), fall back to TR.
  const channelPaths = [ICON_PATHS.WhatsApp, ICON_PATHS.WebChat, ICON_PATHS.Instagram, ICON_PATHS.Eposta, ICON_PATHS.Cagri];
  const capPaths     = [ICON_PATHS.Operasyon, ICON_PATHS.Karsilama, ICON_PATHS.Bilgi, ICON_PATHS.Randevu, ICON_PATHS.Satis];
  const channelLabels = content?.engine?.channels || ["WhatsApp", "Web Chat", "Instagram", "E-posta", "Çağrı Merkezi"];
  const capLabels     = content?.engine?.caps     || ["Analitik", "Karşılama", "Bilgi Bankası", "Randevu", "Satış"];
  const channels = channelPaths.map((path, i) => ({ label: channelLabels[i], path }));
  const caps     = capPaths.map((path, i) => ({ label: capLabels[i], path }));

  const W = 720, H = 700;
  const cx = 360, cy = 350, coreR = 100;
  const chipW = 180, chipH = 52;

  const leftX = 4;
  const rightX = W - chipW - 4;

  // distribute 7 chips evenly, 5 chips evenly
  const leftYs = channels.map((_, i) => 40 + i * ((H - 80) / (channels.length - 1)));
  const rightYs = caps.map((_, i) => 80 + i * ((H - 160) / (caps.length - 1)));

  const linkPath = (startX, startY, side) => {
    const exitX = side === "L" ? startX + chipW : startX;
    const enterX = side === "L" ? cx - coreR : cx + coreR;
    const enterY = cy;
    const dx = (enterX - exitX) / 2;
    const c1x = exitX + dx * (side === "L" ? 1 : 1) * 0.7;
    const c1y = startY;
    const c2x = enterX - dx * 0.7 * (side === "L" ? 1 : 1);
    const c2y = enterY;
    return `M ${exitX} ${startY} C ${c1x} ${c1y}, ${c2x} ${c2y}, ${enterX} ${enterY}`;
  };

  return (
    <svg viewBox={`0 0 ${W} ${H}`} className="engine-svg" preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id="coreGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#8B5CFF" />
          <stop offset="100%" stopColor="#00B8FF" />
        </linearGradient>
        <radialGradient id="coreGlow" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0%" stopColor="#8B5CFF" stopOpacity="0.35" />
          <stop offset="60%" stopColor="#8B5CFF" stopOpacity="0.08" />
          <stop offset="100%" stopColor="#8B5CFF" stopOpacity="0" />
        </radialGradient>
        <filter id="pulseGlow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="2.5" result="b"/>
          <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
      </defs>

      {/* Core soft glow */}
      <circle cx={cx} cy={cy} r={coreR + 90} fill="url(#coreGlow)" />

      {/* Connector lines */}
      {leftYs.map((y, i) => {
        const d = linkPath(leftX, y, "L");
        return (
          <g key={`L${i}`}>
            <path id={`lpath${i}`} d={d} className="engine-link" />
            {/* Node dots at chip exit */}
            <circle cx={leftX + chipW} cy={y} r="4" className="engine-node-dot" />
            {/* Pulse */}
            <circle r="4" className="engine-pulse" filter="url(#pulseGlow)">
              <animateMotion dur={`${3 + (i % 3) * 0.6}s`} repeatCount="indefinite" begin={`${i * 0.35}s`}>
                <mpath href={`#lpath${i}`} />
              </animateMotion>
              <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.85;1"
                       dur={`${3 + (i % 3) * 0.6}s`} repeatCount="indefinite" begin={`${i * 0.35}s`} />
            </circle>
          </g>
        );
      })}
      {rightYs.map((y, i) => {
        const d = linkPath(rightX, y, "R");
        return (
          <g key={`R${i}`}>
            <path id={`rpath${i}`} d={d} className="engine-link" />
            <circle cx={rightX} cy={y} r="4" className="engine-node-dot" />
            <circle r="4" className="engine-pulse" filter="url(#pulseGlow)">
              <animateMotion dur={`${3.2 + (i % 3) * 0.5}s`} repeatCount="indefinite"
                             begin={`${0.4 + i * 0.4}s`} keyPoints="1;0" keyTimes="0;1" calcMode="linear">
                <mpath href={`#rpath${i}`} />
              </animateMotion>
              <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.85;1"
                       dur={`${3.2 + (i % 3) * 0.5}s`} repeatCount="indefinite" begin={`${0.4 + i * 0.4}s`} />
            </circle>
          </g>
        );
      })}

      {/* Core ring + bg */}
      <circle cx={cx} cy={cy} r={coreR + 18} className="engine-core-ring-soft" />
      <circle cx={cx} cy={cy} r={coreR + 8} className="engine-core-ring-soft" opacity="0.5">
        <animate attributeName="r" values={`${coreR + 8};${coreR + 24};${coreR + 8}`} dur="4s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.5;0;0.5" dur="4s" repeatCount="indefinite" />
      </circle>
      <circle cx={cx} cy={cy} r={coreR} className="engine-core-bg" />

      {/* Brand K mark inside core — both variants in tree, CSS hides the wrong one */}
      <image href="assets/icon_dark.svg"  x={cx - 60} y={cy - 67} width="120" height="135" className="km km-dark"  />
      <image href="assets/icon_light.svg" x={cx - 60} y={cy - 67} width="120" height="135" className="km km-light" />

      <text x={cx} y={cy + coreR + 36} textAnchor="middle" className="engine-core-sub">AI · ENGINE</text>

      {/* Channel chips (LEFT) */}
      {channels.map((ch, i) => (
        <g key={`lc${i}`} className="engine-chip-group">
          <rect x={leftX} y={leftYs[i] - chipH/2} width={chipW} height={chipH} rx="8" className="engine-chip" />
          <rect x={leftX + 10} y={leftYs[i] - 14} width="28" height="28" rx="6"
                fill="rgba(139, 92, 255, 0.1)" stroke="rgba(139, 92, 255, 0.35)" strokeWidth="1.5" />
          <SVGIcon path={ch.path} x={leftX + 24} y={leftYs[i]} size={18} color="#8B5CFF" />
          <text x={leftX + 48} y={leftYs[i] + 5} className="engine-chip-label">{ch.label}</text>
        </g>
      ))}

      {/* Capability chips (RIGHT) */}
      {caps.map((cap, i) => (
        <g key={`rc${i}`} className="engine-chip-group">
          <rect x={rightX} y={rightYs[i] - chipH/2} width={chipW} height={chipH} rx="8" className="engine-chip" />
          <rect x={rightX + chipW - 38} y={rightYs[i] - 14} width="28" height="28" rx="6"
                fill="rgba(139, 92, 255, 0.1)" stroke="rgba(139, 92, 255, 0.35)" strokeWidth="1.5" />
          <SVGIcon path={cap.path} x={rightX + chipW - 24} y={rightYs[i]} size={18} color="#8B5CFF" />
          <text x={rightX + chipW - 50} y={rightYs[i] + 5} textAnchor="end" className="engine-chip-label">{cap.label}</text>
        </g>
      ))}
    </svg>
  );
}

Object.assign(window, { AIEngine });