import { Link, Navigate, Route, Routes, useLocation } from 'react-router-dom';
import { Bell } from 'lucide-react';
import { useAuth } from '../context/AuthContext';
import PwaBottomNav from './PwaBottomNav';
import PwaHome from './PwaHome';
import { PwaNotificationProvider, usePwaNotification } from './PwaNotificationProvider';
import PwaTasks from './PwaTasks';
import PwaTaskDetail from './PwaTaskDetail';
import PwaProjectsPage from './PwaProjectsPage';
import PwaProjectDetail from './PwaProjectDetail';
import PwaNotificationsPage from './PwaNotificationsPage';
import PwaProfilePage from './PwaProfilePage';
import PwaProfileAvatar from './PwaProfileAvatar';
import PwaSprintPage from './PwaSprintPage';

const titles = {
  '/pwa': 'خانه',
  '/pwa/tasks': 'تسک‌ها',
  '/pwa/projects': 'پروژه‌ها',
  '/pwa/sprint': 'اسپرینت',
  '/pwa/notifications': 'اعلان‌ها',
  '/pwa/profile': 'پروفایل',
};

export default function PwaLayout() {
  const { user } = useAuth();
  const location = useLocation();
  const title = location.pathname.startsWith('/pwa/tasks')
      ? 'تسک‌ها'
      : location.pathname.startsWith('/pwa/projects')
        ? 'پروژه‌ها'
        : location.pathname.startsWith('/pwa/sprint')
          ? 'اسپرینت'
      : titles[location.pathname] || 'خانه';
  const isProfilePage = location.pathname === '/pwa/profile';

  return (
    <PwaNotificationProvider>
      <div className="pwa-shell" dir="rtl">
        <header className="pwa-header">
          <div className="pwa-header-brand">
            <img src="/brand/project-mark.png" alt="" />
            <div>
              <span>اپلیکیشن موبایل</span>
              <h1>{title}</h1>
            </div>
          </div>
          {!isProfilePage && <PwaHeaderActions user={user} />}
        </header>

        <main className="pwa-main">
          <Routes>
            <Route index element={<PwaHome />} />
            <Route path="tasks" element={<PwaTasks />} />
            <Route path="tasks/:id" element={<PwaTaskDetail />} />
            <Route path="projects" element={<PwaProjectsPage />} />
            <Route path="projects/:id" element={<PwaProjectDetail />} />
            <Route path="sprint" element={<PwaSprintPage />} />
            <Route path="notifications" element={<PwaNotificationsPage />} />
            <Route path="profile" element={<PwaProfilePage />} />
            <Route path="*" element={<Navigate to="/pwa" replace />} />
          </Routes>
        </main>

        <PwaBottomNav user={user} />
      </div>
    </PwaNotificationProvider>
  );
}

function PwaHeaderActions({ user }) {
  const { unreadCount } = usePwaNotification();

  return (
    <div className="pwa-header-actions">
      <Link className="pwa-header-icon pwa-header-notification" to="/pwa/notifications" aria-label="اعلان‌ها">
        <Bell size={20} />
        {unreadCount > 0 && (
          <em className={`pwa-header-notification-badge ${unreadCount > 1 ? 'count' : ''}`}>
            {unreadCount > 1 ? (unreadCount > 99 ? '+۹۹' : unreadCount.toLocaleString('fa-IR')) : ''}
          </em>
        )}
      </Link>
      <Link className="pwa-avatar" to="/pwa/profile" aria-label="پروفایل کاربری">
        <PwaProfileAvatar user={user} size="header" />
      </Link>
    </div>
  );
}
