import { IconArrowLeft, IconMapPin } from '@douyinfe/semi-icons';
import { Link, useSearchParams } from 'react-router-dom';
import { monitorReturnFromParams, parseMonitorRouteContext } from '../routing/monitorContext';

export function MonitorReturnBar() {
  const [searchParams] = useSearchParams();
  const returnTo = monitorReturnFromParams(searchParams);
  if (!returnTo) return null;
  const context = parseMonitorRouteContext(new URL(returnTo, 'https://vehicle-platform.invalid').searchParams);
  const scope = [
    context.selectedVin || '',
    context.keyword && context.keyword !== context.selectedVin ? context.keyword : '',
    context.protocol,
    context.status
  ].filter(Boolean).join(' · ');
  return <section className="v2-monitor-return" aria-label="全局监控返回上下文">
    <Link to={returnTo} replace><IconArrowLeft />返回全局监控</Link>
    <span><IconMapPin />{scope || '恢复离开前的地图与筛选状态'}</span>
    <em>Zoom {context.viewport.zoom} · {context.detailOpen ? '详情展开' : context.selectedVin ? '详情收起' : '未选车辆'}</em>
  </section>;
}
