import React, { createContext, useContext, useState, useEffect } from 'react'; import { BrowserRouter, Routes, Route, Navigate, NavLink } from 'react-router-dom'; import { MapPin, Calendar, Compass, Wallet, Briefcase, Plus, Heart, Trash2, Sun, Cloud, CloudRain, Utensils, Train, ArrowRight, Sparkles, X, DollarSign, Check, Eye } from 'lucide-react'; import { Toaster, toast } from 'sonner'; // --- MEDIA CONSTANTS --- const MEDIA = { tokyoHero: "https://images.unsplash.com/photo-1503899036084-c55cdd92da26?auto=format&fit=crop&w=1200&q=80", shibuya: "https://images.unsplash.com/photo-1542051841857-5f90071e7989?auto=format&fit=crop&w=600&q=80", teamlab: "https://images.unsplash.com/photo-1518156677180-95a2893f3e9f?auto=format&fit=crop&w=600&q=80", ramen: "https://images.unsplash.com/photo-1569718212165-3a8278d5f624?auto=format&fit=crop&w=600&q=80", shinjuku: "https://images.unsplash.com/photo-1524413840807-0c3cb6fa808d?auto=format&fit=crop&w=600&q=80", temple: "https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?auto=format&fit=crop&w=600&q=80", }; // Image component with safe fallback function SafeImage({ src, alt, className }: { src: string; alt: string; className?: string }) { const [imgSrc, setImgSrc] = useState(src); return ( {alt}

