ANTOOZA-FRONTEND/app/(main)/_components/WorldMarketMap.tsx

'use client';

import './world-map.scss';
import { useEffect, useMemo, useState } from 'react';
import { geoNaturalEarth1, geoPath } from 'd3-geo';
import { feature } from 'topojson-client';
import type { Feature, Geometry } from 'geojson';
import worldTopo from 'world-atlas/countries-110m.json';
import {
	EXCHANGE_GEO,
	REGION_LABELS,
	REGION_ORDER,
	moveDir,
	formatFlucRate,
	formatIndexClose,
	type WorldIndexRow,
	type MarketRegion,
	TV_SYMBOL
} from '@/types/worldIndex';
import TradingViewChart from './TradingViewChart';

// 등거리(plate carrée) 대신 d3-geo geoNaturalEarth1(곡면) 투영.
// 국가별 topojson feature 를 GeoJSON 으로 디코드해 육지 path 와 핀 좌표를 "동일 projection" 으로 산출 → 오정렬 원천 차단.
// (Wave1 — .claude/plan/global-market-research-pages.md)
const VW = 1000;
const VH = 500;

type GeoFeature = Feature<Geometry>;
type RegionTab = 'major'|MarketRegion;

// ── 지도 지오메트리: 정적 topojson → GeoJSON feature. 모듈 로드 시 1회 계산(남극 제외) ──
const COUNTRIES: GeoFeature[] = (() => {
	const decoded = feature(worldTopo as never, (worldTopo as unknown as { objects: { countries: never } }).objects.countries) as unknown as { features: GeoFeature[] };
	return decoded.features.filter((f) => String(f.id) !== '010'); // 남극(ATA) 제외 — 하단 여백 방지
})();

const PROJECTION = geoNaturalEarth1().fitSize([VW, VH], { type: 'FeatureCollection', features: COUNTRIES } as never);
const PATH_FN = geoPath(PROJECTION);
const COUNTRY_PATHS: { id: string; d: string }[] = COUNTRIES
	.map((f) => ({ id: String(f.id), d: PATH_FN(f as never) ?? '' }))
	.filter((c) => c.d.length > 0);

type Props = {
	rows: WorldIndexRow[];
};

type Pin = {
	row: WorldIndexRow;
	label: string;
	x: number;
	y: number;
	dir: 'up'|'down'|'flat';
	radius: number;
};

