/* global React */
/* Interactive global network map — HQ / Branch / Agent tiers, side panel */
const { useState: useStateNM } = React;

// Pixel coordinates on the basemap image (viewBox 1198x784)
const NM_COORDS = {
  gr:    { x: 625, y: 315 },
  cy:    { x: 640, y: 325 },
  nl:    { x: 560, y: 255 },
  'kr-in': { x: 992, y: 305 },
  'kr-se': { x: 988, y: 298 },
  'jp-tk': { x: 1058, y: 302 },
  'jp-os': { x: 1052, y: 312 },
  cn:    { x: 962, y: 308 },
  sg:    { x: 940, y: 475 },
};

function NetworkMapInteractive({ lang }) {
  const t = window.FL_CONTENT[lang].networkPage;
  const [activeId, setActive] = useStateNM(null);
  const [view, setView] = useStateNM('map'); // 'map' | 'list' for mobile fallback
  const locs = t.locations.map(l => ({ ...l, ...NM_COORDS[l.id] }));
  const active = locs.find(l => l.id === activeId);
  const hq = locs.find(l => l.tier === 'hq');

  return (
    <section className="netmap">
      <div className="container">
        <div className="netmap-head reveal">
          <div className="section-eyebrow mono">{t.eyebrow}</div>
          <p className="netmap-lede">{t.lede}</p>
        </div>

        <div className="netmap-toolbar reveal">
          <div className="netmap-legend mono">
            <span><i className="dot dot-hq"></i>{t.tiers.hq}</span>
            <span><i className="dot dot-branch"></i>{t.tiers.branch}</span>
            <span><i className="dot dot-agent"></i>{t.tiers.agent}</span>
          </div>
          <div className="netmap-viewtoggle mono">
            <button className={view==='map'?'on':''} onClick={()=>setView('map')}>MAP</button>
            <button className={view==='list'?'on':''} onClick={()=>setView('list')}>LIST</button>
          </div>
        </div>

        {view === 'map' ? (
          <div className="netmap-stage reveal in">
            <svg className="netmap-svg" viewBox="0 0 1198 784" preserveAspectRatio="xMidYMid meet">
              <defs>
                <linearGradient id="nm-ocean" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#d9dfe7"/>
                  <stop offset="50%" stopColor="#e2e7ee"/>
                  <stop offset="100%" stopColor="#dadfe7"/>
                </linearGradient>
                <linearGradient id="nm-arc" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" stopColor="rgba(195,82,49,0.85)"/>
                  <stop offset="60%" stopColor="rgba(75,100,140,0.6)"/>
                  <stop offset="100%" stopColor="rgba(31,58,90,0.4)"/>
                </linearGradient>
                <radialGradient id="nm-hq-glow" cx="50%" cy="50%" r="50%">
                  <stop offset="0%" stopColor="rgba(195,82,49,0.3)"/>
                  <stop offset="55%" stopColor="rgba(195,82,49,0.08)"/>
                  <stop offset="100%" stopColor="rgba(195,82,49,0)"/>
                </radialGradient>
                <filter id="nm-shadow" x="-10%" y="-10%" width="120%" height="130%">
                  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
                  <feOffset dx="0" dy="4" result="offsetblur"/>
                  <feComponentTransfer>
                    <feFuncA type="linear" slope="0.22"/>
                  </feComponentTransfer>
                  <feMerge>
                    <feMergeNode/>
                    <feMergeNode in="SourceGraphic"/>
                  </feMerge>
                </filter>
              </defs>

              {/* world map basemap (natural 1198x784) */}
              <rect width="1198" height="784" fill="url(#nm-ocean)"/>
              <image href="/world-map.png" x="0" y="0" width="1198" height="784"/>

              {/* Japan — overlaid because the basemap PNG is missing it.
                  Tweak x / y / width / height to reposition or resize. */}
              <image href="/japan.png" x="965" y="231" width="150" height="150" />

              {/* HQ ambient glow */}
              {hq && <circle cx={hq.x} cy={hq.y} r="110" fill="url(#nm-hq-glow)" />}

              {/* arcs from HQ — gradient stroke + thin underline */}
              <g fill="none" strokeLinecap="round">
                {locs.filter(l => l.tier !== 'hq' && hq).map((l, i) => {
                  const d = `M${hq.x} ${hq.y} Q ${(hq.x+l.x)/2} ${Math.min(l.y, hq.y) - 70} ${l.x} ${l.y}`;
                  return (
                    <g key={i}>
                      <path d={d} stroke="rgba(31,58,90,0.10)" strokeWidth="2"/>
                      <path d={d} stroke="url(#nm-arc)" strokeWidth="0.9" strokeDasharray="3 4"/>
                    </g>
                  );
                })}
              </g>

              {locs.map((l, i) => {
                const tier = l.tier;
                const r = tier === 'hq' ? 10 : tier === 'branch' ? 7 : 6;
                const isActive = activeId === l.id;
                return (
                  <g key={i} transform={`translate(${l.x} ${l.y})`}
                     style={{ cursor: 'pointer' }}
                     onClick={() => setActive(l.id)}>
                    <circle r={r + 10} className={`nm-pulse nm-pulse-${tier}`} />
                    <circle r={r} className={`nm-dot nm-dot-${tier} ${isActive?'is-active':''}`} />
                    {tier === 'hq' && <circle r={r-4} fill="#fff"/>}
                    <text x={r+7} y={4} className={`nm-label nm-label-${tier}`} fontFamily="Geist Mono, monospace" fontSize="13" letterSpacing="0.16em">{l.code}</text>
                  </g>
                );
              })}
            </svg>

            {active && (
              <aside className="netmap-panel">
                <div className="netmap-panel-head">
                  <div>
                    <div className="netmap-panel-tier mono">{t.tiers[active.tier]}</div>
                    <h3>{active.city}{active.city ? ', ' : ''}{active.country}</h3>
                    {active.note && <div className="netmap-panel-note">{active.note}</div>}
                  </div>
                  <button className="netmap-panel-close" onClick={() => setActive(null)} aria-label={t.panel.close}>×</button>
                </div>
                <div className="netmap-panel-row">
                  <div className="lab mono">{t.panel.services}</div>
                  <ul className="netmap-services">
                    {active.services.map((s, i) => <li key={i}>{s}</li>)}
                  </ul>
                </div>
                <div className="netmap-panel-row">
                  <div className="lab mono">{t.panel.contact}</div>
                  <div className="netmap-panel-val">
                    {active.contactName && <div>{active.contactName}</div>}
                    <div><a href={`mailto:${active.contactEmail}`}>{active.contactEmail}</a></div>
                    {active.contactPhone && <div><a href={`tel:${active.contactPhone}`}>{active.contactPhone}</a></div>}
                  </div>
                </div>
                <div className="netmap-panel-row">
                  <div className="lab mono">{t.panel.hours}</div>
                  <div className="netmap-panel-val">{active.hours}</div>
                </div>
                <div className="netmap-panel-row">
                  <div className="lab mono">{t.panel.languages}</div>
                  <div className="netmap-panel-val">{active.languages.join(' · ')}</div>
                </div>
              </aside>
            )}
          </div>
        ) : (
          <div className="netmap-list reveal in">
            {locs.map((l, i) => (
              <article key={i} className={`netmap-listitem netmap-listitem-${l.tier}`}>
                <div className="li-head">
                  <span className={`li-tier li-tier-${l.tier} mono`}>{t.tiers[l.tier]}</span>
                  <span className="li-code mono">{l.code}</span>
                </div>
                <h3>{l.city}{l.city ? ', ' : ''}{l.country}</h3>
                {l.note && <div className="li-note">{l.note}</div>}
                <div className="li-row"><span className="lab mono">{t.panel.services}</span><span>{l.services.join(' · ')}</span></div>
                <div className="li-row"><span className="lab mono">{t.panel.contact}</span><span>{l.contactName && <>{l.contactName}<br/></>}<a href={`mailto:${l.contactEmail}`}>{l.contactEmail}</a>{l.contactPhone && <><br/><a href={`tel:${l.contactPhone}`}>{l.contactPhone}</a></>}</span></div>
                <div className="li-row"><span className="lab mono">{t.panel.hours}</span><span>{l.hours}</span></div>
                <div className="li-row"><span className="lab mono">{t.panel.languages}</span><span>{l.languages.join(' · ')}</span></div>
              </article>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

window.NetworkMapInteractive = NetworkMapInteractive;