{ setImgSrc("data:image/svg+xml;utf8,"); }} /> ); } // --- TYPES & INTERFACES --- interface Activity { id: string; day: number; time: string; title: string; type: 'food' | 'culture' | 'nightlife' | 'outdoors' | 'transport'; cost: number; note?: string; } interface DiscoverPlace { id: string; title: string; category: 'food' | 'culture' | 'nightlife' | 'outdoors' | 'gems'; rating: number; price: '$$' | '$$$' | '$'; description: string; image: string; saved?: boolean; } interface Expense { id: string; title: string; amount: number; category: 'food' | 'lodging' | 'transport' | 'activities' | 'shopping'; date: string; } interface PackingItem { id: string; title: string; category: 'documents' | 'clothes' | 'tech' | 'health'; packed: boolean; } interface RouteWiseContextType { tripName: string; setTripName: (name: string) => void; duration: number; activities: Activity[]; discoverPlaces: DiscoverPlace[]; expenses: Expense[]; packingItems: PackingItem[]; addActivity: (activity: Omit) => void; deleteActivity: (id: string) => void; toggleSavePlace: (id: string) => void; addExpense: (expense: Omit) => void; deleteExpense: (id: string) => void; togglePackingItem: (id: string) => void; addPackingItem: (title: string, category: PackingItem['category']) => void; packAllItems: () => void; resetPackingItems: () => void; clearAllExpenses: () => void; } const RouteWiseContext = createContext(undefined); // --- INITIAL SEED DATA --- const initialActivities: Activity[] = [ { id: '1', day: 1, time: '10:00', title: 'Shibuya Crossing & Hachiko', type: 'culture', cost: 0, note: 'Great photo spot from the station bridge' }, { id: '2', day: 1, time: '13:00', title: 'Ichiran Ramen Lunch', type: 'food', cost: 15, note: 'Use the ticket machine, customize spice level to 3' }, { id: '3', day: 1, time: '15:30', title: 'Meiji Shrine Walk', type: 'outdoors', cost: 0, note: 'Peaceful forest walk in the middle of Tokyo' }, { id: '4', day: 2, time: '09:30', title: 'teamLab Planets Digital Art', type: 'culture', cost: 28, note: 'Wear shorts, some rooms have water up to knees' }, { id: '5', day: 2, time: '13:00', title: 'Sushi at Toyosu Market', type: 'food', cost: 35, note: 'Super fresh morning catch' }, { id: '6', day: 3, time: '10:00', title: 'Shinjuku Gyoen National Garden', type: 'outdoors', cost: 5, note: 'Beautiful glasshouse and traditional gardens' }, { id: '7', day: 3, time: '20:00', title: 'Golden Gai Bar Hopping', type: 'nightlife', cost: 40, note: 'Tiny bars, cover charge usually around 500-1000 yen' }, ]; const initialDiscover: DiscoverPlace[] = [ { id: 'd1', title: 'Yayoi Kusama Museum', category: 'culture', rating: 4.8, price: '$$', description: 'Avant-garde museum dedicated to Tokyo\'s iconic contemporary artist.', image: MEDIA.teamlab, saved: false }, { id: 'd2', title: 'Omoide Yokocho (Memory Lane)', category: 'food', rating: 4.7, price: '$', description: 'Atmospheric alleyways lined with tiny yakitori stalls and lanterns.', image: MEDIA.shibuya, saved: false }, { id: 'd3', title: 'Mount Takao Day Hike', category: 'outdoors', rating: 4.6, price: '$', description: 'Scenic mountain just 50 minutes from central Tokyo. Great views of Fuji.', image: MEDIA.shinjuku, saved: false }, { id: 'd4', title: 'Shimokitazawa Thrift Shops', category: 'gems', rating: 4.9, price: '$$', description: 'The bohemian heart of Tokyo, packed with vintage clothes and vinyl.', image: MEDIA.temple, saved: false }, { id: 'd5', title: 'Bar Benfiddich', category: 'nightlife', rating: 4.9, price: '$$$', description: 'Master mixologist serving custom herbal cocktails with no menu.', image: MEDIA.ramen, saved: false }, ]; const initialExpenses: Expense[] = [ { id: 'e1', title: 'Flight Ticket (Solo Special)', amount: 350, category: 'transport', date: '2024-04-10' }, { id: 'e2', title: 'Capsule Hotel (4 Nights)', amount: 180, category: 'lodging', date: '2024-04-11' }, { id: 'e3', title: 'Pocket Wi-Fi Rental', amount: 25, category: 'transport', date: '2024-04-11' }, { id: 'e4', title: 'teamLab Tickets', amount: 28, category: 'activities', date: '2024-04-12' }, ]; const initialPacking: PackingItem[] = [ { id: 'p1', title: 'Passport & Visa copies', category: 'documents', packed: true }, { id: 'p2', title: 'JR Pass Voucher', category: 'documents', packed: false }, { id: 'p3', title: 'Universal Travel Adapter', category: 'tech', packed: true }, { id: 'p4', title: 'Power Bank (10,000mAh)', category: 'tech', packed: false }, { id: 'p5', title: 'Comfortable Walking Shoes', category: 'clothes', packed: true }, { id: 'p6', title: 'Rain Jacket / Compact Umbrella', category: 'clothes', packed: false }, { id: 'p7', title: 'Personal Medications', category: 'health', packed: true }, { id: 'p8', title: 'Hand Sanitizer & Masks', category: 'health', packed: false }, ]; // --- PROVIDER COMPONENT --- export function RouteWiseProvider({ children }: { children: React.ReactNode }) { const [tripName, setTripName] = useState(() => { return localStorage.getItem('rw_trip_name') || "Tokyo Solo Explorer"; }); const [activities, setActivities] = useState(() => { const saved = localStorage.getItem('rw_activities'); return saved ? JSON.parse(saved) : initialActivities; }); const [discoverPlaces, setDiscoverPlaces] = useState(() => { const saved = localStorage.getItem('rw_discover'); return saved ? JSON.parse(saved) : initialDiscover; }); const [expenses, setExpenses] = useState(() => { const saved = localStorage.getItem('rw_expenses'); return saved ? JSON.parse(saved) : initialExpenses; }); const [packingItems, setPackingItems] = useState(() => { const saved = localStorage.getItem('rw_packing'); return saved ? JSON.parse(saved) : initialPacking; }); useEffect(() => { localStorage.setItem('rw_trip_name', tripName); }, [tripName]); useEffect(() => { localStorage.setItem('rw_activities', JSON.stringify(activities)); }, [activities]); useEffect(() => { localStorage.setItem('rw_discover', JSON.stringify(discoverPlaces)); }, [discoverPlaces]); useEffect(() => { localStorage.setItem('rw_expenses', JSON.stringify(expenses)); }, [expenses]); useEffect(() => { localStorage.setItem('rw_packing', JSON.stringify(packingItems)); }, [packingItems]); const addActivity = (act: Omit) => { const newAct = { ...act, id: Date.now().toString() }; setActivities(prev => [...prev, newAct].sort((a, b) => a.time.localeCompare(b.time))); toast.success(`Scheduled "${act.title}" on Day ${act.day}!`); }; const deleteActivity = (id: string) => { const act = activities.find(a => a.id === id); setActivities(prev => prev.filter(a => a.id !== id)); if (act) toast.error(`Removed "${act.title}"`); }; const toggleSavePlace = (id: string) => { setDiscoverPlaces(prev => prev.map(p => { if (p.id === id) { const nextSaved = !p.saved; toast(nextSaved ? `Saved "${p.title}" to places` : `Removed "${p.title}" from saved`); return { ...p, saved: nextSaved }; } return p; })); }; const addExpense = (exp: Omit) => { const newExp = { ...exp, id: Date.now().toString() }; setExpenses(prev => [newExp, ...prev]); toast.success(`Logged expense: $${exp.amount} for ${exp.title}`); }; const deleteExpense = (id: string) => { setExpenses(prev => prev.filter(e => e.id !== id)); toast.error("Expense deleted"); }; const togglePackingItem = (id: string) => { setPackingItems(prev => prev.map(item => { if (item.id === id) { return { ...item, packed: !item.packed }; } return item; })); }; const addPackingItem = (title: string, category: PackingItem['category']) => { const newItem = { id: Date.now().toString(), title, category, packed: false }; setPackingItems(prev => [...prev, newItem]); toast.success(`Added "${title}" to checklist`); }; const packAllItems = () => { setPackingItems(prev => prev.map(item => ({ ...item, packed: true }))); toast.success("All items marked as packed!"); }; const resetPackingItems = () => { setPackingItems(prev => prev.map(item => ({ ...item, packed: false }))); toast.info("Checklist reset"); }; const clearAllExpenses = () => { if (window.confirm("Are you sure you want to clear all logged expenses?")) { setExpenses([]); toast.success("All expenses cleared"); } }; return ( {children} ); } function useRouteWise() { const context = useContext(RouteWiseContext); if (!context) throw new Error('useRouteWise must be used within RouteWiseProvider'); return context; } // --- APP SHELL / NAVIGATION --- function AppShell({ children }: { children: React.ReactNode }) { const { tripName, setTripName } = useRouteWise(); const navItems = [ { to: '/dashboard', label: 'Dashboard', icon: Calendar }, { to: '/itinerary', label: 'Itinerary', icon: MapPin }, { to: '/discover', label: 'Discover', icon: Compass }, { to: '/budget', label: 'Budget', icon: Wallet }, { to: '/packing', label: 'Packing', icon: Briefcase }, ]; return (

