import { LayoutDashboard, BarChart3, FileText } from 'lucide-react';
import { AnimatePresence } from 'motion/react';
import MonitoringView from './MonitoringView';
import StatisticsView from './StatisticsView';
import DailyReportView from './DailyReportView';
import { useHashSubTab } from '../energy/useHashSubTab';
import RotatingFooterHint from '../../components/RotatingFooterHint';
import { FadeIn, PageFrame, SegmentedNav } from '../../components/ui/surface';

type MileageSubTab = 'monitoring' | 'statistics' | 'report';

const MILEAGE_TABS = [
  { id: 'monitoring', label: '实时监控', icon: LayoutDashboard },
  { id: 'statistics', label: '统计报表', icon: BarChart3 },
  { id: 'report', label: '每日汇报', icon: FileText },
] as const satisfies readonly { id: MileageSubTab; label: string; icon: typeof LayoutDashboard }[];

const MILEAGE_SUB_IDS: readonly MileageSubTab[] = ['monitoring', 'statistics', 'report'];

export default function MileageModule() {
  const [activeSubTab, setActiveSubTab] = useHashSubTab<MileageSubTab>('mileage', MILEAGE_SUB_IDS);

  return (
    <PageFrame
      title="车辆里程中心"
      subtitle="统一监控车辆日里程、累计里程、考核进度与日报经营口径，突出异常车辆和任务压力。"
      icon={LayoutDashboard}
      eyebrow="MILEAGE BI"
      meta="实时监控 · 统计报表 · 每日汇报"
      compactInfo
      hideHeader
    >
      <div className="sticky top-0 z-30 -mx-3 bg-[var(--app-bg)] px-3 pb-2 pt-1 shadow-[0_8px_12px_-12px_rgba(15,23,42,0.08)] md:-mx-6 md:top-12 md:px-6">
        <SegmentedNav tabs={MILEAGE_TABS} active={activeSubTab} onChange={setActiveSubTab} />
      </div>

      <AnimatePresence mode="wait">
        <FadeIn key={activeSubTab}>
          {activeSubTab === 'monitoring' ? (
            <MonitoringView />
          ) : activeSubTab === 'statistics' ? (
            <StatisticsView />
          ) : (
            <DailyReportView />
          )}
        </FadeIn>
      </AnimatePresence>
      <RotatingFooterHint />
    </PageFrame>
  );
}