import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInWithCustomToken, 
  signInAnonymously, 
  onAuthStateChanged, 
  signOut 
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  addDoc, 
  deleteDoc, 
  updateDoc, 
  doc, 
  query, 
  onSnapshot, 
  serverTimestamp 
} from 'firebase/firestore';
import { 
  Plus, 
  Trash2, 
  CheckCircle, 
  Circle, 
  Loader2, 
  LogOut, 
  AlertCircle 
} from 'lucide-react';

// --- Firebase Configuration ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

// --- Main Component ---
export default function App() {
  const [user, setUser] = useState(null);
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 1. Authentication Effect
  useEffect(() => {
    let mounted = true;

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

    initAuth();

    const unsubscribe = onAuthStateChanged(auth, (u) => {
      if (mounted) {
        setUser(u);
        // Only stop loading if we have a user (or auth failed previously)
        if (!u) setLoading(false); 
      }
    });

    return () => {
      mounted = false;
      unsubscribe();
    };
  }, []);

  // 2. Data Fetching Effect (Strictly dependent on 'user')
  useEffect(() => {
    if (!user) return; // <--- CRITICAL FIX: Stop execution if no user

    // Use a simplified query to avoid index errors (no orderBy/where initially)
    // We sort in memory instead.
    const q = query(collection(db, 'artifacts', appId, 'public', 'data', 'todos'));

    const unsubscribe = onSnapshot(q, 
      (snapshot) => {
        const fetchedTasks = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        
        // In-memory sort: Incomplete first, then by creation time
        fetchedTasks.sort((a, b) => {
          if (a.completed === b.completed) {
            return (b.createdAt?.seconds || 0) - (a.createdAt?.seconds || 0);
          }
          return a.completed ? 1 : -1;
        });

        setTasks(fetchedTasks);
        setLoading(false);
        setError(null);
      },
      (err) => {
        console.error("Firestore error:", err);
        setError("Missing permissions or connection issue.");
        setLoading(false);
      }
    );

    return () => unsubscribe();
  }, [user]); // <--- Reruns only when user status changes

  // --- Handlers ---

  const handleAddTask = async (e) => {
    e.preventDefault();
    if (!newTask.trim() || !user) return;

    try {
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'todos'), {
        text: newTask,
        completed: false,
        createdAt: serverTimestamp(),
        userId: user.uid, // Store who created it
        createdBy: user.isAnonymous ? 'Anonymous' : (user.displayName || 'User')
      });
      setNewTask('');
    } catch (err) {
      console.error("Error adding task:", err);
      setError("Failed to add task.");
    }
  };

  const toggleTask = async (task) => {
    try {
      await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'todos', task.id), {
        completed: !task.completed
      });
    } catch (err) {
      console.error("Error updating task:", err);
    }
  };

  const deleteTask = async (taskId) => {
    try {
      await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'todos', taskId));
    } catch (err) {
      console.error("Error deleting task:", err);
    }
  };

  // --- Render ---

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-slate-50 text-slate-400">
        <Loader2 className="w-8 h-8 animate-spin" />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans selection:bg-indigo-100">
      <div className="max-w-xl mx-auto p-4 sm:p-8">
        
        {/* Header */}
        <header className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Tasks</h1>
            <p className="text-slate-500 text-sm mt-1">
              Shared list • {user ? (user.isAnonymous ? 'Anonymous Guest' : 'Signed In') : 'Offline'}
            </p>
          </div>
          {/* User ID/Status Badge */}
          <div className="hidden sm:block text-xs bg-white px-3 py-1 rounded-full border border-slate-200 text-slate-400 font-mono">
            {user ? user.uid.slice(0, 6) + '...' : 'No Auth'}
          </div>
        </header>

        {/* Error Banner */}
        {error && (
          <div className="mb-6 p-4 bg-red-50 border border-red-100 rounded-lg flex items-center gap-3 text-red-600">
            <AlertCircle className="w-5 h-5 flex-shrink-0" />
            <p className="text-sm">{error}</p>
          </div>
        )}

        {/* Input Area */}
        <form onSubmit={handleAddTask} className="mb-8 relative group">
          <input
            type="text"
            value={newTask}
            onChange={(e) => setNewTask(e.target.value)}
            placeholder="What needs to be done?"
            className="w-full pl-4 pr-12 py-4 bg-white rounded-xl shadow-sm border border-slate-200 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all placeholder:text-slate-400 text-lg"
          />
          <button
            type="submit"
            disabled={!newTask.trim()}
            className="absolute right-2 top-2 bottom-2 aspect-square bg-indigo-600 hover:bg-indigo-700 disabled:bg-slate-200 disabled:cursor-not-allowed text-white rounded-lg flex items-center justify-center transition-colors"
          >
            <Plus className="w-5 h-5" />
          </button>
        </form>

        {/* Task List */}
        <div className="space-y-3">
          {tasks.length === 0 ? (
            <div className="text-center py-12">
              <div className="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <CheckCircle className="w-8 h-8 text-slate-300" />
              </div>
              <h3 className="text-slate-900 font-medium">All caught up</h3>
              <p className="text-slate-500 text-sm mt-1">Start by adding a new task above.</p>
            </div>
          ) : (
            tasks.map((task) => (
              <div
                key={task.id}
                className={`group flex items-start gap-3 p-4 bg-white rounded-xl shadow-sm border border-slate-100 hover:border-slate-200 transition-all ${
                  task.completed ? 'opacity-60 bg-slate-50' : ''
                }`}
              >
                <button
                  onClick={() => toggleTask(task)}
                  className={`mt-1 flex-shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors ${
                    task.completed
                      ? 'bg-emerald-500 border-emerald-500 text-white'
                      : 'border-slate-300 text-transparent hover:border-emerald-500'
                  }`}
                >
                  <CheckCircle className="w-3.5 h-3.5 fill-current" />
                </button>
                
                <div className="flex-1 min-w-0 pt-0.5">
                  <p className={`text-base leading-snug break-words ${
                    task.completed ? 'line-through text-slate-500' : 'text-slate-700'
                  }`}>
                    {task.text}
                  </p>
                </div>

                <button
                  onClick={() => deleteTask(task.id)}
                  className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all"
                  aria-label="Delete task"
                >
                  <Trash2 className="w-4 h-4" />
                </button>
              </div>
            ))
          )}
        </div>

        {/* Footer */}
        <div className="mt-12 text-center">
           <p className="text-xs text-slate-400">
             Data is stored in collection: <code className="bg-slate-100 px-1 py-0.5 rounded">public/data/todos</code>
           </p>
        </div>

      </div>
    </div>
  );
}