function formatChangeVal(changeVal: number): string {
	const sign = changeVal > 0 ? '+' : '';
	return `${sign}${changeVal.toLocaleString('ko-KR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

export default function WorldMarketMap({ rows }: Props)
{
	const [region, setRegion] = useState<RegionTab>('major');
	const [active, setActive] = useState<string|null>(null);
	const [chartRow, setChartRow] = useState<WorldIndexRow|null>(null);

	// 차트 모달 Esc 닫기
	useEffect(() => {
		if (!chartRow) {
			return;
		}
		const onKey = (e: KeyboardEvent) => {
			if (e.key === 'Escape') {
				setChartRow(null);
			}
		};
		window.addEventListener('keydown', onKey);
		return () => {
			window.removeEventListener('keydown', onKey);
		};
	}, [chartRow]);

	// 좌표를 아는 국가만 취급
	const geoRows = useMemo(() => {
		return rows.filter((r) => EXCHANGE_GEO[r.countryCode]);
	}, [rows]);

	// 핀 — 등락 크기에 따라 반경 가변(5~9), projection 으로 좌표 산출
	const pins = useMemo<Pin[]>(() => {
		return geoRows
			.map((row) => {
				const geo = EXCHANGE_GEO[row.countryCode];
				const xy = PROJECTION([geo.lng, geo.lat]);
				if (!xy) {
					return null;
				}
				const radius = Math.min(9, 5 + Math.abs(row.flucRateBp) / 90);
				return { row, label: geo.label, x: xy[0], y: xy[1], dir: moveDir(row.flucRateBp), radius };
			})
			.filter((c): c is Pin => c !== null);
	}, [geoRows]);

	// 지역 탭 — 데이터 있는 탭만 노출(무음 빈 탭 방지). major = 주요국 큐레이션.
	const tabs = useMemo<RegionTab[]>(() => {
		const counts: Record<RegionTab, number> = { major: 0, asia: 0, europe: 0, america: 0, mideast: 0 };
		geoRows.forEach((r) => {
			const geo = EXCHANGE_GEO[r.countryCode];
			counts[geo.region] += 1;
			if (geo.major) {
				counts.major += 1;
			}
		});
		return REGION_ORDER.filter((t) => counts[t] > 0);
	}, [geoRows]);

	// 선택 탭이 데이터 없는 탭이면 첫 탭으로 폴백
	const activeRegion: RegionTab = tabs.includes(region) ? region : (tabs[0] ?? 'major');

	// 그리드 = 선택 지역 필터 + 등락률 내림차순
	const gridRows = useMemo(() => {
		return geoRows
			.filter((r) => {
				const geo = EXCHANGE_GEO[r.countryCode];
				return activeRegion === 'major' ? geo.major === true : geo.region === activeRegion;
			})
			.sort((a, b) => b.flucRateBp - a.flucRateBp);
	}, [geoRows, activeRegion]);

	// 기준일 = 가장 최근 거래일
	const asOf = useMemo(() => {
		return geoRows.reduce<string|null>((max, c) => (max === null || c.tradeDate > max ? c.tradeDate : max), null);
	}, [geoRows]);

	const activePin = pins.find((c) => c.row.countryCode === active) ?? null;

	return (
		<section className='world-map' aria-label='세계 주요국 증시지수'>
			<div className='world-map__head'>
				<h2 className='world-map__title'>세계 증시</h2>
				<div className='world-map__meta'>
					<span className='world-map__legend'>
						<i className='world-map__dot world-map__dot--up' aria-hidden='true' />상승
						<i className='world-map__dot world-map__dot--down' aria-hidden='true' />하락
					</span>
					{asOf && <span className='world-map__asof'>전일 마감 기준 {asOf}</span>}
				</div>
			</div>

			<div className='world-map__body'>
				{/* 지도 */}
				<div className='world-map__stage'>
					<svg
						className='world-map__svg'
						viewBox={`0 0 ${VW} ${VH}`}
						role='img'
						aria-label='세계지도 위 주요국 증시지수 핀'
						preserveAspectRatio='xMidYMid meet'
					>
						<defs>
							<radialGradient id='wm-ocean' cx='50%' cy='42%' r='75%'>
								<stop offset='0%' stopColor='var(--az-map-ocean-1)' />
								<stop offset='100%' stopColor='var(--az-map-ocean-2)' />
							</radialGradient>
						</defs>

						{/* 대양 배경 */}
						<rect x='0' y='0' width={VW} height={VH} rx='16' fill='url(#wm-ocean)' />

						{/* 대륙 (국가별 topojson feature) */}
						<g className='world-map__land'>
							{COUNTRY_PATHS.map((c) => (
								<path key={c.id} d={c.d} />
							))}
						</g>

						{/* 핀 */}
						<g className='world-map__pins'>
							{pins.map((pin) => {
								const isActive = pin.row.countryCode === active;
								return (
									<g
										key={pin.row.countryCode}
										className={`world-map__pin world-map__pin--${pin.dir}${isActive ? ' is-active' : ''}`}
										transform={`translate(${pin.x} ${pin.y})`}
										role='button'
										tabIndex={0}
										aria-label={`${pin.label} ${pin.row.name} ${formatFlucRate(pin.row.flucRateBp)}`}
										onMouseEnter={() => setActive(pin.row.countryCode)}
										onMouseLeave={() => setActive((cur) => (cur === pin.row.countryCode ? null : cur))}
										onFocus={() => setActive(pin.row.countryCode)}
										onBlur={() => setActive((cur) => (cur === pin.row.countryCode ? null : cur))}
										onClick={() => { if (TV_SYMBOL[pin.row.countryCode]) { setChartRow(pin.row); } }}
									>
										{pin.dir !== 'flat' && <circle className='world-map__pulse' r={pin.radius} />}
										<circle className='world-map__pin-dot' r={pin.radius} />
										<circle className='world-map__pin-core' r={pin.radius / 2.6} />
									</g>
								);
							})}
						</g>
					</svg>

					{/* 툴팁 — 활성 핀 기준 % 위치 (viewBox 비율) */}
					{activePin && (
						<div
							className='world-map__tip'
							style={{ left: `${(activePin.x / VW) * 100}%`, top: `${(activePin.y / VH) * 100}%` }}
							role='status'
						>
							<div className='world-map__tip-head'>
								<span className='world-map__tip-country'>{activePin.label}</span>
								<span className='world-map__tip-name'>{activePin.row.name}</span>
							</div>
							<div className='world-map__tip-close'>{formatIndexClose(activePin.row.close)}</div>
							<div className={`world-map__tip-change world-map__tip-change--${activePin.dir}`}>
								{formatFlucRate(activePin.row.flucRateBp)}
								<span className='world-map__tip-exch'>{activePin.row.exchangeName}</span>
							</div>
						</div>
					)}
				</div>

				{/* 지수 패널 — 지역 탭 + 데이터 그리드 (지도와 연동) */}
				<div className='world-map__panel'>
					<div className='world-map__tabs' role='tablist' aria-label='지역'>
						{tabs.map((t) => (
							<button
								key={t}
								type='button'
								role='tab'
								aria-selected={t === activeRegion}
								className={`world-map__tab${t === activeRegion ? ' is-active' : ''}`}
								onClick={() => setRegion(t)}
							>
								{REGION_LABELS[t]}
							</button>
						))}
					</div>

					<div className='world-map__grid-wrap'>
						<table className='world-map__grid'>
							<thead>
								<tr>
									<th scope='col' className='world-map__c-name'>지수명</th>
									<th scope='col' className='world-map__c-num'>지수</th>
									<th scope='col' className='world-map__c-num'>전일비</th>
									<th scope='col' className='world-map__c-num'>등락률</th>
									<th scope='col' className='world-map__c-time'>시간</th>
									<th scope='col' className='world-map__c-chart'>차트</th>
								</tr>
							</thead>
							<tbody>
								{gridRows.map((row) => {
									const geo = EXCHANGE_GEO[row.countryCode];
									const dir = moveDir(row.flucRateBp);
									const isActive = row.countryCode === active;
									return (
										<tr
											key={row.countryCode}
											className={`world-map__row${isActive ? ' is-active' : ''}`}
											onMouseEnter={() => setActive(row.countryCode)}
											onMouseLeave={() => setActive((cur) => (cur === row.countryCode ? null : cur))}
										>
											<td className='world-map__c-name'>
												<span className='world-map__row-country'>{geo.label}</span>
												<span className='world-map__row-name'>{row.name}</span>
											</td>
											<td className='world-map__c-num world-map__c-close'>{formatIndexClose(row.close)}</td>
											<td className={`world-map__c-num world-map__c-${dir}`}>{formatChangeVal(row.changeVal)}</td>
											<td className={`world-map__c-num world-map__c-${dir}`}>{formatFlucRate(row.flucRateBp)}</td>
											<td className='world-map__c-time'>{row.tradeDate}</td>
											<td className='world-map__c-chart'>
												<button
													type='button'
													className='world-map__chart-btn'
													title={TV_SYMBOL[row.countryCode] ? `${row.name} 차트 보기` : `${geo.label} 위치 보기`}
													aria-label={TV_SYMBOL[row.countryCode] ? `${geo.label} ${row.name} 차트 보기` : `${geo.label} ${row.name} 지도에서 보기`}
													onClick={() => { if (TV_SYMBOL[row.countryCode]) { setChartRow(row); } else { setActive(row.countryCode); } }}
												>
													<svg viewBox='0 0 24 24' width='16' height='16' aria-hidden='true'>
														<polyline points='3,17 9,11 13,15 21,6' fill='none' stroke='currentColor' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
													</svg>
												</button>
											</td>
										</tr>
									);
								})}
							</tbody>
						</table>
						{gridRows.length === 0 && <div className='world-map__empty'>이 지역 지수 데이터가 없습니다.</div>}
					</div>
				</div>
			</div>

			{chartRow && TV_SYMBOL[chartRow.countryCode] && (
				<div
					className='world-map__modal'
					role='dialog'
					aria-modal='true'
					aria-label={`${EXCHANGE_GEO[chartRow.countryCode]?.label ?? ''} ${chartRow.name} 차트`}
					onClick={() => setChartRow(null)}
				>
					<div className='world-map__modal-panel' onClick={(e) => e.stopPropagation()}>
						<div className='world-map__modal-head'>
							<span className='world-map__modal-title'>
								{EXCHANGE_GEO[chartRow.countryCode]?.label} · {chartRow.name}
							</span>
							<button type='button' className='world-map__modal-close' aria-label='닫기' onClick={() => setChartRow(null)}>×</button>
						</div>
						<div className='world-map__modal-body'>
							<TradingViewChart symbol={TV_SYMBOL[chartRow.countryCode]} />
						</div>
						<p className='world-map__modal-note'>실시간 차트 제공 · TradingView</p>
					</div>
				</div>
			)}
		</section>
	);
}