/* eslint-disable */
/* Light-theme Topology */

function TopologySection() {
  const [mode, setMode] = React.useState('normal');
  const modes = [
    { id: 'normal', label: 'Normal · Online', dot: '#10B981', desc: 'Şebeke gücü → rectifier → DC bus → inverter → yük. Aküler şarj modunda.' },
    { id: 'battery', label: 'Batarya modu', dot: '#F59E0B', desc: 'Şebeke kaybı. Aküler otomatik devreye alındı. Kesinti 0 ms.' },
    { id: 'bypass', label: 'Bypass', dot: '#0891B2', desc: 'Manuel servis bypass. Yük doğrudan şebekeye bağlı. Bakım için.' },
  ];
  const current = modes.find(m => m.id === mode);

  return (
    <section id="teknik" className="section" style={{ padding: '160px 48px', background: '#F3F4F0' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 72, flexWrap: 'wrap', gap: 32 }}>
          <div>
            <div className="eyebrow eyebrow--cyan" style={{ marginBottom: 16 }}>02 · Çalışma Modları</div>
            <h2 className="display" style={{ fontSize: 'clamp(48px, 6vw, 96px)', maxWidth: 900 }}>
              Online. Akü. Bypass.<br />
              <span style={{ color: '#94A3B8' }}>Üç mod, tek kesintisiz güç.</span>
            </h2>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 4, marginBottom: 32, padding: 4, background: '#FFFFFF', border: '1px solid #E5E7EB', borderRadius: 6, width: 'fit-content' }}>
          {modes.map(m => (
            <button key={m.id} onClick={() => setMode(m.id)} style={{
              padding: '10px 18px', borderRadius: 4, border: 'none', cursor: 'pointer',
              background: mode === m.id ? '#F3F4F0' : 'transparent',
              color: mode === m.id ? '#0f2445' : '#64748B',
              fontSize: 12, fontFamily: 'var(--font-body)', fontWeight: 500,
              display: 'flex', alignItems: 'center', gap: 8,
              transition: 'all 120ms ease',
            }}>
              <div style={{ width: 6, height: 6, borderRadius: 999, background: m.dot }} />
              {m.label}
            </button>
          ))}
        </div>

        <div style={{ border: '1px solid #E5E7EB', borderRadius: 10, background: '#FFFFFF', overflow: 'hidden', boxShadow: '0 1px 2px rgba(15,36,69,0.04)' }}>
          <div style={{ padding: '56px 56px 32px' }}>
            <TopologyDiagram mode={mode} />
          </div>
          <div style={{ borderTop: '1px solid #EAEAE3', padding: '24px 56px', display: 'flex', alignItems: 'center', gap: 16, background: '#FAFAF7' }}>
            <div style={{ width: 8, height: 8, borderRadius: 999, background: current.dot, animation: 'pulse-online 2s infinite' }} />
            <div className="mono" style={{ fontSize: 12, color: '#334155' }}>
              <span style={{ color: '#0f2445', fontWeight: 600 }}>{current.label.toUpperCase()}</span>
              <span style={{ margin: '0 12px', color: '#CBD5E1' }}>·</span>
              {current.desc}
            </div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, marginTop: 48, background: '#E5E7EB', border: '1px solid #E5E7EB', borderRadius: 10, overflow: 'hidden' }}>
          {[
            { n: '3', l: 'seviyeli IGBT', s: 'Daha az harmonik, daha yüksek verim' },
            { n: '0', l: 'ms transfer', s: 'Online çift dönüşüm — kesinti yok' },
            { n: '%3', l: 'THDi', s: 'Giriş harmonik bozulma, IEEE-519 içinde' },
            { n: '50 dB', l: '@1 m', s: 'Sessiz çalışma, hassas ortamlara uygun' },
          ].map((x, i) => (
            <div key={i} style={{ background: '#FFFFFF', padding: '36px 28px' }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 12 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 600, letterSpacing: '-0.04em', color: '#0f2445', lineHeight: 1 }}>{x.n}</div>
                <div className="mono" style={{ fontSize: 12, color: '#0891B2' }}>{x.l}</div>
              </div>
              <div style={{ color: '#64748B', fontSize: 13, lineHeight: 1.5 }}>{x.s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TopologyDiagram({ mode }) {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 60);
    return () => clearInterval(id);
  }, []);

  const gridActive = mode !== 'battery';
  const batteryActive = mode === 'battery';
  const bypassActive = mode === 'bypass';
  const mainPath = !bypassActive;

  return (
    <svg viewBox="0 0 1200 360" style={{ width: '100%', height: 'auto' }}>
      <g fontFamily="var(--font-mono)" fontSize="10" fill="#94A3B8" letterSpacing="0.12em">
        <text x="80" y="30">GIRIS</text>
        <text x="330" y="30">REKTIFIER</text>
        <text x="550" y="30">DC BUS</text>
        <text x="790" y="30">INVERTER</text>
        <text x="1040" y="30">CIKIS</text>
      </g>

      <TopoNode x={70} y={140} label="Şebeke" value="3F · 380 V" active={gridActive} />
      <TopoWire from={[140, 160]} to={[300, 160]} active={gridActive && mainPath} tick={tick} />

      <TopoBlock x={300} y={110} w={160} h={100} label={"APFC\nRectifier"} active={gridActive && mainPath} value="PF 0.99" />

      <TopoWire from={[460, 160]} to={[540, 160]} active={gridActive && mainPath} tick={tick} />

      <TopoNode x={560} y={140} label="DC Bus" value="±400 V" active={mainPath} />

      <TopoWire from={[630, 160]} to={[750, 160]} active={mainPath} tick={tick} reverse={batteryActive} />

      <TopoBlock x={750} y={110} w={160} h={100} label={"3-Level\nInverter"} active={mainPath} value="IGBT" />

      <TopoWire from={[910, 160]} to={[1080, 160]} active={mainPath} tick={tick} />

      <TopoNode x={1080} y={140} label="Yük" value={mode === 'battery' ? '42 kVA' : '168 kVA'} active={true} pulse />

      <TopoWire from={[594, 195]} to={[594, 280]} active={true} vertical tick={tick} reverse={!batteryActive} />
      <g transform="translate(510, 280)">
        <rect x="0" y="0" width="170" height="56" rx="4" fill={batteryActive ? '#FFF7ED' : '#FAFAF7'} stroke={batteryActive ? '#F59E0B' : '#CBD5E1'} strokeWidth={batteryActive ? 1.5 : 1} />
        <text x="16" y="20" fontFamily="var(--font-mono)" fontSize="9" fill={batteryActive ? '#D97706' : '#94A3B8'} letterSpacing="0.1em">AKU BANK</text>
        <text x="16" y="40" fontFamily="var(--font-display)" fontSize="16" fontWeight="600" fill={batteryActive ? '#D97706' : '#334155'}>{batteryActive ? '97%' : '100%'}</text>
        {[0,1,2,3,4,5,6].map(i => (
          <rect key={i} x={80 + i*12} y={30} width={8} height={16} fill={batteryActive && i < 6 ? '#F59E0B' : '#E5E7EB'} rx="1" />
        ))}
      </g>

      <TopoWire from={[140, 80]} to={[1080, 80]} active={bypassActive} tick={tick} curve />
      <g transform="translate(570, 60)" opacity={bypassActive ? 1 : 0.4}>
        <rect x="0" y="0" width="60" height="22" rx="3" fill={bypassActive ? '#ECFEFF' : '#FAFAF7'} stroke={bypassActive ? '#0891B2' : '#CBD5E1'} />
        <text x="30" y="15" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill={bypassActive ? '#0891B2' : '#94A3B8'} letterSpacing="0.1em">BYPASS</text>
      </g>
    </svg>
  );
}

