import React from 'react';
import { Home, Clock, Settings, User, Radio, Cloud } from 'lucide-react';

export const Sidebar = ({ activeTab, setActiveTab }) => {
  const menuItems = [
    { id: 'dashboard', label: '首页', icon: Home, subtitle: '新建与最近记录' },
    { id: 'records', label: '历史记录', icon: Clock, subtitle: '多模态时间轴' },
    { id: 'devices', label: '硬件设备', icon: Radio, subtitle: '微光 Spark BLE' },
    { id: 'sync', label: '云端同步', icon: Cloud, subtitle: '数据库隔离' },
    { id: 'profile', label: '个人中心', icon: User, subtitle: '账号与设置' },
  ];

  return (
    <aside className="w-56 bg-white border-r border-black/10 flex flex-col justify-between shrink-0 hidden md:flex min-h-[calc(100vh-61px)]">
      <div className="p-4 space-y-6">
        <div>
          <div className="px-3 mb-3 text-[10px] font-semibold text-slate-400 uppercase tracking-widest font-mono">
            星痕导航
          </div>

          <nav className="space-y-1">
            {menuItems.map((item) => {
              const Icon = item.icon;
              const isActive = activeTab === item.id;
              return (
                <button
                  key={item.id}
                  onClick={() => setActiveTab(item.id)}
                  className={`w-full flex items-center justify-between px-3.5 py-2.5 rounded-xl text-xs font-medium transition-all ${
                    isActive
                      ? 'bg-[#EAEAEA] text-[#1D1D1F] font-semibold shadow-2xs'
                      : 'text-[#6E6E73] hover:text-[#1D1D1F] hover:bg-slate-100/60'
                  }`}
                >
                  <div className="flex items-center space-x-3">
                    <Icon className={`w-4 h-4 ${isActive ? 'text-[#1D1D1F]' : 'text-slate-500'}`} />
                    <span>{item.label}</span>
                  </div>
                  {isActive && (
                    <span className="w-1.5 h-1.5 rounded-full bg-[#1D1D1F]"></span>
                  )}
                </button>
              );
            })}
          </nav>
        </div>

        {/* Hardware Status Promo Card */}
        <div className="p-4 rounded-2xl bg-[#F8F9FA] border border-black/10 relative overflow-hidden">
          <div className="flex items-center space-x-2 text-[#1D1D1F] text-xs font-semibold mb-1">
            <Radio className="w-4 h-4 text-emerald-600" />
            <span>微光 Spark 录音硬件</span>
          </div>
          <p className="text-[11px] text-[#6E6E73] leading-relaxed mb-2">
            手机 App 通过 BLE 蓝牙无缝连接“微光 Spark”，实时同步现场记录与事件标注。
          </p>
          <div className="text-[10px] font-mono text-slate-500 flex items-center space-x-1.5">
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
            <span>服务器已隔离多账号数据</span>
          </div>
        </div>
      </div>

      {/* Footer Signature */}
      <div className="p-4 border-t border-black/10 text-[11px] text-slate-400 font-mono space-y-1">
        <div className="flex justify-between items-center">
          <span>CelestiaTrace Engine</span>
          <span className="text-slate-700 font-semibold">v2.0</span>
        </div>
        <div className="text-[10px] text-slate-400">
          纯粹星辰 · 倾听，然后深刻。
        </div>
      </div>
    </aside>
  );
};

// Floating iOS Bottom TabBar component matching the screenshot exactly
export const FloatingTabBar = ({ activeTab, setActiveTab }) => {
  const tabs = [
    { id: 'dashboard', label: '首页', icon: Home },
    { id: 'records', label: '历史记录', icon: Clock },
    { id: 'devices', label: '设置', icon: Settings },
    { id: 'profile', label: '个人中心', icon: User },
  ];

  return (
    <div className="fixed bottom-5 left-1/2 -translate-x-1/2 z-50 px-3 py-2 rounded-full bg-white/95 backdrop-blur-xl border border-black/10 shadow-[0_8px_30px_rgba(0,0,0,0.08)] flex items-center space-x-1 sm:space-x-2">
      {tabs.map((tab) => {
        const Icon = tab.icon;
        const isActive = activeTab === tab.id;
        return (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`flex flex-col sm:flex-row items-center justify-center space-x-0 sm:space-x-2 px-5 py-2 rounded-full text-xs font-medium transition-all ${
              isActive
                ? 'bg-[#EAEAEA] text-[#1D1D1F] font-semibold scale-102'
                : 'text-[#6E6E73] hover:text-[#1D1D1F]'
            }`}
          >
            <Icon className={`w-4 h-4 ${isActive ? 'text-[#1D1D1F]' : 'text-[#6E6E73]'}`} />
            <span className="text-[12px] mt-0.5 sm:mt-0">{tab.label}</span>
          </button>
        );
      })}
    </div>
  );
};