{/* Sidebar for Desktop */}

RouteWise

Active Trip

{tripName}

4 Days • Solo Traveler

Solo Traveler

Premium Account

{/* Top Bar for Mobile */}

RouteWise

{/* Main Content Area */}

{children}

{/* Bottom Navigation for Mobile */}

); } // --- SCREEN: DASHBOARD --- function DashboardScreen() { const { tripName, activities, expenses, discoverPlaces, addActivity } = useRouteWise(); const [selectedDay, setSelectedDay] = useState(1); // Calculate stats const totalBudget = 900; const totalSpent = expenses.reduce((sum, e) => sum + e.amount, 0); const percentSpent = Math.min(Math.round((totalSpent / totalBudget) * 100), 100); const savedPlaces = discoverPlaces.filter(p => p.saved); // Weather mock data for 4 days const weatherDays = [ { day: 1, temp: '21°C', desc: 'Sunny', icon: Sun }, { day: 2, temp: '19°C', desc: 'Partly Cloudy', icon: Cloud }, { day: 3, temp: '17°C', desc: 'Light Rain', icon: CloudRain }, { day: 4, temp: '22°C', desc: 'Sunny', icon: Sun }, ]; return (

{/* Hero Banner */}

Solo Trip Starts tomorrow

{tripName}

4 Days in Tokyo, Japan • Smart Itinerary Ready

{/* Grid Layout */}

{/* Left Column: Weather & Quick Stats */}

{/* Weather Day Cards */}

Weather Forecast (Click to view day highlights)

{weatherDays.map((wd) => ( ))}

{/* Today's Highlights */}

Day {selectedDay} Highlights

Full Itinerary

{activities.filter(a => a.day === selectedDay).slice(0, 3).map((act) => (

{act.time}

{act.title}

{act.type} • {act.cost === 0 ? 'Free' : `$${act.cost}`}

{act.note}

))} {activities.filter(a => a.day === selectedDay).length === 0 && (

No activities planned for Day {selectedDay} yet.

)}

{/* Right Column: Budget Snapshot & Saved Places */}

{/* Budget Snapshot */}

Budget Snapshot

${totalSpent}

Spent of ${totalBudget} limit

${totalBudget - totalSpent} Left

{/* Progress Bar */}

0% {percentSpent}% Used 100%

Manage Expenses

{/* Saved Places */}

Saved Places ({savedPlaces.length})