function TopoNode({ x, y, label, value, active, pulse }) {
  const color = active ? '#0f2445' : '#94A3B8';
  const border = active ? '#CBD5E1' : '#E5E7EB';
  return (
    <g transform={`translate(${x - 50}, ${y - 30})`}>
      <rect x="0" y="0" width="100" height="60" rx="4" fill="#FAFAF7" stroke={border} />
      {pulse && active && <rect x="0" y="0" width="100" height="60" rx="4" fill="none" stroke="#10B981" strokeWidth="1.5" opacity="0.6">
        <animate attributeName="opacity" values="0.6;0;0.6" dur="2s" repeatCount="indefinite" />
      </rect>}
      <text x="12" y="22" fontFamily="var(--font-mono)" fontSize="10" fill={active ? '#0891B2' : '#94A3B8'} letterSpacing="0.08em">{label}</text>
      <text x="12" y="44" fontFamily="var(--font-mono)" fontSize="12" fontWeight="600" fill={color}>{value}</text>
    </g>
  );
}

function TopoBlock({ x, y, w, h, label, value, active }) {
  const color = active ? '#0f2445' : '#64748B';
  const border = active ? '#e65100' : '#CBD5E1';
  const bg = active ? '#FFF7ED' : '#FAFAF7';
  const lines = label.split('\n');
  return (
    <g>
      <rect x={x} y={y} width={w} height={h} rx="6" fill={bg} stroke={border} strokeWidth={active ? 1.5 : 1} />
      <rect x={x + 12} y={y + 12} width={w - 24} height="2" fill="#E5E7EB" />
      {[0,1,2].map(i => <circle key={i} cx={x + 24 + i*14} cy={y + 22} r="2" fill={active ? '#10B981' : '#CBD5E1'} />)}
      {lines.map((l, i) => (
        <text key={i} x={x + w/2} y={y + 55 + i*18} textAnchor="middle" fontFamily="var(--font-display)" fontSize="14" fontWeight="600" fill={color}>{l}</text>
      ))}
      <text x={x + w/2} y={y + h - 12} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" fill={active ? '#e65100' : '#94A3B8'} letterSpacing="0.08em">{value}</text>
    </g>
  );
}

