import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  createUserWithEmailAndPassword, 
  signInWithEmailAndPassword, 
  signOut, 
  onAuthStateChanged,
  updateProfile,
  signInWithCustomToken
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  addDoc, 
  onSnapshot, 
  doc, 
  updateDoc, 
  deleteDoc, 
  serverTimestamp,
  query 
} from 'firebase/firestore';
import { 
  Loader2, 
  LogOut, 
  Plus, 
  Trash2, 
  Edit2, 
  CheckCircle2, 
  Circle, 
  X,
  Save,
  Layout,
  ListTodo
} from 'lucide-react';

// --- Firebase Configuration & Initialization ---
<!-- 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'; -->

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyDByV4VYyRydQafZD1e0YUgmIgZOZze4IM",
  authDomain: "taskflow-app-68523.firebaseapp.com",
  projectId: "taskflow-app-68523",
  storageBucket: "taskflow-app-68523.firebasestorage.app",
  messagingSenderId: "852660449313",
  appId: "1:852660449313:web:1448f523688b22ebc53360"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// --- Main Application Component ---
export default function App() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [authError, setAuthError] = useState('');

  // Initial Auth Setup
  useEffect(() => {
    // Safety timer: If Firebase takes too long to initialize (common in iframes/laptops 
    // with strict privacy settings), force the loading screen to disappear so you can try logging in.
    const safetyTimer = setTimeout(() => {
      setLoading((currentLoading) => {
        if (currentLoading) {
            console.warn("Auth listener timed out - forcing UI load");
            return false;
        }
        return currentLoading;
      });
    }, 2500);

    const initAuth = async () => {
      // If the environment provides a specific token, we prioritize it
      if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
        try {
          await signInWithCustomToken(auth, __initial_auth_token);
        } catch (e) {
          console.error("Custom token auth failed", e);
        }
      }
      // Note: We don't force anonymous sign-in here because we want explicit 
      // Email/Password login for this specific demo requirements.
    };

    initAuth();

    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      clearTimeout(safetyTimer);
      setUser(currentUser);
      setLoading(false);
    });

    return () => {
      unsubscribe();
      clearTimeout(safetyTimer);
    };
  }, []);

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

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans">
      {!user ? (
        <AuthScreen onAuthError={setAuthError} authError={authError} />
      ) : (
        <Dashboard user={user} />
      )}
    </div>
  );
}

