import { Routes, Route, Link, useLocation } from 'react-router-dom';
import { RecipeListPage } from './pages/RecipeListPage';
import { RecipeDetailPage } from './pages/RecipeDetailPage';
import { CookModePage } from './pages/CookModePage';
import { NotFoundPage } from './pages/NotFoundPage';
import { ImportUrlPage } from './pages/ImportUrlPage';
import { ErrorBoundary } from './components/ErrorBoundary';
import { ToastContainer } from './components/Toast';
import { useToast } from './hooks/useToast';
import { createContext, useContext } from 'react';

// Create toast context to share toast functionality across the app
interface ToastContextType {
  success: (message: string, duration?: number) => string;
  error: (message: string, duration?: number) => string;
  info: (message: string, duration?: number) => string;
  warning: (message: string, duration?: number) => string;
}

const ToastContext = createContext<ToastContextType | null>(null);

function BookIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-4 w-4" aria-hidden="true">
      <path d="M5 5.5A2.5 2.5 0 0 1 7.5 3H19v16H7.5A2.5 2.5 0 0 0 5 21V5.5Z" />
      <path d="M5 21h14" />
    </svg>
  );
}

function PlusIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-4 w-4" aria-hidden="true">
      <path d="M12 5v14" />
      <path d="M5 12h14" />
    </svg>
  );
}

function LinkIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-4 w-4" aria-hidden="true">
      <path d="M10 13a5 5 0 0 0 7.07 0l2.12-2.12a5 5 0 0 0-7.07-7.07L10.7 5.23" />
      <path d="M14 11a5 5 0 0 0-7.07 0L4.8 13.12a5 5 0 0 0 7.07 7.07l1.42-1.42" />
    </svg>
  );
}

export function useToastContext() {
  const context = useContext(ToastContext);
  if (!context) {
    throw new Error('useToastContext must be used within ToastProvider');
  }
  return context;
}

function App() {
  const location = useLocation();
  const toast = useToast();

  const isActive = (path: string) => {
    if (path === '/' && location.pathname === '/') return true;
    if (path !== '/' && location.pathname.startsWith(path)) return true;
    return false;
  };

  const linkClass = (path: string) => {
    const base =
      'group/nav relative inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition-all duration-200 ease-out outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-safe:hover:-translate-y-0.5';
    return isActive(path)
      ? `${base} bg-blue-100 text-blue-700 shadow-sm`
      : `${base} text-slate-700 hover:bg-slate-100 hover:text-slate-900`;
  };

  return (
    <ErrorBoundary>
      <ToastContext.Provider value={toast}>
        <div className="min-h-screen">
          <ToastContainer messages={toast.messages} onClose={toast.removeToast} />

          <header className="sticky top-0 z-20 border-b border-slate-200/70 bg-white/85 shadow-sm backdrop-blur-md dark:border-slate-700/60 dark:bg-slate-900/70">
            <div className="max-w-7xl mx-auto px-4">
              <div className="flex items-center justify-between h-16 gap-3">
                <div className="flex items-center">
                  <Link
                    to="/"
                    className="group inline-flex items-center gap-2 rounded-lg px-2 py-1.5 outline-none transition-colors duration-200 hover:text-blue-700 focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2"
                  >
                    <span className="text-xl" aria-hidden="true">🍽️</span>
                    <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">Recipe Manager</h1>
                  </Link>
                </div>
                <nav aria-label="Primary" className="flex flex-wrap items-center justify-end gap-2 sm:gap-3">
                  <Link to="/" className={linkClass('/')}>
                    <BookIcon />
                    <span>Recipes</span>
                  </Link>
                  <Link to="/recipe/new" className={linkClass('/recipe/new')}>
                    <PlusIcon />
                    <span>Add Recipe</span>
                  </Link>
                  <Link to="/import/url" className={linkClass('/import/url')}>
                    <LinkIcon />
                    <span>Import URL</span>
                  </Link>
                </nav>
              </div>
            </div>
          </header>

          <main className="max-w-7xl mx-auto py-8 px-4 min-h-[70vh]">
            <Routes>
              <Route path="/" element={<RecipeListPage />} />
              <Route path="/recipe/new" element={<RecipeDetailPage />} />
              <Route path="/recipe/:id" element={<RecipeDetailPage />} />
              <Route path="/recipe/:id/cook" element={<CookModePage />} />
              <Route path="/import/url" element={<ImportUrlPage />} />
              <Route path="*" element={<NotFoundPage />} />
            </Routes>
          </main>

          <footer className="mt-12 border-t border-slate-200/70 bg-white/70 backdrop-blur-sm dark:border-slate-700/60 dark:bg-slate-900/45">
            <div className="max-w-7xl mx-auto py-6 px-4">
              <p className="text-center text-sm text-gray-500">
                Recipe Manager MVP - Built with React + Vite + TypeScript
              </p>
            </div>
          </footer>
        </div>
      </ToastContext.Provider>
    </ErrorBoundary>
  );
}

export default App;