function TopoWire({ from, to, active, tick = 0, vertical, reverse, curve }) {
  const [x1, y1] = from; const [x2, y2] = to;
  const color = active ? '#0891B2' : '#E5E7EB';
  const width = active ? 2 : 1;

  let d;
  if (curve) {
    const midY = Math.min(y1, y2) - 20;
    d = `M ${x1} ${y1} Q ${x1} ${midY}, ${(x1+x2)/2} ${midY} T ${x2} ${y2}`;
  } else {
    d = `M ${x1} ${y1} L ${x2} ${y2}`;
  }

  return (
    <g>
      <path d={d} stroke={color} strokeWidth={width} fill="none" />
      {active && (
        <>
          {[0, 0.5].map((off, i) => {
            const t = ((tick / 60 + off) % 1);
            const pt = interpOnLine(from, to, reverse ? 1 - t : t, curve);
            return <circle key={i} cx={pt.x} cy={pt.y} r="3" fill="#0891B2" />;
          })}
        </>
      )}
    </g>
  );
}

function interpOnLine(from, to, t, curve) {
  const [x1, y1] = from; const [x2, y2] = to;
  if (curve) {
    const midY = Math.min(y1, y2) - 20;
    const u = t;
    const x = (1-u)*(1-u)*x1 + 2*(1-u)*u*((x1+x2)/2) + u*u*x2;
    const y = (1-u)*(1-u)*y1 + 2*(1-u)*u*midY + u*u*y2;
    return { x, y };
  }
  return { x: x1 + (x2 - x1) * t, y: y1 + (y2 - y1) * t };
}

Object.assign(window, { TopologySection });