import { LayoutDashboard, CalendarDays } from 'lucide-react';
import { AnimatePresence } from 'motion/react';
import HydrogenView, { type HydrogenSubTab } from './HydrogenView';
import SubTabs from './SubTabs';
import { useHashSubTab } from './useHashSubTab';
import { FadeIn, PageFrame } from '../../components/ui/surface';

const SUB_TABS = [
  { id: 'daily',    label: '每日', icon: CalendarDays },
  { id: 'overview', label: '总览', icon: LayoutDashboard },
] as const satisfies readonly { id: HydrogenSubTab; label: string; icon: typeof CalendarDays }[];

const SUB_IDS: readonly HydrogenSubTab[] = ['daily', 'overview'];

export default function HydrogenModule() {
  const [sub, setSub] = useHashSubTab<HydrogenSubTab>('hydrogen', SUB_IDS);
  return (
    <PageFrame
      title="氢能经营看板"
      subtitle="按时间、车辆归属、加氢站和区域统一展示加氢量、费用、收入与异常波动。"
      icon={CalendarDays}
      eyebrow="ENERGY BI"
      meta="数据单位清晰标注 · 支持日/总览切换"
    >
      <SubTabs tabs={SUB_TABS} active={sub} onChange={setSub} />
      <AnimatePresence mode="wait">
        <FadeIn key={sub}>
          <HydrogenView sub={sub} />
        </FadeIn>
      </AnimatePresence>
    </PageFrame>
  );
}
