import { useState } from 'react';
import { Fuel, BatteryCharging, Receipt, LayoutDashboard, CalendarDays } from 'lucide-react';
import { motion } from 'motion/react';
import HydrogenView, { type HydrogenSubTab } from './HydrogenView';
import ElectricView, { type ElectricSubTab } from './ElectricView';
import ETCView from './ETCView';

type TopTab = 'hydrogen' | 'electric' | 'etc';
type SubTabId = HydrogenSubTab | ElectricSubTab; // 'daily' | 'overview'

const TABS: { key: TopTab; label: string; icon: typeof Fuel }[] = [
  { key: 'hydrogen', label: '氢能', icon: Fuel },
  { key: 'electric', label: '电能', icon: BatteryCharging },
  { key: 'etc',      label: 'ETC', icon: Receipt },
];

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

export default function EnergyModule() {
  const [activeTab, setActiveTab] = useState<TopTab>('hydrogen');
  const [hydroSub, setHydroSub] = useState<HydrogenSubTab>('daily');
  const [electricSub, setElectricSub] = useState<ElectricSubTab>('daily');
  const showSubTabs = activeTab === 'hydrogen' || activeTab === 'electric';
  const currentSub: SubTabId = activeTab === 'electric' ? electricSub : hydroSub;
  const setSub = (id: SubTabId) => activeTab === 'electric' ? setElectricSub(id) : setHydroSub(id);
  return (
    <div className="min-h-screen bg-[#F8F9FB] text-gray-800 font-sans p-3 md:p-6 relative" style={{ overflowX: 'clip' }}>
      <div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 max-md:landscape:pb-0 max-md:landscape:h-full max-md:landscape:flex-1 max-md:landscape:overflow-hidden">

        {/* 统一 sticky 头部：top tab + (氢能时) 子 tab；同一张卡片，无间隙 */}
        {/* pb-4 留一点底部缓冲，避免下方快捷选按钮在滚动时贴着 sticky 半截露脸 */}
        <div className="sticky top-0 z-30 -mx-3 md:-mx-6 px-3 md:px-6 -mt-3 md:-mt-6 pt-3 md:pt-6 pb-4 bg-[#F8F9FB] shadow-[0_8px_12px_-12px_rgba(15,23,42,0.08)]">
          <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
            {/* 顶部 tab：氢能 / 电能 / ETC */}
            <div className={`px-4 py-2 flex items-center gap-6 ${showSubTabs ? 'border-b border-slate-50' : ''}`}>
              {TABS.map(tab => {
                const Icon = tab.icon;
                const active = activeTab === tab.key;
                return (
                  <button
                    key={tab.key}
                    onClick={() => setActiveTab(tab.key)}
                    className={`flex items-center gap-2 py-1 transition-colors relative ${active ? 'text-blue-600' : 'text-slate-400 hover:text-slate-600'}`}
                  >
                    <Icon size={14} />
                    <span className="text-[11px] font-bold">{tab.label}</span>
                    {active && (
                      <motion.div layoutId="activeEnergyTopTab" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
                    )}
                  </button>
                );
              })}
            </div>
            {/* 子 tab：氢能 / 电能 都显示 每日 / 总览 */}
            {showSubTabs && (
              <div className="p-1 flex gap-1">
                {SUB_TABS.map(({ id, label, icon: Icon }) => {
                  const active = currentSub === id;
                  return (
                    <button
                      key={id}
                      onClick={() => setSub(id)}
                      className={`flex-1 flex items-center justify-center gap-1.5 rounded-xl py-1.5 text-[12px] font-bold transition-all ${
                        active ? 'bg-blue-50 text-blue-600' : 'text-slate-400 hover:bg-slate-50'
                      }`}
                    >
                      <Icon size={14} />
                      <span>{label}</span>
                    </button>
                  );
                })}
              </div>
            )}
          </div>
        </div>

        {activeTab === 'hydrogen' && <HydrogenView sub={hydroSub} />}
        {activeTab === 'electric' && <ElectricView sub={electricSub} />}
        {activeTab === 'etc' && <ETCView />}
      </div>
    </div>
  );
}