import { useState, useEffect, useRef, useCallback } from 'react';
import { useParams } from 'react-router-dom';
import { Badge } from '@shared/components/ui/badge';
import { PageContainer } from '@shared/components/layout';
import {
  Search,
  Ship, AlertTriangle, Radar, MapPin, Printer,
  Camera, Crosshair, Ruler, CircleDot, Clock, LayoutGrid, Brain,
  Loader2, ShieldAlert, Shield, EyeOff, FileText,
} from 'lucide-react';
import { BaseMap, createStaticLayers, createZoneLayer, createPolylineLayer, JURISDICTION_AREAS, DEPTH_CONTOURS, useMapLayers, type MapHandle } from '@lib/map';
import { formatDateTime } from '@shared/utils/dateFormat';
import { getEvents, type PredictionEvent } from '@/services/event';
import { getAnalysisLatest, getAnalysisHistory, type VesselAnalysis } from '@/services/analysisApi';
import { getEnforcementRecords, type EnforcementRecord } from '@/services/enforcement';
import { ALERT_LEVELS, type AlertLevel, getAlertLevelLabel, getAlertLevelIntent } from '@shared/constants/alertLevels';
import { getRiskIntent } from '@shared/constants/statusIntent';
import { useSettingsStore } from '@stores/settingsStore';
import { useTranslation } from 'react-i18next';

// ─── 허가 정보 타입 ──────────────────────
interface VesselPermitData {
  mmsi: string;
  vesselName: string | null;
  vesselNameCn: string | null;
  flagCountry: string | null;
  vesselType: string | null;
  tonnage: number | null;
  lengthM: number | null;
  buildYear: number | null;
  permitStatus: string | null;
  permitNo: string | null;
  permittedGearCodes: string[] | null;
  permittedZones: string[] | null;
  permitValidFrom: string | null;
  permitValidTo: string | null;
}

const API_BASE = import.meta.env.VITE_API_URL ?? '/api';

async function fetchVesselPermit(mmsi: string): Promise<VesselPermitData | null> {
  try {
    const res = await fetch(`${API_BASE}/vessel-permits/${encodeURIComponent(mmsi)}`, {
      credentials: 'include',
    });
    if (!res.ok) return null;
    return res.json();
  } catch {
    return null;
  }
}

const RIGHT_TOOLS = [
  { icon: Crosshair, label: '구역설정' }, { icon: Ruler, label: '거리' },
  { icon: CircleDot, label: '면적' }, { icon: Clock, label: '거리환' },
  { icon: Printer, label: '인쇄' }, { icon: Camera, label: '스냅샷' },
];

// ─── 24h AIS 수신 막대 ───────────────
function AisTimeline({ history }: { history: VesselAnalysis[] }) {
  // 최근 24시간을 1시간 단위 슬롯으로 분할
  const now = Date.now();
  const slots = Array.from({ length: 24 }, (_, i) => {
    const slotStart = now - (24 - i) * 3600_000;
    const slotEnd = slotStart + 3600_000;
    const hasData = history.some((h) => {
      const t = new Date(h.analyzedAt).getTime();
      return t >= slotStart && t < slotEnd;
    });
    return { hour: new Date(slotStart).getHours(), hasData };
  });
  const received = slots.filter((s) => s.hasData).length;

  return (
    <div>
      <div className="flex items-center justify-between mb-1">
        <span className="text-[10px] text-hint">24h AIS 수신 이력</span>
        <span className="text-[10px] text-label font-mono">{received}/24h ({Math.round(received / 24 * 100)}%)</span>
      </div>
      <div className="flex gap-px h-3">
        {slots.map((s, i) => (
          <div
            key={i}
            className={`flex-1 rounded-sm ${s.hasData ? 'bg-green-500' : 'bg-red-500/40'}`}
            title={`${String(s.hour).padStart(2, '0')}시 — ${s.hasData ? '수신' : '소실'}`}
          />
        ))}
      </div>
      <div className="flex justify-between mt-0.5">
        <span className="text-[7px] text-hint">-24h</span>
        <span className="text-[7px] text-hint">현재</span>
      </div>
    </div>
  );
}

// ─── 메인 컴포넌트 ────────────────────

