import { useState, lazy, Suspense } from "react"
import Navigation from "../components/Navigation"

// Import pages as components (they render their own content but we strip their Navigation)
import HabitsContent from "./Habits"
import TasksContent from "./Tasks"
import StatsContent from "./Stats"

const tabs = [
  { key: "habits", label: "Привычки", icon: "🎯" },
  { key: "tasks", label: "Задачи", icon: "✅" },
  { key: "stats", label: "Статистика", icon: "📊" },
]

export default function Tracker() {
  const [activeTab, setActiveTab] = useState("habits")

  return (
    <div className="min-h-screen bg-surface-50 dark:bg-gray-950 gradient-mesh pb-24">
      <header className="bg-white/70 dark:bg-gray-900/70 backdrop-blur-xl border-b border-gray-100/50 dark:border-gray-800 sticky top-0 z-10">
        <div className="max-w-lg mx-auto px-4 py-4">
          <h1 className="text-xl font-display font-bold text-gray-900 dark:text-white">
            📊 Трекер
          </h1>
        </div>
        <div className="max-w-lg mx-auto px-4 pb-3 flex gap-2">
          {tabs.map((t) => (
            <button
              key={t.key}
              onClick={() => setActiveTab(t.key)}
              className={`flex-1 py-2 rounded-xl text-sm font-semibold transition ${
                activeTab === t.key
                  ? "bg-primary-500 text-white"
                  : "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
              }`}
            >
              {t.icon} {t.label}
            </button>
          ))}
        </div>
      </header>

      <div>
        {activeTab === "habits" && <HabitsContent embedded />}
        {activeTab === "tasks" && <TasksContent embedded />}
        {activeTab === "stats" && <StatsContent embedded />}
      </div>

      <Navigation />
    </div>
  )
}