'use client';

import { useEffect, useRef, useState } from 'react';
import { useRouter, usePathname } from 'next/navigation';
import { useAuth } from '@/components/auth/AuthProvider';
import { useTheme } from '@/components/theme/ThemeProvider';
import api from '@/lib/api';
import PomodoroTimer from '@/components/timer/PomodoroTimer';
import {
  HomeIcon,
  ListIcon,
  CalendarIcon,
  BarChartIcon,
  PillIcon,
  SettingsIcon,
  LogOutIcon,
  ClockIcon,
  SunIcon,
  MoonIcon,
} from '@/components/ui/Icons';
import Link from 'next/link';

const navItems = [
  { href: '/dashboard', label: 'Today', icon: HomeIcon },
  { href: '/dashboard/routines', label: 'Routines', icon: ListIcon },
  { href: '/dashboard/tasks', label: 'Tasks', icon: ClockIcon },
  { href: '/dashboard/history', label: 'History', icon: CalendarIcon },
  { href: '/dashboard/stats', label: 'Stats', icon: BarChartIcon },
  { href: '/dashboard/medications', label: 'Meds', icon: PillIcon },
];

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { isAuthenticated, isLoading, logout } = useAuth();
  const { isDark, toggleDark } = useTheme();
  const router = useRouter();
  const pathname = usePathname();
  const [isTimerOpen, setIsTimerOpen] = useState(false);

  const tzSynced = useRef(false);

  useEffect(() => {
    if (!isLoading && !isAuthenticated) {
      router.push('/login');
    }
  }, [isAuthenticated, isLoading, router]);

  // Sync timezone to backend once per session
  useEffect(() => {
    if (isAuthenticated && !tzSynced.current) {
      tzSynced.current = true;
      const offset = new Date().getTimezoneOffset();
      const tzName = Intl.DateTimeFormat().resolvedOptions().timeZone;
      api.preferences.update({ timezone_offset: offset, timezone_name: tzName }).catch(() => {});
    }
  }, [isAuthenticated]);

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-pulse flex flex-col items-center">
          <div className="w-12 h-12 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
          <p className="mt-4 text-gray-600 dark:text-gray-400">Loading...</p>
        </div>
      </div>
    );
  }

  if (!isAuthenticated) {
    return null;
  }

  // Hide chrome during active session run
  const isRunMode = pathname.includes('/run');

  if (isRunMode) {
    return <>{children}</>;
  }

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
      <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-10">
        <div className="flex items-center justify-between px-4 py-3">
          <div className="flex items-center gap-2">
            <img src="/logo.png" alt="Synculous" className="w-8 h-8" />
            <span className="font-bold text-gray-900 dark:text-gray-100">Synculous</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="relative">
              <PomodoroTimer 
                isExpanded={isTimerOpen} 
                onToggle={() => setIsTimerOpen(!isTimerOpen)} 
              />
            </div>
            <button
              onClick={toggleDark}
              className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
              aria-label="Toggle dark mode"
            >
              {isDark ? <SunIcon size={20} /> : <MoonIcon size={20} />}
            </button>
            <Link href="/dashboard/settings" className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
              <SettingsIcon size={20} />
            </Link>
            <button
              onClick={logout}
              className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
            >
              <LogOutIcon size={20} />
            </button>
          </div>
        </div>
      </header>

      <main className="pb-20">
        {children}
      </main>

      <nav className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 safe-area-bottom">
        <div className="flex justify-around py-2">
          {navItems.map((item) => {
            const isActive = pathname === item.href ||
              (item.href !== '/dashboard' && pathname.startsWith(item.href));
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`flex flex-col items-center gap-1 px-3 py-2 rounded-lg transition-colors ${
                  isActive
                    ? 'text-indigo-600 dark:text-indigo-400'
                    : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
                }`}
              >
                <item.icon size={20} />
                <span className="text-xs font-medium">{item.label}</span>
              </Link>
            );
          })}
        </div>
      </nav>
    </div>
  );
}