import React, { useState, useEffect, useMemo, useRef } from 'react';
import { 
  Layout, Calendar, CheckSquare, Target, User, 
  LogOut, Plus, Trash2, GripVertical, AlertCircle, 
  Sun, Moon, ChevronRight, CheckCircle2, Circle,
  Brain, Dumbbell, PenTool, Smile, Menu, X, Save
} from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInWithCustomToken, 
  signInAnonymously, 
  onAuthStateChanged, 
  signOut,
  updateProfile
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  doc, 
  setDoc, 
  onSnapshot, 
  query, 
  deleteDoc, 
  updateDoc,
  serverTimestamp 
} from 'firebase/firestore';

// --- Firebase Configuration & Setup ---
const getFirebaseConfig = () => {
  try {
    // In the real environment, this is injected. 
    // Fallback for local testing or if undefined.
    if (typeof __firebase_config !== 'undefined') {
      return JSON.parse(__firebase_config);
    }
    return null;
  } catch (e) {
    console.error("Firebase config parsing error:", e);
    return null;
  }
};

const firebaseConfig = getFirebaseConfig();
const app = firebaseConfig ? initializeApp(firebaseConfig) : null;
const auth = app ? getAuth(app) : null;
const db = app ? getFirestore(app) : null;
const appId = typeof __app_id !== 'undefined' ? __app_id : 'plannerdada-default';

// --- Constants & Data Models ---
const QUADRANTS = {
  DO: { id: 'do', title: 'Do', subtitle: 'Urgent & Important', color: 'bg-red-50', border: 'border-red-200', text: 'text-red-700', icon: AlertCircle, limit: 3 },
  DECIDE: { id: 'decide', title: 'Decide', subtitle: 'Not Urgent & Important', color: 'bg-blue-50', border: 'border-blue-200', text: 'text-blue-700', icon: Calendar, limit: null },
  DELEGATE: { id: 'delegate', title: 'Delegate', subtitle: 'Urgent & Not Important', color: 'bg-yellow-50', border: 'border-yellow-200', text: 'text-yellow-700', icon: User, limit: null },
  DELETE: { id: 'delete', title: 'Delete', subtitle: 'Not Urgent & Not Important', color: 'bg-gray-50', border: 'border-gray-200', text: 'text-gray-700', icon: Trash2, limit: null },
};

const WELLNESS_ACTIVITIES = [
  { id: 'learning', label: 'Learning', placeholder: 'e.g. Read 10 pages', icon: Brain, points: 5 },
  { id: 'movement', label: 'Movement', placeholder: 'e.g. 30min Run', icon: Dumbbell, points: 5 },
  { id: 'journaling', label: 'Journaling', placeholder: 'e.g. Write morning pages', icon: PenTool, points: 5 },
  { id: 'mindfulness', label: 'Mindfulness', placeholder: 'e.g. 10min Meditation', icon: Smile, points: 5 },
];

// --- Helper Components ---

const Button = ({ children, onClick, variant = 'primary', className = '', ...props }) => {
  const variants = {
    primary: 'bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm',
    secondary: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50',
    ghost: 'text-gray-600 hover:bg-gray-100',
    danger: 'bg-red-50 text-red-600 hover:bg-red-100',
  };
  return (
    <button
      onClick={onClick}
      className={`px-4 py-2 rounded-lg font-medium transition-colors duration-200 flex items-center justify-center gap-2 ${variants[variant]} ${className}`}
      {...props}
    >
      {children}
    </button>
  );
};

const Modal = ({ isOpen, onClose, title, children }) => {
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 animate-in fade-in duration-200">
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden animate-in zoom-in-95 duration-200">
        <div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
          <h3 className="font-semibold text-lg text-gray-800">{title}</h3>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 p-1 rounded-full hover:bg-gray-200 transition-colors">
            <X size={20} />
          </button>
        </div>
        <div className="p-6">
          {children}
        </div>
      </div>
    </div>
  );
};

// --- Main Application Component ---