// --- Authentication Screen (Login/Register) ---
function AuthScreen({ onAuthError, authError }) {
  const [isLogin, setIsLogin] = useState(true);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    onAuthError('');

    try {
      if (isLogin) {
        await signInWithEmailAndPassword(auth, email, password);
      } else {
        await createUserWithEmailAndPassword(auth, email, password);
      }
    } catch (error) {
      console.error(error);
      let msg = "An error occurred.";
      if (error.code === 'auth/invalid-email') msg = "Invalid email address.";
      if (error.code === 'auth/user-disabled') msg = "User account disabled.";
      if (error.code === 'auth/user-not-found') msg = "No account found with this email.";
      if (error.code === 'auth/wrong-password') msg = "Incorrect password.";
      if (error.code === 'auth/email-already-in-use') msg = "Email already in use.";
      if (error.code === 'auth/weak-password') msg = "Password should be at least 6 characters.";
      onAuthError(msg);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen p-4">
      <div className="bg-white p-8 rounded-2xl shadow-xl w-full max-w-md border border-slate-100">
        <div className="flex justify-center mb-6">
          <div className="bg-indigo-100 p-3 rounded-full">
            <Layout className="w-8 h-8 text-indigo-600" />
          </div>
        </div>
        
        <h2 className="text-2xl font-bold text-center mb-2 text-slate-800">
          {isLogin ? 'Welcome Back' : 'Create Account'}
        </h2>
        <p className="text-center text-slate-500 mb-8">
          {isLogin ? 'Enter your details to access your tasks' : 'Start organizing your life today'}
        </p>

        {authError && (
          <div className="bg-red-50 text-red-600 p-3 rounded-lg mb-6 text-sm flex items-center">
            <X className="w-4 h-4 mr-2" />
            {authError}
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Email Address</label>
            <input
              type="email"
              required
              className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
              placeholder="you@example.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Password</label>
            <input
              type="password"
              required
              className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
              placeholder="••••••••"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </div>

          <button
            type="submit"
            disabled={isSubmitting}
            className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2.5 rounded-lg transition-colors flex items-center justify-center disabled:opacity-70 disabled:cursor-not-allowed"
          >
            {isSubmitting ? (
              <Loader2 className="w-5 h-5 animate-spin" />
            ) : (
              isLogin ? 'Sign In' : 'Create Account'
            )}
          </button>
        </form>

        <div className="mt-6 text-center">
          <button
            onClick={() => {
              setIsLogin(!isLogin);
              onAuthError('');
            }}
            className="text-sm text-indigo-600 hover:text-indigo-800 font-medium"
          >
            {isLogin ? "Don't have an account? Sign up" : 'Already have an account? Sign in'}
          </button>
        </div>
      </div>
    </div>
  );
}

// --- Dashboard Component (CRUD Operations) ---
function Dashboard({ user }) {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');
  const [editingId, setEditingId] = useState(null);
  const [editTitle, setEditTitle] = useState('');
  const [loadingData, setLoadingData] = useState(true);

  // Firestore: Real-time Listener
  useEffect(() => {
    if (!user) return;

    // RULE 1: Correct Path for User Data
    const tasksCollection = collection(db, 'artifacts', appId, 'users', user.uid, 'tasks');
    
    // RULE 2: Simple Query (Filtering done in client if needed, sorting here is memory-based later)
    const q = query(tasksCollection); 

    const unsubscribe = onSnapshot(q, (snapshot) => {
      const taskList = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      
      // Sort manually since we avoid complex queries
      taskList.sort((a, b) => (b.createdAt?.seconds || 0) - (a.createdAt?.seconds || 0));
      
      setTasks(taskList);
      setLoadingData(false);
    }, (error) => {
      console.error("Error fetching tasks:", error);
      setLoadingData(false);
    });

    return () => unsubscribe();
  }, [user]);

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

    try {
      const tasksCollection = collection(db, 'artifacts', appId, 'users', user.uid, 'tasks');
      await addDoc(tasksCollection, {
        title: newTask,
        completed: false,
        createdAt: serverTimestamp()
      });
      setNewTask('');
    } catch (error) {
      console.error("Error adding task:", error);
    }
  };

  // Update (Toggle Complete)
  const toggleComplete = 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 updating task:", error);
    }
  };

  // Update (Edit Title)
  const startEdit = (task) => {
    setEditingId(task.id);
    setEditTitle(task.title);
  };

  const saveEdit = async () => {
    if (!editTitle.trim()) return;
    try {
      const taskRef = doc(db, 'artifacts', appId, 'users', user.uid, 'tasks', editingId);
      await updateDoc(taskRef, {
        title: editTitle
      });
      setEditingId(null);
    } catch (error) {
      console.error("Error saving edit:", error);
    }
  };

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

  const handleLogout = async () => {
    try {
      await signOut(auth);
    } catch (error) {
      console.error("Error signing out:", error);
    }
  };

  return (
    <div className="max-w-4xl mx-auto p-4 md:p-8">
      {/* Header */}
      <div className="flex flex-col md:flex-row justify-between items-center mb-8 gap-4">
        <div className="flex items-center gap-3">
          <div className="bg-indigo-600 p-2 rounded-lg">
            <ListTodo className="w-6 h-6 text-white" />
          </div>
          <div>
            <h1 className="text-2xl font-bold text-slate-800">TaskFlow</h1>
            <p className="text-sm text-slate-500">Welcome, {user.email}</p>
          </div>
        </div>
        <button 
          onClick={handleLogout}
          className="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 rounded-lg transition-colors text-sm font-medium shadow-sm"
        >
          <LogOut className="w-4 h-4" />
          Sign Out
        </button>
      </div>

      {/* Add Task Form */}
      <form onSubmit={handleAddTask} className="mb-8 relative">
        <input
          type="text"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
          placeholder="What needs to be done?"
          className="w-full pl-6 pr-32 py-4 bg-white border border-slate-200 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all text-lg"
        />
        <button
          type="submit"
          disabled={!newTask.trim()}
          className="absolute right-2 top-2 bottom-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 disabled:hover:bg-indigo-600 text-white px-6 rounded-lg font-medium transition-colors flex items-center gap-2"
        >
          <Plus className="w-5 h-5" />
          Add
        </button>
      </form>

      {/* Task List */}
      <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        {loadingData ? (
          <div className="p-8 text-center text-slate-500 flex flex-col items-center">
            <Loader2 className="w-8 h-8 animate-spin mb-2 text-indigo-500" />
            <p>Loading your tasks...</p>
          </div>
        ) : tasks.length === 0 ? (
          <div className="p-12 text-center text-slate-400 flex flex-col items-center">
            <div className="bg-slate-50 p-4 rounded-full mb-4">
              <CheckCircle2 className="w-12 h-12 text-slate-300" />
            </div>
            <h3 className="text-lg font-medium text-slate-600 mb-1">No tasks yet</h3>
            <p>Add a task above to get started!</p>
          </div>
        ) : (
          <ul className="divide-y divide-slate-100">
            {tasks.map((task) => (
              <li key={task.id} className="group hover:bg-slate-50 transition-colors p-4 flex items-center gap-4">
                {/* Checkbox */}
                <button
                  onClick={() => toggleComplete(task)}
                  className={`flex-shrink-0 transition-colors ${
                    task.completed ? 'text-green-500' : 'text-slate-300 hover:text-indigo-500'
                  }`}
                >
                  {task.completed ? (
                    <CheckCircle2 className="w-6 h-6" />
                  ) : (
                    <Circle className="w-6 h-6" />
                  )}
                </button>

                {/* Content */}
                <div className="flex-1 min-w-0">
                  {editingId === task.id ? (
                    <div className="flex items-center gap-2">
                      <input
                        type="text"
                        value={editTitle}
                        onChange={(e) => setEditTitle(e.target.value)}
                        className="flex-1 px-3 py-1 border border-indigo-300 rounded focus:outline-none focus:ring-1 focus:ring-indigo-500"
                        autoFocus
                      />
                      <button 
                        onClick={saveEdit}
                        className="p-1 text-green-600 hover:bg-green-50 rounded"
                      >
                        <Save className="w-5 h-5" />
                      </button>
                      <button 
                        onClick={() => setEditingId(null)}
                        className="p-1 text-red-500 hover:bg-red-50 rounded"
                      >
                        <X className="w-5 h-5" />
                      </button>
                    </div>
                  ) : (
                    <span 
                      className={`block truncate text-lg transition-all ${
                        task.completed ? 'text-slate-400 line-through' : 'text-slate-700'
                      }`}
                    >
                      {task.title}
                    </span>
                  )}
                </div>

                {/* Actions */}
                {editingId !== task.id && (
                  <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                    <button
                      onClick={() => startEdit(task)}
                      className="p-2 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors"
                      title="Edit"
                    >
                      <Edit2 className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => deleteTask(task.id)}
                      className="p-2 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                      title="Delete"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                )}
              </li>
            ))}
          </ul>
        )}
      </div>
      
      <div className="mt-6 text-center text-xs text-slate-400">
        <p>Data is stored securely in Firebase Firestore.</p>
        <p className="mt-1">Collection Path: users/{user.uid}/tasks</p>
      </div>
    </div>
  );
}