export function VesselDetail() {
  const { id: mmsiParam } = useParams<{ id: string }>();

  // 데이터 상태
  const [analysis, setAnalysis] = useState<VesselAnalysis | null>(null);
  const [history, setHistory] = useState<VesselAnalysis[]>([]);
  const [permit, setPermit] = useState<VesselPermitData | null>(null);
  const [events, setEvents] = useState<PredictionEvent[]>([]);
  const [enforcements, setEnforcements] = useState<EnforcementRecord[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // 검색 상태
  const [searchMmsi, setSearchMmsi] = useState(mmsiParam ?? '');
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');

  const mapRef = useRef<MapHandle>(null);

  // 데이터 로드 — prediction 직접 API
  useEffect(() => {
    if (!mmsiParam) {
      setLoading(false);
      setError('MMSI 파라미터가 필요합니다.');
      return;
    }

    let cancelled = false;

    const loadData = async () => {
      setLoading(true);
      setError(null);

      try {
        const [analysisRes, historyRes, permitRes, eventsRes, enfRes] = await Promise.all([
          getAnalysisLatest(mmsiParam).catch(() => null),
          getAnalysisHistory(mmsiParam, 24).catch(() => []),
          fetchVesselPermit(mmsiParam),
          getEvents({ vesselMmsi: mmsiParam, size: 10 }).catch(() => null),
          getEnforcementRecords({ vesselMmsi: mmsiParam, size: 10 }).catch(() => null),
        ]);

        if (cancelled) return;

        setAnalysis(analysisRes);
        setHistory(historyRes);
        setPermit(permitRes);
        setEvents(eventsRes?.content ?? []);
        setEnforcements(enfRes?.content ?? []);
      } catch (err) {
        if (!cancelled) {
          setError(err instanceof Error ? err.message : '데이터 로드 실패');
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    };

    loadData();
    return () => { cancelled = true; };
  }, [mmsiParam]);

  // 지도 레이어
  const buildLayers = useCallback(() => [
    ...createStaticLayers(),
    createZoneLayer('jurisdiction', JURISDICTION_AREAS.map((a) => ({
      name: a.name, lat: a.lat, lng: a.lng, color: a.color, radiusM: 80000,
    })), 80000, 0.05),
    ...DEPTH_CONTOURS.map((contour, i) =>
      createPolylineLayer(`depth-${i}`, contour.points as [number, number][], {
        color: '#06b6d4', width: 1, opacity: 0.3, dashArray: [2, 4],
      })
    ),
  ], []);

  useMapLayers(mapRef, buildLayers, []);

  // i18n + 카탈로그
  const { t: tc } = useTranslation('common');
  const lang = useSettingsStore((s) => s.language);

  // 위험도
  const riskScore = analysis?.riskScore ?? 0;
  const riskLevel = (analysis?.riskLevel ?? 'LOW') as AlertLevel;
  const riskMeta = ALERT_LEVELS[riskLevel] ?? ALERT_LEVELS.LOW;

  // features 추출
  const features = analysis?.features ?? {};
  const darkTier = features.dark_tier as string | undefined;
  const darkScore = features.dark_suspicion_score as number | undefined;
  const darkPatterns = features.dark_patterns as string[] | undefined;
  const darkHistory7d = features.dark_history_7d as number | undefined;
  const transshipTier = features.transship_tier as string | undefined;
  const transshipScore = features.transship_score as number | undefined;

  return (
    <PageContainer fullBleed className="flex h-[calc(100vh-7.5rem)] gap-0">

      {/* ── 좌측: 선박 정보 패널 ── */}
      <div className="w-[370px] shrink-0 bg-card border-r border-border flex flex-col overflow-hidden">
        {/* 헤더: 검색 조건 */}
        <div className="p-3 border-b border-border space-y-2">
          <h2 className="text-sm font-bold text-heading">선박 상세 조회</h2>
          <div className="flex items-center gap-1">
            <span className="text-[9px] text-hint w-14 shrink-0">시작/종료</span>
            <input aria-label="조회 시작 시각" value={startDate} onChange={(e) => setStartDate(e.target.value)}
              className="flex-1 bg-surface-overlay border border-slate-700/50 rounded px-2 py-1 text-[10px] text-label focus:outline-none focus:border-blue-500/50"
              placeholder="YYYY-MM-DD HH:mm" />
            <span className="text-hint text-[10px]">~</span>
            <input aria-label="조회 종료 시각" value={endDate} onChange={(e) => setEndDate(e.target.value)}
              className="flex-1 bg-surface-overlay border border-slate-700/50 rounded px-2 py-1 text-[10px] text-label focus:outline-none focus:border-blue-500/50"
              placeholder="YYYY-MM-DD HH:mm" />
          </div>
          <div className="flex items-center gap-1">
            <span className="text-[9px] text-hint w-14 shrink-0">MMSI</span>
            <input aria-label="MMSI" value={searchMmsi} onChange={(e) => setSearchMmsi(e.target.value)}
              placeholder="MMSI 입력"
              className="flex-1 bg-surface-overlay border border-slate-700/50 rounded px-2 py-1 text-[10px] text-label focus:outline-none" />
            <button type="button" className="flex items-center gap-1.5 bg-secondary border border-slate-700/50 rounded px-3 py-1 text-[10px] text-label hover:bg-switch-background transition-colors">
              검색 <Search className="w-3 h-3" />
            </button>
          </div>
        </div>

        {/* 로딩/에러 상태 */}
        {loading && (
          <div className="flex-1 flex items-center justify-center">
            <Loader2 className="w-6 h-6 text-blue-400 animate-spin" />
            <span className="ml-2 text-sm text-hint">데이터 로드 중...</span>
          </div>
        )}

        {error && !loading && (
          <div className="flex-1 flex flex-col items-center justify-center gap-2 px-4">
            <AlertTriangle className="w-8 h-8 text-red-400" />
            <span className="text-sm text-red-400 text-center">{error}</span>
          </div>
        )}

        {/* 선박 정보 */}
        {!loading && !error && (
          <div className="flex-1 overflow-y-auto">
            {/* 기본 정보 카드 */}
            <div className="p-3 border-b border-border">
              <div className="flex items-center gap-2 mb-2">
                <Ship className="w-4 h-4 text-blue-400" />
                <span className="text-[11px] font-bold text-heading">기본 정보</span>
              </div>
              <div className="bg-surface-overlay rounded border border-slate-700/20 text-[9px]">
                {[
                  ['MMSI', mmsiParam ?? '-'],
                  ['선박 유형', analysis?.vesselType ?? permit?.vesselType ?? '-'],
                  ['국적', permit?.flagCountry ?? '-'],
                  ['선명', permit?.vesselName ?? '-'],
                  ['선명(중문)', permit?.vesselNameCn ?? '-'],
                  ['톤수', permit?.tonnage != null ? `${permit.tonnage}톤` : '-'],
                  ['길이', permit?.lengthM != null ? `${permit.lengthM}m` : '-'],
                  ['건조년도', permit?.buildYear != null ? String(permit.buildYear) : '-'],
                  ['구역', analysis?.zoneCode ?? '-'],
                  ['기선거리', analysis?.distToBaselineNm != null
                    ? `${Number(analysis.distToBaselineNm).toFixed(1)}nm` : '-'],
                  ['시즌', analysis?.season ?? '-'],
                ].map(([k, v], i) => (
                  <div key={k} className={`flex ${i % 2 === 0 ? 'bg-surface-overlay' : ''}`}>
                    <span className="w-24 shrink-0 px-2.5 py-1.5 text-hint border-r border-slate-700/20">{k}</span>
                    <span className="flex-1 px-2.5 py-1.5 text-label">{v}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* 허가 정보 */}
            {permit && (
              <div className="p-3 border-b border-border">
                <div className="flex items-center gap-2 mb-2">
                  <ShieldAlert className="w-4 h-4 text-green-400" />
                  <span className="text-[11px] font-bold text-heading">허가 정보</span>
                </div>
                <div className="bg-surface-overlay rounded border border-slate-700/20 text-[9px]">
                  {[
                    ['허가 상태', permit.permitStatus ?? '-'],
                    ['허가 번호', permit.permitNo ?? '-'],
                    ['허가 기간', permit.permitValidFrom && permit.permitValidTo
                      ? `${permit.permitValidFrom} ~ ${permit.permitValidTo}` : '-'],
                    ['허용 어구', permit.permittedGearCodes?.join(', ') || '-'],
                    ['허용 구역', permit.permittedZones?.join(', ') || '-'],
                  ].map(([k, v], i) => (
                    <div key={k} className={`flex ${i % 2 === 0 ? 'bg-surface-overlay' : ''}`}>
                      <span className="w-24 shrink-0 px-2.5 py-1.5 text-hint border-r border-slate-700/20">{k}</span>
                      <span className="flex-1 px-2.5 py-1.5 text-label">{v}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* AI 분석 결과 — prediction 직접 데이터 */}
            {analysis && (
              <div className="p-3 border-b border-border">
                <div className="flex items-center gap-2 mb-2">
                  <Brain className="w-4 h-4 text-purple-400" />
                  <span className="text-[11px] font-bold text-heading">AI 분석 결과</span>
                </div>

                {/* 위험도 점수 */}
                <div className="mb-3 p-2 bg-surface-overlay rounded border border-slate-700/20">
                  <div className="flex items-center justify-between mb-1">
                    <span className="text-[10px] text-hint">위험도</span>
                    <Badge intent={riskMeta.intent} size="sm">
                      {getAlertLevelLabel(riskLevel, tc, lang)}
                    </Badge>
                  </div>
                  <div className="flex items-baseline gap-1 mb-1">
                    <span className={`text-xl font-bold ${riskMeta.classes.text}`}>
                      {riskScore}
                    </span>
                    <span className="text-[10px] text-hint">/100</span>
                  </div>
                  <div className="h-1.5 bg-switch-background rounded-full overflow-hidden">
                    <div
                      className="h-1.5 bg-gradient-to-r from-red-600 to-red-400 rounded-full transition-all"
                      style={{ width: `${Math.min(riskScore, 100)}%` }}
                    />
                  </div>
                </div>

                {/* 알고리즘 상세 */}
                <div className="bg-surface-overlay rounded border border-slate-700/20 text-[9px]">
                  {[
                    ['활동 상태', analysis.activityState ?? '-'],
                    ['다크베셀', analysis.isDark ? '예 (의심)' : '아니오'],
                    ['AIS 공백', analysis.gapDurationMin != null && analysis.gapDurationMin > 0
                      ? `${analysis.gapDurationMin}분` : '-'],
                    ['스푸핑 점수', analysis.spoofingScore != null ? Number(analysis.spoofingScore).toFixed(2) : '-'],
                    ['속도 점프', analysis.speedJumpCount != null ? `${analysis.speedJumpCount}회` : '-'],
                    ['선단 역할', analysis.fleetRole ?? '-'],
                    ['환적 의심', analysis.transshipSuspect ? '예' : '아니오'],
                    ['환적 상대', analysis.transshipPairMmsi || '-'],
                    ['환적 시간', analysis.transshipDurationMin != null && analysis.transshipDurationMin > 0
                      ? `${analysis.transshipDurationMin}분` : '-'],
                  ].map(([k, v], i) => (
                    <div key={k} className={`flex ${i % 2 === 0 ? 'bg-surface-overlay' : ''}`}>
                      <span className="w-24 shrink-0 px-2.5 py-1.5 text-hint border-r border-slate-700/20">{k}</span>
                      <span className={`flex-1 px-2.5 py-1.5 ${
                        (k === '다크베셀' && v === '예 (의심)') || (k === '환적 의심' && v === '예')
                          ? 'text-red-400 font-bold' : 'text-label'
                      }`}>{v}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Dark 패턴 시각화 — features 기반 */}
            {analysis?.isDark && darkTier && (
              <div className="p-3 border-b border-border">
                <div className="flex items-center gap-2 mb-2">
                  <EyeOff className="w-4 h-4 text-red-400" />
                  <span className="text-[11px] font-bold text-heading">Dark Vessel 분석</span>
                </div>
                <div className="space-y-2">
                  {/* Dark tier + score */}
                  <div className="flex items-center gap-2">
                    <Badge intent={getRiskIntent(darkScore ?? 0)} size="sm">{darkTier}</Badge>
                    <span className="text-[10px] text-label font-mono">{darkScore ?? 0}점</span>
                    {darkHistory7d != null && darkHistory7d > 0 && (
                      <span className="text-[9px] text-red-400">7일간 {darkHistory7d}회 반복</span>
                    )}
                  </div>
                  {/* 의심 점수 바 */}
                  <div className="h-1.5 bg-switch-background rounded-full overflow-hidden">
                    <div
                      className="h-1.5 rounded-full transition-all"
                      style={{
                        width: `${Math.min(darkScore ?? 0, 100)}%`,
                        backgroundColor: (darkScore ?? 0) >= 70 ? '#ef4444' : (darkScore ?? 0) >= 50 ? '#f97316' : '#eab308',
                      }}
                    />
                  </div>
                  {/* Dark 패턴 태그 */}
                  {darkPatterns && darkPatterns.length > 0 && (
                    <div className="flex flex-wrap gap-1">
                      {darkPatterns.map((p) => (
                        <Badge key={p} intent="muted" size="xs">{p}</Badge>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            )}

            {/* 환적 분석 — features 기반 */}
            {analysis?.transshipSuspect && transshipTier && (
              <div className="p-3 border-b border-border">
                <div className="flex items-center gap-2 mb-2">
                  <Shield className="w-4 h-4 text-orange-400" />
                  <span className="text-[11px] font-bold text-heading">환적 의심 분석</span>
                </div>
                <div className="flex items-center gap-2">
                  <Badge intent={getRiskIntent(transshipScore ?? 0)} size="sm">{transshipTier}</Badge>
                  <span className="text-[10px] text-label font-mono">{transshipScore ?? 0}점</span>
                  <span className="text-[9px] text-hint">상대: {analysis.transshipPairMmsi ?? '-'}</span>
                </div>
              </div>
            )}

            {/* 24h AIS 수신 이력 */}
            {history.length > 0 && (
              <div className="p-3 border-b border-border">
                <AisTimeline history={history} />
              </div>
            )}

            {/* 관련 이벤트 이력 */}
            <div className="p-3 border-b border-border">
              <div className="flex items-center gap-2 mb-2">
                <AlertTriangle className="w-4 h-4 text-red-400" />
                <span className="text-[11px] font-bold text-heading">관련 이벤트 이력</span>
                <span className="text-[9px] text-hint ml-auto">{events.length}건</span>
              </div>
              {events.length === 0 ? (
                <div className="text-[10px] text-hint text-center py-4">관련 이벤트가 없습니다.</div>
              ) : (
                <div className="space-y-1.5">
                  {events.map((evt) => (
                    <div key={evt.id} className="bg-surface-overlay rounded border border-slate-700/20 px-2.5 py-2">
                      <div className="flex items-center gap-2 mb-0.5">
                        <Badge intent={getAlertLevelIntent(evt.level)} size="xs">
                          {getAlertLevelLabel(evt.level, tc, lang)}
                        </Badge>
                        <span className="text-[10px] text-heading font-medium flex-1 truncate">{evt.title}</span>
                        <Badge intent="muted" size="xs" className="px-1.5 py-0">
                          {evt.status}
                        </Badge>
                      </div>
                      <div className="text-[9px] text-hint">
                        {formatDateTime(evt.occurredAt)} {evt.areaName ? `| ${evt.areaName}` : ''}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* 단속 이력 */}
            <div className="p-3">
              <div className="flex items-center gap-2 mb-2">
                <FileText className="w-4 h-4 text-green-400" />
                <span className="text-[11px] font-bold text-heading">단속 이력</span>
                <span className="text-[9px] text-hint ml-auto">{enforcements.length}건</span>
              </div>
              {enforcements.length === 0 ? (
                <div className="text-[10px] text-hint text-center py-4">단속 이력이 없습니다.</div>
              ) : (
                <div className="space-y-1.5">
                  {enforcements.map((enf) => (
                    <div key={enf.id} className="bg-surface-overlay rounded border border-slate-700/20 px-2.5 py-2">
                      <div className="flex items-center gap-2 mb-0.5">
                        <Badge intent="info" size="xs">{enf.enfUid}</Badge>
                        <span className="text-[10px] text-heading font-medium flex-1 truncate">
                          {enf.violationType ?? '단속'}
                        </span>
                        <Badge intent={enf.result === 'PUNISHED' ? 'critical' : 'muted'} size="xs">
                          {enf.result ?? '-'}
                        </Badge>
                      </div>
                      <div className="text-[9px] text-hint">
                        {formatDateTime(enf.enforcedAt)} {enf.areaName ? `| ${enf.areaName}` : ''}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        )}
      </div>

      {/* ── 중앙: 지도 ── */}
      <div className="flex-1 relative bg-card/40 overflow-hidden">
        {/* MMSI 표시 */}
        {mmsiParam && (
          <div className="absolute top-3 left-3 z-10 bg-card/95 backdrop-blur-sm rounded-lg border border-border px-3 py-2">
            <div className="flex items-center gap-2">
              <Ship className="w-4 h-4 text-blue-400" />
              <span className="text-[11px] font-bold text-heading">MMSI: {mmsiParam}</span>
              {analysis && (
                <Badge intent={riskMeta.intent} size="sm">
                  위험도: {getAlertLevelLabel(riskLevel, tc, lang)}
                </Badge>
              )}
            </div>
          </div>
        )}

        <BaseMap
          ref={mapRef}
          center={[
            analysis?.lat ?? 34.5,
            analysis?.lon ?? 126.5,
          ]}
          zoom={analysis?.lat ? 9 : 7}
          height="100%"
        />

        {/* 하단 좌표 바 */}
        <div className="absolute bottom-0 left-0 right-0 h-6 bg-background/90 backdrop-blur-sm border-t border-border flex items-center justify-center gap-4 px-4 z-[1000]">
          <span className="flex items-center gap-1 text-[8px]">
            <MapPin className="w-2.5 h-2.5 text-green-400" />
            <span className="text-hint">위도</span>
            <span className="text-green-400 font-mono font-bold">{analysis?.lat?.toFixed(4) ?? '-'}</span>
          </span>
          <span className="flex items-center gap-1 text-[8px]">
            <MapPin className="w-2.5 h-2.5 text-green-400" />
            <span className="text-hint">경도</span>
            <span className="text-green-400 font-mono font-bold">{analysis?.lon?.toFixed(4) ?? '-'}</span>
          </span>
          <span className="text-[8px]">
            <span className="text-blue-400 font-bold">KST</span>
            <span className="text-label font-mono ml-1">{formatDateTime(new Date())}</span>
          </span>
        </div>
      </div>

      {/* ── 우측 도구바 ── */}
      <div className="w-10 bg-background border-l border-border flex flex-col items-center py-2 gap-0.5 shrink-0">
        {RIGHT_TOOLS.map((t) => (
          <button type="button" key={t.label} className="flex flex-col items-center gap-0.5 py-1.5 px-1 rounded hover:bg-surface-overlay text-hint hover:text-label transition-colors" title={t.label}>
            <t.icon className="w-3.5 h-3.5" /><span className="text-[6px]">{t.label}</span>
          </button>
        ))}
        <div className="flex-1" />
        <div className="flex flex-col border border-border rounded-lg overflow-hidden">
          <button type="button" className="p-1 hover:bg-secondary text-hint hover:text-heading text-sm font-bold">+</button>
          <div className="h-px bg-white/[0.06]" />
          <button type="button" className="p-1 hover:bg-secondary text-hint hover:text-heading text-sm font-bold">-</button>
        </div>
        <button type="button" className="mt-1 flex flex-col items-center py-1 text-hint hover:text-label"><LayoutGrid className="w-3.5 h-3.5" /><span className="text-[6px]">범례</span></button>
        <button type="button" className="flex flex-col items-center py-1 text-hint hover:text-label"><div className="w-3.5 h-3.5 border border-slate-500 rounded-sm" /><span className="text-[6px]">미니맵</span></button>
        <button type="button" className="flex flex-col items-center py-1 bg-blue-600/20 text-blue-400 rounded"><Radar className="w-3.5 h-3.5" /><span className="text-[6px]">AI모드</span></button>
      </div>
    </PageContainer>
  );
}