{savedPlaces.length === 0 ? (

No saved places yet.

Explore Discover

) : (

{savedPlaces.map(place => (

{place.title}

{place.category} • {place.price}

))}

)}

); } // --- SCREEN: ITINERARY PLANNER --- function ItineraryScreen() { const { activities, addActivity, deleteActivity } = useRouteWise(); const [activeDay, setActiveDay] = useState(1); const [showAddModal, setShowAddModal] = useState(false); // Quick Add Inline Form State const [quickTitle, setQuickTitle] = useState(''); const [quickTime, setQuickTime] = useState('12:00'); // Modal Form State const [title, setTitle] = useState(''); const [time, setTime] = useState('12:00'); const [type, setType] = useState<'food' | 'culture' | 'nightlife' | 'outdoors' | 'transport'>('culture'); const [cost, setCost] = useState(''); const [note, setNote] = useState(''); const handleQuickAdd = (e: React.FormEvent) => { e.preventDefault(); if (!quickTitle.trim()) { toast.error("Please enter an activity name"); return; } addActivity({ day: activeDay, time: quickTime, title: quickTitle.trim(), type: 'culture', cost: 0, note: 'Quick added' }); setQuickTitle(''); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!title) { toast.error("Please enter an activity name"); return; } addActivity({ day: activeDay, time, title, type, cost: Number(cost) || 0, note }); // Reset form setTitle(''); setTime('12:00'); setCost(''); setNote(''); setShowAddModal(false); }; const currentDayActivities = activities.filter(a => a.day === activeDay); const getTypeIcon = (type: string) => { switch (type) { case 'food': return ; case 'transport': return ; default: return ; } }; return (

Itinerary Planner

Organize your 4-day Tokyo solo adventure

{/* Day Selector Tabs */}

{[1, 2, 3, 4].map(day => ( ))}

{/* Quick Add Bar */}

{/* Draggable-looking Day Section */}

Day {activeDay} Schedule

{currentDayActivities.length} items planned

{currentDayActivities.length === 0 ? (

No activities scheduled for this day yet.

) : (

{currentDayActivities.map((act) => (

{/* Timeline Node Icon */}

{getTypeIcon(act.type)}

{act.time} {act.type}

{act.title}

{act.note && (

💡 {act.note}

)}

Est. Cost

{act.cost === 0 ? 'Free' : `$${act.cost}`}

))}

)}

{/* Add Activity Modal */} {showAddModal && (

Add Day {activeDay} Activity

Activity Name setTitle(e.target.value)} placeholder="e.g. Shibuya Crossing" className="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-[hsl(var(--accent))]/20 focus:border-[hsl(var(--accent))] text-sm" required />

Time setTime(e.target.value)} className="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-[hsl(var(--accent))]/20 focus:border-[hsl(var(--accent))] text-sm" required />

Type

Est. Cost (USD) setCost(e.target.value)} placeholder="0 for Free" className="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-[hsl(var(--accent))]/20 focus:border-[hsl(var(--accent))] text-sm" />

Notes / Tips

setNote(e.target.value)}
                  placeholder="e.g. Best photo spots, entry requirements..."
                  rows={3}
                  className="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-[hsl(var(--accent))]/20 focus:border-[hsl(var(--accent))] text-sm"
                />
              </div>

<div className="flex gap-3 pt-2">
                <button 
                  type="button"
                  onClick={() => setShowAddModal(false)}
                  className="flex-1 py-2.5 border border-slate-200 text-slate-600 rounded-xl font-semibold text-sm hover:bg-slate-50 transition-all"
                >
                  Cancel
                </button>
                <button 
                  type="submit"
                  className="flex-1 py-2.5 bg-[hsl(var(--accent))] text-white rounded-xl font-semibold text-sm hover:opacity-90 transition-all"
                >
                  Save Activity
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}

