import { useState, type CSSProperties } from 'react';
import { getLocalizedPath, type Locale } from '../i18n/utils';

type NetNode = {
  id: string;
  title: string;
  desc: string;
  link?: string;
};

export type OrgNetworkData = {
  center: { title: string; subtitle: string; desc: string };
  nodes: NetNode[];
};

// 6 个子节点均匀分布在圆周上（从正上方开始，顺时针 60° 间隔）
const ANGLES = [-90, -30, 30, 90, 150, 210];
const R = 38; // 半径（占容器百分比）

function nodePos(i: number) {
  const a = (ANGLES[i] * Math.PI) / 180;
  return {
    x: 50 + R * Math.cos(a),
    y: 50 + R * Math.sin(a),
  };
}

export default function OrgNetwork({ data, locale }: { data: OrgNetworkData; locale: Locale }) {
  const [active, setActive] = useState<string>('center');

  const current =
    active === 'center'
      ? { title: data.center.title, desc: data.center.desc }
      : data.nodes.find((n) => n.id === active) ?? { title: data.center.title, desc: data.center.desc };
  const link =
    active === 'center' ? undefined : data.nodes.find((n) => n.id === active)?.link;

  const learnMore = locale === 'en' ? 'Learn more' : '了解更多';

  return (
    <div className="org-shell">
      {/* 辐射网络图 */}
      <div className="org-net">
        <svg className="org-lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
          {data.nodes.map((n, i) => {
            const p = nodePos(i);
            const on = active === n.id;
            return (
              <line
                key={n.id}
                x1={50}
                y1={50}
                x2={p.x}
                y2={p.y}
                className={`org-line${on ? ' is-active' : ''}`}
              />
            );
          })}
        </svg>

        {/* 中心节点 */}
        <button
          type="button"
          className={`org-node org-node-center${active === 'center' ? ' is-active' : ''}`}
          style={{ left: '50%', top: '50%' } as CSSProperties}
          onClick={() => setActive('center')}
          aria-pressed={active === 'center'}
        >
          <span className="org-node-title">{data.center.title}</span>
          <span className="org-node-sub">{data.center.subtitle}</span>
        </button>

        {/* 子节点 */}
        {data.nodes.map((n, i) => {
          const p = nodePos(i);
          return (
            <button
              key={n.id}
              type="button"
              className={`org-node${active === n.id ? ' is-active' : ''}`}
              style={{ left: `${p.x}%`, top: `${p.y}%` } as CSSProperties}
              onClick={() => setActive(n.id)}
              aria-pressed={active === n.id}
            >
              <span className="org-node-title">{n.title}</span>
            </button>
          );
        })}
      </div>

      {/* 详情面板 */}
      <div className="org-panel">
        <h3 className="org-panel-title">{current.title}</h3>
        <p className="org-panel-desc">{current.desc}</p>
        {link && (
          <a
            className="org-panel-link"
            href={link.startsWith('#') ? link : getLocalizedPath(link, locale)}
          >
            {learnMore}
            <span aria-hidden="true">→</span>
          </a>
        )}
      </div>
    </div>
  );
}