export default function App() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [tasks, setTasks] = useState([]);
  const [dailyPlan, setDailyPlan] = useState({ wellness: {}, reflection: {} });
  const [currentDate, setCurrentDate] = useState(new Date().toISOString().split('T')[0]);
  const [activeTab, setActiveTab] = useState('daily');
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  
  // Modal States
  const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
  const [targetQuadrant, setTargetQuadrant] = useState('do');
  
  // Auth Initialization
  useEffect(() => {
    if (!auth) {
      setLoading(false);
      return;
    }

    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (error) {
        console.error("Auth error:", error);
      }
    };

    initAuth();
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      setLoading(false);
    });
    return () => unsubscribe();
  }, []);

  // Data Fetching
  useEffect(() => {
    if (!user || !db) return;

    // 1. Fetch Tasks for current date
    const tasksRef = collection(db, 'artifacts', appId, 'users', user.uid, 'tasks');
    const unsubscribeTasks = onSnapshot(tasksRef, (snapshot) => {
      const loadedTasks = snapshot.docs
        .map(doc => ({ id: doc.id, ...doc.data() }))
        .filter(t => t.date === currentDate);
      setTasks(loadedTasks);
    }, (error) => console.error("Tasks fetch error:", error));

    // 2. Fetch Daily Plan Details (Wellness, Reflection)
    const planRef = doc(db, 'artifacts', appId, 'users', user.uid, 'daily_plans', currentDate);
    const unsubscribePlan = onSnapshot(planRef, (doc) => {
      if (doc.exists()) {
        setDailyPlan(doc.data());
      } else {
        setDailyPlan({ wellness: {}, reflection: {} });
      }
    }, (error) => console.error("Plan fetch error:", error));

    return () => {
      unsubscribeTasks();
      unsubscribePlan();
    };
  }, [user, currentDate]);

  // --- Actions ---

  const handleAddTask = async (e) => {
    e.preventDefault();
    const title = e.target.title.value;
    const quadrant = e.target.quadrant.value;

    if (!title.trim()) return;

    // Check limit for Q1
    if (quadrant === 'do') {
      const q1Count = tasks.filter(t => t.quadrant === 'do' && !t.completed).length;
      if (q1Count >= 3) {
        alert("The 'Do' quadrant is limited to 3 active tasks to ensure focus!");
        return;
      }
    }

    const newTask = {
      title,
      quadrant,
      completed: false,
      date: currentDate,
      createdAt: serverTimestamp(),
      userId: user.uid
    };

    try {
      await addDoc(collection(db, 'artifacts', appId, 'users', user.uid, 'tasks'), newTask);
      setIsTaskModalOpen(false);
      e.target.reset();
    } catch (error) {
      console.error("Error adding task:", error);
    }
  };

  const toggleTaskComplete = async (task) => {
    try {
      const taskRef = doc(db, 'artifacts', appId, 'users', user.uid, 'tasks', task.id);
      await updateDoc(taskRef, { completed: !task.completed });
    } catch (error) {
      console.error("Error toggling task:", error);
    }
  };

  const deleteTask = async (taskId) => {
    if (!window.confirm("Delete this task?")) return;
    try {
      await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'tasks', taskId));
    } catch (error) {
      console.error("Error deleting task:", error);
    }
  };

  // --- Wellness & Reflection Actions ---

  const updateWellness = async (activityId, field, value) => {
    try {
      const planRef = doc(db, 'artifacts', appId, 'users', user.uid, 'daily_plans', currentDate);
      const currentActivity = dailyPlan.wellness?.[activityId] || {};
      
      const newWellness = {
        ...dailyPlan.wellness,
        [activityId]: {
          ...currentActivity,
          [field]: value
        }
      };

      await setDoc(planRef, {
        wellness: newWellness,
        date: currentDate,
        updatedAt: serverTimestamp()
      }, { merge: true });
    } catch (error) {
      console.error("Error updating wellness:", error);
    }
  };

  const updateReflection = async (field, value) => {
    try {
      const planRef = doc(db, 'artifacts', appId, 'users', user.uid, 'daily_plans', currentDate);
      
      await setDoc(planRef, {
        reflection: {
          ...dailyPlan.reflection,
          [field]: value
        },
        date: currentDate,
        updatedAt: serverTimestamp()
      }, { merge: true });
    } catch (error) {
      console.error("Error updating reflection:", error);
    }
  };

  // --- Score Calculation ---
  const dailyScore = useMemo(() => {
    if (!tasks.length && Object.keys(dailyPlan.wellness || {}).length === 0) return 0;

    let score = 0;
    const totalTasks = tasks.length;
    const completedTasks = tasks.filter(t => t.completed).length;

    // Base score: (completed / total) * 85
    if (totalTasks > 0) {
      score += (completedTasks / totalTasks) * 85;
    }

    // Wellness Bonus: 5 points each if completed (max 20)
    // Now we check for the 'completed' boolean property
    const wellnessPoints = Object.values(dailyPlan.wellness || {}).reduce((acc, curr) => {
      return acc + (curr.completed ? 5 : 0);
    }, 0);
    score += wellnessPoints;

    // Q1 Completion Bonus: +10 if all Q1 tasks are done (and there was at least 1)
    const q1Tasks = tasks.filter(t => t.quadrant === 'do');
    if (q1Tasks.length > 0 && q1Tasks.every(t => t.completed)) {
      score += 10;
    }

    // Reflection Bonus: +5 if any reflection field is filled
    const hasReflection = Object.values(dailyPlan.reflection || {}).some(v => v && v.trim().length > 0);
    if (hasReflection) score += 5;

    return Math.min(Math.round(score), 125);
  }, [tasks, dailyPlan]);


  // --- Render Functions ---

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="flex flex-col items-center gap-4">
          <div className="w-12 h-12 border-4 border-indigo-600 border-t-transparent rounded-full animate-spin"></div>
          <p className="text-gray-500 font-medium">Loading PlannerDada...</p>
        </div>
      </div>
    );
  }

  if (!user && !app) {
     return (
        <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 p-6 text-center">
            <h1 className="text-3xl font-bold text-gray-800 mb-4">Configuration Missing</h1>
            <p className="max-w-md text-gray-600">Please provide a valid Firebase Configuration to run this application.</p>
        </div>
     )
  }

  if (!user) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-indigo-50 to-blue-100 p-6">
        <div className="bg-white p-8 rounded-2xl shadow-xl w-full max-w-md text-center">
          <div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6">
            <Target className="text-indigo-600" size={32} />
          </div>
          <h1 className="text-3xl font-bold text-gray-800 mb-2">PlannerDada</h1>
          <p className="text-gray-600 mb-8">Plan your day. Execute your week. Achieve your year.</p>
          <Button 
            onClick={() => signInAnonymously(auth)} 
            className="w-full py-3 text-lg"
          >
            Start Planning Now
          </Button>
          <p className="mt-4 text-xs text-gray-400">By continuing, you enter Guest Mode.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 flex overflow-hidden">
      {/* Sidebar - Mobile Overlay */}
      {isSidebarOpen && (
        <div 
          className="fixed inset-0 bg-black/50 z-20 lg:hidden"
          onClick={() => setIsSidebarOpen(false)}
        />
      )}

      {/* Sidebar - Navigation */}
      <aside className={`fixed lg:static inset-y-0 left-0 z-30 w-64 bg-white border-r border-gray-200 transform transition-transform duration-200 lg:transform-none ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}>
        <div className="h-full flex flex-col">
          <div className="p-6 flex items-center gap-3 border-b border-gray-100">
            <div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center text-white font-bold">P</div>
            <span className="text-xl font-bold text-gray-800">PlannerDada</span>
          </div>

          <nav className="flex-1 p-4 space-y-1">
            <NavItem icon={CheckSquare} label="Daily Plan" active={activeTab === 'daily'} onClick={() => setActiveTab('daily')} />
            <NavItem icon={Calendar} label="Weekly Plan" active={activeTab === 'weekly'} onClick={() => setActiveTab('weekly')} />
            <NavItem icon={Target} label="Quarterly OKRs" active={activeTab === 'quarterly'} onClick={() => setActiveTab('quarterly')} />
            <NavItem icon={Sun} label="Annual Vision" active={activeTab === 'annual'} onClick={() => setActiveTab('annual')} />
          </nav>

          <div className="p-4 border-t border-gray-100">
             <div className="bg-indigo-50 rounded-xl p-4 mb-4">
                <div className="flex justify-between items-end mb-2">
                    <span className="text-sm font-medium text-indigo-900">Daily Score</span>
                    <span className="text-2xl font-bold text-indigo-700">{dailyScore}</span>
                </div>
                <div className="w-full bg-indigo-200 rounded-full h-2">
                    <div 
                        className="bg-indigo-600 h-2 rounded-full transition-all duration-500" 
                        style={{ width: `${(dailyScore / 125) * 100}%` }}
                    />
                </div>
                <p className="text-xs text-indigo-600 mt-2 text-center">Target: 85+</p>
             </div>

            <div className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
              <div className="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center">
                 <User size={16} className="text-gray-600"/>
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-gray-900 truncate">Guest User</p>
                <p className="text-xs text-gray-500 truncate">Pro Plan</p>
              </div>
              <button onClick={() => signOut(auth)} className="text-gray-400 hover:text-red-500">
                <LogOut size={18} />
              </button>
            </div>
          </div>
        </div>
      </aside>

      {/* Main Content */}
      <main className="flex-1 flex flex-col h-screen overflow-hidden">
        {/* Header */}
        <header className="bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center shrink-0">
          <div className="flex items-center gap-4">
            <button 
                onClick={() => setIsSidebarOpen(true)}
                className="lg:hidden text-gray-500 hover:text-gray-700"
            >
                <Menu size={24} />
            </button>
            <div>
              <h2 className="text-xl font-bold text-gray-800">
                {activeTab === 'daily' ? 'Eisenhower Matrix' : 
                 activeTab === 'weekly' ? 'Weekly Scorecard' :
                 activeTab === 'quarterly' ? 'Quarterly OKRs' : 'Annual Vision'}
              </h2>
              <p className="text-sm text-gray-500 flex items-center gap-2">
                 {new Date(currentDate).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
              </p>
            </div>
          </div>
          
          <div className="flex items-center gap-3">
             <input 
                type="date" 
                value={currentDate} 
                onChange={(e) => setCurrentDate(e.target.value)}
                className="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-indigo-500 outline-none"
             />
             <Button onClick={() => {
                setTargetQuadrant('do');
                setIsTaskModalOpen(true);
             }}>
                <Plus size={18} /> <span className="hidden sm:inline">Add Task</span>
             </Button>
          </div>
        </header>

        {/* Scrollable Content Area */}
        <div className="flex-1 overflow-y-auto p-4 lg:p-8">
            {activeTab === 'daily' ? (
                <div className="max-w-6xl mx-auto space-y-8">
                    
                    {/* The Matrix */}
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6 h-auto md:h-[600px]">
                        {Object.values(QUADRANTS).map((quadrant) => {
                            const quadrantTasks = tasks.filter(t => t.quadrant === quadrant.id);
                            const isFull = quadrant.limit && quadrantTasks.filter(t => !t.completed).length >= quadrant.limit;
                            
                            return (
                                <div key={quadrant.id} className={`flex flex-col rounded-2xl border-2 ${quadrant.border} bg-white overflow-hidden shadow-sm hover:shadow-md transition-shadow`}>
                                    <div className={`px-4 py-3 border-b ${quadrant.border} ${quadrant.color} flex justify-between items-center`}>
                                        <div className="flex items-center gap-2">
                                            <quadrant.icon size={18} className={quadrant.text} />
                                            <div>
                                                <h3 className={`font-bold ${quadrant.text}`}>{quadrant.title}</h3>
                                                <p className="text-[10px] uppercase tracking-wider font-semibold opacity-60 text-gray-600">{quadrant.subtitle}</p>
                                            </div>
                                        </div>
                                        <div className="flex items-center gap-2">
                                            {quadrant.limit && (
                                                <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${isFull ? 'bg-red-100 text-red-700' : 'bg-white/50 text-gray-600'}`}>
                                                    {quadrantTasks.filter(t => !t.completed).length}/{quadrant.limit}
                                                </span>
                                            )}
                                            <button 
                                                onClick={() => {
                                                    setTargetQuadrant(quadrant.id);
                                                    setIsTaskModalOpen(true);
                                                }}
                                                className={`p-1 rounded-md hover:bg-white/50 ${quadrant.text}`}
                                            >
                                                <Plus size={18} />
                                            </button>
                                        </div>
                                    </div>
                                    <div className="flex-1 p-3 overflow-y-auto space-y-2 bg-gray-50/30">
                                        {quadrantTasks.length === 0 ? (
                                            <div className="h-full flex flex-col items-center justify-center text-gray-400 text-sm italic border-2 border-dashed border-gray-100 rounded-lg p-4">
                                                No tasks yet
                                            </div>
                                        ) : (
                                            quadrantTasks.map(task => (
                                                <div 
                                                    key={task.id} 
                                                    className={`group bg-white p-3 rounded-lg shadow-sm border border-gray-100 hover:border-indigo-200 transition-all flex items-start gap-3 ${task.completed ? 'opacity-60 bg-gray-50' : ''}`}
                                                >
                                                    <button 
                                                        onClick={() => toggleTaskComplete(task)}
                                                        className={`mt-0.5 shrink-0 ${task.completed ? 'text-indigo-600' : 'text-gray-300 hover:text-indigo-600'}`}
                                                    >
                                                        {task.completed ? <CheckCircle2 size={20} /> : <Circle size={20} />}
                                                    </button>
                                                    <div className="flex-1 min-w-0">
                                                        <p className={`text-sm font-medium text-gray-800 break-words ${task.completed ? 'line-through text-gray-500' : ''}`}>
                                                            {task.title}
                                                        </p>
                                                    </div>
                                                    <button 
                                                        onClick={() => deleteTask(task.id)}
                                                        className="opacity-0 group-hover:opacity-100 text-gray-300 hover:text-red-500 transition-opacity"
                                                    >
                                                        <Trash2 size={16} />
                                                    </button>
                                                </div>
                                            ))
                                        )}
                                    </div>
                                </div>
                            );
                        })}
                    </div>

                    {/* Wellness & Documenting Section */}
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                      {/* Wellness Planning */}
                      <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden lg:col-span-2">
                        <div className="bg-indigo-50/50 px-6 py-4 border-b border-indigo-100 flex items-center justify-between">
                            <h3 className="font-bold text-indigo-900 flex items-center gap-2">
                                <Sun size={20} /> Daily Wellness Planning
                            </h3>
                            <span className="text-sm text-indigo-600 font-medium">Get +20 points</span>
                        </div>
                        <div className="p-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                            {WELLNESS_ACTIVITIES.map((activity) => {
                                const activityData = dailyPlan.wellness?.[activity.id] || {};
                                const isActive = activityData.completed;
                                
                                return (
                                    <div 
                                        key={activity.id}
                                        className={`flex flex-col p-4 rounded-xl border-2 transition-all duration-200 ${
                                            isActive 
                                            ? 'border-indigo-200 bg-indigo-50/30' 
                                            : 'border-gray-100 bg-white hover:border-gray-200'
                                        }`}
                                    >
                                        <div className="flex items-center gap-3 mb-3">
                                          <div className={`p-2 rounded-full ${isActive ? 'bg-white text-indigo-600 shadow-sm' : 'bg-gray-100 text-gray-500'}`}>
                                              <activity.icon size={20} />
                                          </div>
                                          <span className="font-semibold text-gray-800">{activity.label}</span>
                                        </div>
                                        
                                        <div className="space-y-3">
                                          <input 
                                            type="text"
                                            placeholder={activity.placeholder}
                                            value={activityData.plan || ''}
                                            onChange={(e) => updateWellness(activity.id, 'plan', e.target.value)}
                                            className="w-full text-sm border-b border-gray-200 bg-transparent py-1 px-1 focus:border-indigo-500 focus:ring-0 outline-none transition-colors"
                                          />
                                          
                                          <label className="flex items-center gap-2 cursor-pointer group">
                                            <div className="relative">
                                              <input 
                                                type="checkbox"
                                                checked={isActive || false}
                                                onChange={(e) => updateWellness(activity.id, 'completed', e.target.checked)}
                                                className="sr-only"
                                              />
                                              <div className={`w-5 h-5 rounded border flex items-center justify-center transition-colors ${
                                                isActive ? 'bg-indigo-600 border-indigo-600' : 'border-gray-300 group-hover:border-indigo-400'
                                              }`}>
                                                {isActive && <CheckCircle2 size={14} className="text-white" />}
                                              </div>
                                            </div>
                                            <span className={`text-xs font-medium ${isActive ? 'text-indigo-700' : 'text-gray-500 group-hover:text-gray-700'}`}>
                                              {isActive ? 'Completed (+5 pts)' : 'Mark as done'}
                                            </span>
                                          </label>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                      </div>

                      {/* End of Day Reflection */}
                      <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden lg:col-span-2">
                         <div className="bg-orange-50/50 px-6 py-4 border-b border-orange-100 flex items-center justify-between">
                            <h3 className="font-bold text-orange-900 flex items-center gap-2">
                                <Moon size={20} /> End of Day Reflection
                            </h3>
                            <span className="text-sm text-orange-600 font-medium">+5 bonus points</span>
                        </div>
                        <div className="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                            {[
                              { id: 'win', label: 'Biggest Win Today', placeholder: 'What went well? e.g. Closed $5k deal', icon: Target },
                              { id: 'improve', label: 'Improve Tomorrow', placeholder: 'What could be better? e.g. Delegate more', icon: Brain },
                              { id: 'gratitude', label: 'Gratitude', placeholder: 'I am thankful for... e.g. Team support', icon: Smile }
                            ].map((field) => (
                              <div key={field.id} className="space-y-2">
                                <label className="flex items-center gap-2 text-sm font-semibold text-gray-700">
                                  <field.icon size={16} className="text-orange-500" />
                                  {field.label}
                                </label>
                                <textarea
                                  value={dailyPlan.reflection?.[field.id] || ''}
                                  onChange={(e) => updateReflection(field.id, e.target.value)}
                                  placeholder={field.placeholder}
                                  className="w-full h-24 rounded-lg border border-gray-200 p-3 text-sm focus:ring-2 focus:ring-orange-100 focus:border-orange-300 outline-none resize-none transition-shadow"
                                />
                              </div>
                            ))}
                        </div>
                      </div>
                    </div>

                </div>
            ) : (
                <div className="flex flex-col items-center justify-center h-full text-center p-8 bg-white rounded-2xl border-2 border-dashed border-gray-200">
                    <div className="bg-indigo-50 p-6 rounded-full mb-4">
                        <AlertCircle className="text-indigo-400" size={48} />
                    </div>
                    <h3 className="text-xl font-bold text-gray-800 mb-2">Feature Coming Soon</h3>
                    <p className="text-gray-500 max-w-md mx-auto mb-6">
                        The {activeTab === 'weekly' ? 'Weekly Scorecard' : activeTab === 'quarterly' ? 'Quarterly OKR' : 'Annual Vision'} 
                        module is part of Phase 2 of the roadmap. Focus on mastering your daily routine first!
                    </p>
                    <Button variant="secondary" onClick={() => setActiveTab('daily')}>
                        Return to Daily Planner
                    </Button>
                </div>
            )}
        </div>
      </main>

      {/* Add Task Modal */}
      <Modal 
        isOpen={isTaskModalOpen} 
        onClose={() => setIsTaskModalOpen(false)}
        title="Add New Task"
      >
        <form onSubmit={handleAddTask} className="space-y-4">
            <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">What needs to be done?</label>
                <input 
                    name="title" 
                    autoFocus
                    placeholder="e.g., Prepare Q3 presentation" 
                    className="w-full border border-gray-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-indigo-500 outline-none"
                    required
                />
            </div>
            
            <div>
                <label className="block text-sm font-medium text-gray-700 mb-3">Which Quadrant?</label>
                <div className="grid grid-cols-2 gap-3">
                    {Object.values(QUADRANTS).map(q => (
                        <label 
                            key={q.id} 
                            className={`
                                relative flex flex-col p-3 border rounded-lg cursor-pointer transition-all
                                ${targetQuadrant === q.id ? `ring-2 ring-indigo-500 bg-indigo-50 border-indigo-200` : 'border-gray-200 hover:bg-gray-50'}
                            `}
                        >
                            <input 
                                type="radio" 
                                name="quadrant" 
                                value={q.id} 
                                checked={targetQuadrant === q.id}
                                onChange={() => setTargetQuadrant(q.id)}
                                className="sr-only"
                            />
                            <div className="flex items-center gap-2 mb-1">
                                <q.icon size={16} className={q.text} />
                                <span className={`font-semibold text-sm ${q.text}`}>{q.title}</span>
                            </div>
                            <span className="text-xs text-gray-500">{q.subtitle}</span>
                        </label>
                    ))}
                </div>
            </div>

            <div className="flex gap-3 pt-2">
                <Button type="button" variant="secondary" className="flex-1" onClick={() => setIsTaskModalOpen(false)}>Cancel</Button>
                <Button type="submit" className="flex-1">Add Task</Button>
            </div>
        </form>
      </Modal>

    </div>
  );
}

// --- Sub-components ---

function NavItem({ icon: Icon, label, active, onClick }) {
  return (
    <button
      onClick={onClick}
      className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 ${
        active 
          ? 'bg-indigo-50 text-indigo-700' 
          : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
      }`}
    >
      <Icon size={20} className={active ? 'text-indigo-600' : 'text-gray-400'} />
      {label}
      {active && <ChevronRight size={16} className="ml-auto text-indigo-400" />}
    </button>
  );
}