// --- SCREEN: DISCOVER ---
function DiscoverScreen() {
  const { discoverPlaces, toggleSavePlace, addActivity } = useRouteWise();
  const [activeFilter, setActiveFilter] = useState<string>('all');
  const [schedulingPlaceId, setSchedulingPlaceId] = useState<string | null>(null);

const filters = [
    { id: 'all', label: 'All Places' },
    { id: 'food', label: 'Food & Dining' },
    { id: 'culture', label: 'Culture' },
    { id: 'nightlife', label: 'Nightlife' },
    { id: 'outdoors', label: 'Outdoors' },
    { id: 'gems', label: 'Hidden Gems' },
  ];

const filteredPlaces = activeFilter === 'all' 
    ? discoverPlaces 
    : discoverPlaces.filter(p => p.category === activeFilter);

return (
    <div className="space-y-6">
      <div>
        <h1 className="font-heading text-2xl md:text-3xl font-bold tracking-tight text-slate-800">Discover Tokyo</h1>
        <p className="text-sm text-slate-500">Hand-curated local recommendations for solo travelers</p>
      </div>

{/* Filter Chips */}
      <div className="flex gap-2 overflow-x-auto pb-2 -mx-4 px-4 scrollbar-none">
        {filters.map(filter => (
          <button
            key={filter.id}
            onClick={() => setActiveFilter(filter.id)}
            className={`px-4 py-2 rounded-full text-xs font-semibold whitespace-nowrap transition-all
              ${activeFilter === filter.id 
                ? 'bg-[hsl(var(--primary))] text-white shadow-sm' 
                : 'bg-white border border-slate-200 text-slate-600 hover:border-slate-300'}
            `}
          >
            {filter.label}
          </button>
        ))}
      </div>

{/* Grid of Places */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {filteredPlaces.map(place => (
          <div key={place.id} className="bg-white border border-slate-100 rounded-3xl overflow-hidden shadow-sm flex flex-col group">
            <div className="relative h-48 overflow-hidden shrink-0">
              <SafeImage 
                src={place.image} 
                alt={place.title} 
                className="w-full h-full object-cover group-hover:scale-105 transition-all duration-300"
              />
              <button
                onClick={() => toggleSavePlace(place.id)}
                className="absolute top-4 right-4 p-2.5 rounded-full bg-white/90 backdrop-blur-sm shadow-md hover:scale-110 transition-all z-10"
              >
                <Heart 
                  className={`w-5 h-5 transition-colors ${place.saved ? 'text-rose-500 fill-rose-500' : 'text-slate-400'}`} 
                />
              </button>
              <span className="absolute bottom-4 left-4 bg-[hsl(var(--primary))]/90 backdrop-blur-sm text-white text-[10px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider">
                {place.category}
              </span>
            </div>

<div className="p-5 flex-1 flex flex-col justify-between">
              <div className="space-y-2">
                <div className="flex justify-between items-start">
                  <h3 className="font-bold text-slate-800 text-lg leading-snug">{place.title}</h3>
                  <div className="flex items-center gap-1 bg-amber-50 text-amber-700 px-2 py-0.5 rounded text-xs font-bold">
                    ★ {place.rating}
                  </div>
                </div>
                <p className="text-xs text-slate-500 line-clamp-2 leading-relaxed">{place.description}</p>
              </div>

{/* Day Scheduling Popover Panel */}
              {schedulingPlaceId === place.id ? (
                <div className="mt-4 pt-4 border-t border-slate-100 bg-slate-50 p-3 rounded-2xl animate-in fade-in slide-in-from-bottom-2 duration-200">
                  <div className="flex justify-between items-center mb-2">
                    <span className="text-xs font-bold text-slate-600">Choose a day to schedule:</span>
                    <button 
                      onClick={() => setSchedulingPlaceId(null)}
                      className="text-slate-400 hover:text-slate-600"
                    >
                      <X className="w-4 h-4" />
                    </button>
                  </div>
                  <div className="grid grid-cols-4 gap-2">
                    {[1, 2, 3, 4].map(day => (
                      <button
                        key={day}
                        onClick={() => handleScheduleToDay(place, day)}
                        className="bg-white hover:bg-[hsl(var(--accent))] hover:text-white border border-slate-200 text-slate-700 py-1.5 rounded-xl text-xs font-bold transition-all"
                      >
                        Day {day}
                      </button>
                    ))}
                  </div>
                </div>
              ) : (
                <div className="flex justify-between items-center pt-4 border-t border-slate-50 mt-4">
                  <span className="text-xs font-semibold text-slate-400">Price: <span className="text-slate-700">{place.price}</span></span>
                  <div className="flex gap-2">
                    <button 
                      onClick={() => setSchedulingPlaceId(place.id)}
                      className="text-xs font-bold bg-[hsl(var(--accent))] text-white hover:opacity-90 px-3 py-2 rounded-xl transition-all flex items-center gap-1"
                    >
                      <Plus className="w-3.5 h-3.5" /> Schedule
                    </button>
                    <button 
                      onClick={() => toggleSavePlace(place.id)}
                      className={`text-xs font-bold px-3 py-2 rounded-xl transition-all
                        ${place.saved 
                          ? 'bg-slate-100 text-slate-600' 
                          : 'bg-[hsl(var(--accent))]/10 text-[hsl(var(--accent))] hover:bg-[hsl(var(--accent))]/20'}
                      `}
                    >
                      {place.saved ? 'Saved' : 'Save'}
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// --- SCREEN: BUDGET TRACKER ---
function BudgetTrackerScreen() {
  const { expenses, addExpense, deleteExpense, clearAllExpenses } = useRouteWise();
  
  // Form State
  const [title, setTitle] = useState('');
  const [amount, setAmount] = useState('');
  const [category, setCategory] = useState<Expense['category']>('food');

const totalBudget = 900;
  const totalSpent = expenses.reduce((sum, e) => sum + e.amount, 0);
  const remaining = totalBudget - totalSpent;

// Category breakdown
  const categories: Record<Expense['category'], { color: string; label: string }> = {
    food: { color: 'bg-amber-500', label: 'Food & Dining' },
    lodging: { color: 'bg-indigo-500', label: 'Lodging' },
    transport: { color: 'bg-blue-500', label: 'Transport' },
    activities: { color: 'bg-purple-500', label: 'Activities' },
    shopping: { color: 'bg-rose-500', label: 'Shopping' },
  };

const categoryTotals = expenses.reduce((acc, exp) => {
    acc[exp.category] = (acc[exp.category] || 0) + exp.amount;
    return acc;
  }, {} as Record<Expense['category'], number>);

// Quick Log Presets
  const presets: { title: string; amount: number; category: Expense['category'] }[] = [
    { title: '🍜 Ramen Lunch', amount: 15, category: 'food' },
    { title: '🚇 Metro Ticket', amount: 8, category: 'transport' },
    { title: '☕ Matcha Latte', amount: 6, category: 'food' },
    { title: '🛍️ Gachapon Toys', amount: 12, category: 'shopping' },
  ];

const handleQuickLog = (preset: typeof presets[0]) => {
    addExpense({
      title: preset.title,
      amount: preset.amount,
      category: preset.category,
      date: new Date().toISOString().split('T')[0]
    });
  };

return (
    <div className="space-y-6">
      <div>
        <h1 className="font-heading text-2xl md:text-3xl font-bold tracking-tight text-slate-800">Budget Tracker</h1>
        <p className="text-sm text-slate-500">Keep tabs on your spending without the hassle</p>
      </div>

{/* Top Overview Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div className="bg-white border border-slate-100 rounded-2xl p-5 shadow-sm">
          <div className="text-xs font-semibold text-slate-400 mb-1">Total Budget</div>
          <div className="text-2xl font-black text-slate-800">${totalBudget}</div>
        </div>
        <div className="bg-white border border-slate-100 rounded-2xl p-5 shadow-sm">
          <div className="text-xs font-semibold text-slate-400 mb-1">Total Spent</div>
          <div className="text-2xl font-black text-slate-800">${totalSpent}</div>
        </div>
        <div className="bg-white border border-slate-100 rounded-2xl p-5 shadow-sm">
          <div className="text-xs font-semibold text-slate-400 mb-1">Remaining</div>
          <div className={`text-2xl font-black ${remaining >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
            ${remaining}
          </div>
        </div>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        {/* Left Column: Category Breakdown & Add Form */}
        <div className="lg:col-span-2 space-y-6">
          
          {/* Quick Presets */}
          <div className="bg-white border border-slate-100 rounded-3xl p-6 shadow-sm">
            <h2 className="text-sm font-bold text-slate-400 uppercase tracking-wider mb-3">⚡ Quick Log Presets</h2>
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
              {presets.map((preset, idx) => (
                <button
                  key={idx}
                  onClick={() => handleQuickLog(preset)}
                  className="bg-slate-50 hover:bg-slate-100 border border-slate-100 hover:border-slate-200 p-3 rounded-2xl text-left transition-all"
                >
                  <div className="text-xs font-bold text-slate-800 truncate">{preset.title}</div>
                  <div className="text-sm font-black text-[hsl(var(--accent))] mt-1">${preset.amount}</div>
                </button>
              ))}
            </div>
          </div>

{/* Category Progress Bars */}
          <div className="bg-white border border-slate-100 rounded-3xl p-6 shadow-sm">
            <h2 className="text-lg font-bold text-slate-800 mb-4">Category Breakdown</h2>
            <div className="space-y-4">
              {(Object.keys(categories) as Array<Expense['category']>).map(cat => {
                const amt = categoryTotals[cat] || 0;
                const pct = totalSpent > 0 ? Math.round((amt / totalSpent) * 100) : 0;
                return (
                  <div key={cat} className="space-y-1">
                    <div className="flex justify-between text-xs font-semibold">
                      <span className="text-slate-600">{categories[cat].label}</span>
                      <span className="text-slate-800">${amt} ({pct}%)</span>
                    </div>
                    <div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
                      <div 
                        className={`h-full rounded-full ${categories[cat].color}`} 
                        style={{ width: `${pct}%` }}
                      />
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

{/* Recent Expenses List */}
          <div className="bg-white border border-slate-100 rounded-3xl p-6 shadow-sm">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-lg font-bold text-slate-800">Recent Expenses</h2>
              {expenses.length > 0 && (
                <button
                  onClick={clearAllExpenses}
                  className="text-xs font-semibold text-rose-500 hover:text-rose-700 bg-rose-50 hover:bg-rose-100 px-2.5 py-1.5 rounded-lg transition-all"
                >
                  Clear All
                </button>
              )}
            </div>
            {expenses.length === 0 ? (
              <p className="text-sm text-slate-400 text-center py-6">No expenses logged yet.</p>
            ) : (
              <div className="space-y-3">
                {expenses.map(exp => (
                  <div key={exp.id} className="flex items-center justify-between p-3 bg-slate-50/50 hover:bg-slate-50 border border-slate-100 rounded-2xl transition-all">
                    <div className="flex items-center gap-3">
                      <div className={`w-3 h-3 rounded-full ${categories[exp.category]?.color || 'bg-slate-400'}`} />
                      <div>
                        <h4 className="text-sm font-bold text-slate-800">{exp.title}</h4>
                        <span className="text-[10px] text-slate-400 capitalize">{exp.category} • {exp.date}</span>
                      </div>
                    </div>
                    <div className="flex items-center gap-3">
                      <span className="font-bold text-slate-800">${exp.amount}</span>
                      <button 
                        onClick={() => deleteExpense(exp.id)}
                        className="p-1.5 text-slate-400 hover:text-rose-500 rounded-lg transition-all"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

</div>

{/* Right Column: Quick Add Expense Form */}
        <div>
          <div className="bg-white border border-slate-100 rounded-3xl p-6 shadow-sm sticky top-6">
            <h2 className="text-lg font-bold text-slate-800 mb-4">Quick Add Expense</h2>
            
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Expense Title</label>
                <input 
                  type="text" 
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  placeholder="e.g. Ramen Dinner"
                  className="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-[hsl(var(--accent))]/20 focus:border-[hsl(var(--accent))] text-sm"
                  required
                />
              </div>

<div>
                <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Amount (USD)</label>
                <div className="relative">
                  <span className="absolute left-3.5 top-2.5 text-slate-400 text-sm font-semibold">$</span>
                  <input 
                    type="number" 
                    value={amount}
                    onChange={(e) => setAmount(e.target.value)}
                    placeholder="0.00"
                    className="w-full pl-8 pr-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-[hsl(var(--accent))]/20 focus:border-[hsl(var(--accent))] text-sm"
                    required
                  />
                </div>
              </div>

<div>
                <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Category</label>
                <select 
                  value={category}
                  onChange={(e) => setCategory(e.target.value as any)}
                  className="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-[hsl(var(--accent))]/20 focus:border-[hsl(var(--accent))] text-sm bg-white"
                >
                  <option value="food">Food & Dining</option>
                  <option value="lodging">Lodging</option>
                  <option value="transport">Transport</option>
                  <option value="activities">Activities</option>
                  <option value="shopping">Shopping</option>
                </select>
              </div>

<button 
                type="submit"
                className="w-full py-2.5 bg-[hsl(var(--accent))] text-white rounded-xl font-semibold text-sm hover:opacity-90 transition-all shadow-sm"
              >
                Log Expense
              </button>
            </form>
          </div>
        </div>

</div>
    </div>
  );
}

// --- SCREEN: PACKING CHECKLIST ---
function PackingScreen() {
  const { packingItems, togglePackingItem, addPackingItem, packAllItems, resetPackingItems } = useRouteWise();
  const [newItemTitle, setNewItemTitle] = useState('');
  const [newCategory, setNewCategory] = useState<PackingItem['category']>('documents');

const categories: Record<PackingItem['category'], string> = {
    documents: 'Documents & Essentials',
    clothes: 'Clothing & Footwear',
    tech: 'Electronics & Tech',
    health: 'Health & Personal Care',
  };

const handleAddItem = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newItemTitle.trim()) return;
    addPackingItem(newItemTitle.trim(), newCategory);
    setNewItemTitle('');
  };

const totalItems = packingItems.length;
  const packedItems = packingItems.filter(i => i.packed).length;
  const percentPacked = totalItems > 0 ? Math.round((packedItems / totalItems) * 100) : 0;

return (
    <div className="space-y-6">
      <div>
        <h1 className="font-heading text-2xl md:text-3xl font-bold tracking-tight text-slate-800">Packing Checklist</h1>
        <p className="text-sm text-slate-500">Essential gear and documents for solo city travel</p>
      </div>

{/* Progress Card */}
      <div className="bg-white border border-slate-100 rounded-3xl p-6 shadow-sm">
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4">
          <div>
            <h2 className="text-lg font-bold text-slate-800">Packing Progress</h2>
            <p className="text-xs text-slate-500">{packedItems} of {totalItems} items packed</p>
          </div>
          <span className="text-2xl font-black text-[hsl(var(--accent))]">{percentPacked}%</span>
        </div>
        <div className="w-full bg-slate-100 h-3 rounded-full overflow-hidden">
          <div 
            className="bg-[hsl(var(--accent))] h-full rounded-full transition-all duration-300" 
            style={{ width: `${percentPacked}%` }}
          />
        </div>
        {totalItems > 0 && (
          <div className="flex gap-2 mt-4 pt-4 border-t border-slate-100">
            <button
              onClick={packAllItems}
              className="text-xs font-semibold text-slate-600 hover:text-[hsl(var(--accent))] bg-slate-50 hover:bg-slate-100 px-3 py-1.5 rounded-lg transition-all"
            >
              Pack All
            </button>
            <button
              onClick={resetPackingItems}
              className="text-xs font-semibold text-slate-600 hover:text-rose-600 bg-slate-50 hover:bg-slate-100 px-3 py-1.5 rounded-lg transition-all"
            >
              Reset List
            </button>
          </div>
        )}
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        {/* Left Column: Checklist Grouped by Category */}
        <div className="lg:col-span-2 space-y-6">
          {(Object.keys(categories) as Array<PackingItem['category']>).map(cat => {
            const items = packingItems.filter(i => i.category === cat);
            return (
              <div key={cat} className="bg-white border border-slate-100 rounded-3xl p-6 shadow-sm">
                <h3 className="text-base font-bold text-slate-800 mb-4 border-b border-slate-50 pb-2">
                  {categories[cat]}
                </h3>
                <div className="space-y-2">
                  {items.map(item => (
                    <label 
                      key={item.id}
                      className="flex items-center gap-3 p-2.5 hover:bg-slate-50/50 rounded-xl cursor-pointer transition-all"
                    >
                      <input 
                        type="checkbox"
                        checked={item.packed}
                        onChange={() => togglePackingItem(item.id)}
                        className="w-5 h-5 rounded-md border-slate-300 text-[hsl(var(--accent))] focus:ring-[hsl(var(--accent))]/20 transition-all cursor-pointer"
                      />
                      <span className={`text-sm font-medium transition-all ${item.packed ? 'line-through text-slate-400' : 'text-slate-700'}`}>
                        {item.title}
                      </span>
                    </label>
                  ))}
                  {items.length === 0 && (
                    <p className="text-xs text-slate-400 italic">No items in this category.</p>
                  )}
                </div>
              </div>
            );
          })}
        </div>

{/* Right Column: Quick Add packing item */}
        <div>
          <div className="bg-white border border-slate-100 rounded-3xl p-6 shadow-sm sticky top-6">
            <h2 className="text-lg font-bold text-slate-800 mb-4">Add Packing Item</h2>
            
            <form onSubmit={handleAddItem} className="space-y-4">
              <div>
                <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Item Title</label>
                <input 
                  type="text" 
                  value={newItemTitle}
                  onChange={(e) => setNewItemTitle(e.target.value)}
                  placeholder="e.g. Extra Socks"
                  className="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-[hsl(var(--accent))]/20 focus:border-[hsl(var(--accent))] text-sm"
                  required
                />
              </div>

<div>
                <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Category</label>
                <select 
                  value={newCategory}
                  onChange={(e) => setNewCategory(e.target.value as any)}
                  className="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-[hsl(var(--accent))]/20 focus:border-[hsl(var(--accent))] text-sm bg-white"
                >
                  <option value="documents">Documents & Essentials</option>
                  <option value="clothes">Clothing & Footwear</option>
                  <option value="tech">Electronics & Tech</option>
                  <option value="health">Health & Personal Care</option>
                </select>
              </div>

</div>
    </div>
  );
}

// --- MAIN ROUTER & APP ENTRY ---
export default function App() {
  return (
    <RouteWiseProvider>
      <BrowserRouter>
        <AppShell>
          <Routes>
            <Route path="/dashboard" element={<DashboardScreen />} />
            <Route path="/itinerary" element={<ItineraryScreen />} />
            <Route path="/discover" element={<DiscoverScreen />} />
            <Route path="/budget" element={<BudgetTrackerScreen />} />
            <Route path="/packing" element={<PackingScreen />} />
            <Route path="*" element={<Navigate to="/dashboard" replace />} />
          </Routes>
        </AppShell>
        <Toaster position="top-right" closeButton />
      </BrowserRouter>
    </RouteWiseProvider>
  );
}</article></body></html>