import React, { useState, useEffect, createContext, useContext } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithCustomToken, signInAnonymously, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, query, onSnapshot, addDoc, updateDoc, deleteDoc, doc } from 'firebase/firestore';
import { X } from 'lucide-react';

// --- Shadcn/ui Component Reimplementations ---
// Since shadcn/ui imports don't work directly, we'll create our own simple
// versions of the necessary components using Tailwind CSS.

// Button component
const Button = React.forwardRef(({ className, variant, size, ...props }, ref) => {
  const baseClass = 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none';
  const variantClass = variant === 'ghost' ? 'hover:bg-gray-100 hover:text-gray-900' : 'bg-blue-600 text-white hover:bg-blue-700';
  const sizeClass = size === 'icon' ? 'h-10 w-10 p-0' : 'h-10 py-2 px-4';
  const finalClassName = `${baseClass} ${variantClass} ${sizeClass} ${className || ''}`.trim();

  return (
    <button
      className={finalClassName}
      ref={ref}
      {...props}
    />
  );
});
Button.displayName = 'Button';

// Input component
const Input = React.forwardRef(({ className, type, ...props }, ref) => (
  <input
    type={type}
    className={`flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:border-transparent disabled:cursor-not-allowed disabled:opacity-50 transition-all ${className}`}
    ref={ref}
    {...props}
  />
));
Input.displayName = 'Input';

// Card components
const Card = React.forwardRef(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={`rounded-xl border bg-white text-gray-900 shadow-lg w-full max-w-xl overflow-hidden ${className}`}
    {...props}
  />
));
Card.displayName = 'Card';

const CardContent = React.forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={`p-6 ${className}`} {...props} />
));
CardContent.displayName = 'CardContent';

// Checkbox component
const Checkbox = React.forwardRef(({ className, checked, onCheckedChange, ...props }, ref) => (
  <button
    ref={ref}
    type="button"
    role="checkbox"
    aria-checked={checked}
    onClick={() => onCheckedChange && onCheckedChange(!checked)}
    className={`peer h-5 w-5 shrink-0 rounded-sm border-2 border-gray-300 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${checked ? 'bg-blue-600 text-white border-blue-600' : 'bg-white'} ${className}`}
    {...props}
  >
    {checked && (
      <svg
        className="h-4 w-4 text-white"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <polyline points="20 6 9 17 4 12" />
      </svg>
    )}
  </button>
));
Checkbox.displayName = 'Checkbox';

// Toast Context for notifications
const ToastContext = createContext(null);
const useToast = () => {
  const context = useContext(ToastContext);
  if (!context) {
    throw new Error('useToast must be used within a ToastProvider');
  }
  return context;
};

// Simple Toaster and Toast component
const Toaster = ({ position = 'top-center' }) => {
  const { toasts, removeToast } = useContext(ToastContext);

  const getPositionClasses = (pos) => {
    switch (pos) {
      case 'top-center':
      default:
        return 'top-4 left-1/2 -translate-x-1/2';
    }
  };

  return (
    <div
      className={`fixed z-[9999] max-h-screen w-full max-w-xs space-y-2 ${getPositionClasses(position)}`}
    >
      {toasts.map((toast) => (
        <div
          key={toast.id}
          className="relative w-full overflow-hidden rounded-md border bg-white p-4 shadow-lg transition-all duration-300 animate-in fade-in-0 slide-in-from-top-1/2"
        >
          <div className="flex items-center space-x-4">
            <div className="flex-1">
              <h4 className="text-sm font-semibold">{toast.title}</h4>
              {toast.description && <p className="text-sm text-gray-500">{toast.description}</p>}
            </div>
            <button onClick={() => removeToast(toast.id)} className="text-gray-400 hover:text-gray-600">
              <X size={16} />
            </button>
          </div>
        </div>
      ))}
    </div>
  );
};

const ToastProvider = ({ children }) => {
  const [toasts, setToasts] = useState([]);

  const toast = ({ title, description }) => {
    const id = Date.now();
    setToasts((prevToasts) => [...prevToasts, { id, title, description }]);
    setTimeout(() => removeToast(id), 5000);
  };

  const removeToast = (id) => {
    setToasts((prevToasts) => prevToasts.filter((t) => t.id !== id));
  };

  return (
    <ToastContext.Provider value={{ toast, toasts, removeToast }}>
      {children}
    </ToastContext.Provider>
  );
};

// The main application component that contains all the UI and logic.
// We've renamed it to ToDoListApp to allow the App component to be a wrapper.
function ToDoListApp() {
  const [todos, setTodos] = useState([]);
  const [newTodoText, setNewTodoText] = useState('');
  const [isLoading, setIsLoading] = useState(true);
  const [db, setDb] = useState(null);
  const [userId, setUserId] = useState(null);
  const { toast } = useToast();

  // Initialize Firebase and set up the real-time listener for the todos.
  useEffect(() => {
    // These global variables are provided by the Canvas environment.
    const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
    const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;

    // Initialize Firebase app
    const app = initializeApp(firebaseConfig);
    const firestore = getFirestore(app);
    const firebaseAuth = getAuth(app);
    setDb(firestore);

    // Sign in the user using the custom token or anonymously if the token is not available.
    const signIn = async () => {
      try {
        if (initialAuthToken) {
          await signInWithCustomToken(firebaseAuth, initialAuthToken);
        } else {
          await signInAnonymously(firebaseAuth);
        }
      } catch (error) {
        console.error("Firebase authentication error:", error);
      }
    };

    signIn();

    // Set up a listener for authentication state changes.
    // This ensures we have a valid user ID before attempting to fetch data.
    const unsubscribeAuth = onAuthStateChanged(firebaseAuth, (user) => {
      if (user) {
        setUserId(user.uid);
      } else {
        setUserId(null);
      }
    });

    // Clean up the auth listener when the component unmounts.
    return () => unsubscribeAuth();
  }, []);

  // Set up the Firestore listener to get real-time updates.
  useEffect(() => {
    if (!db || !userId) {
      // Don't proceed until Firebase is initialized and the user is authenticated.
      return;
    }

    setIsLoading(true);

    // This is the path for the public data collection shared among users.
    const collectionPath = `artifacts/${typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'}/public/data/todos`;
    const q = query(collection(db, collectionPath));

    // The onSnapshot listener provides real-time updates.
    // It's the most efficient way to handle collaborative data.
    const unsubscribeSnapshot = onSnapshot(q, (querySnapshot) => {
      try {
        const todosArray = [];
        querySnapshot.forEach((doc) => {
          todosArray.push({ id: doc.id, ...doc.data() });
        });
        // Sort the todos by their timestamp to maintain a consistent order.
        todosArray.sort((a, b) => (a.timestamp?.seconds || 0) - (b.timestamp?.seconds || 0));
        setTodos(todosArray);
      } catch (error) {
        console.error("Error fetching todos:", error);
      } finally {
        setIsLoading(false);
      }
    }, (error) => {
      console.error("Firestore onSnapshot error:", error);
      setIsLoading(false);
    });

    // Clean up the Firestore listener when the component unmounts.
    return () => unsubscribeSnapshot();
  }, [db, userId]); // Re-run this effect if the database or user ID changes.

  // Function to add a new to-do item to Firestore.
  const addTodo = async () => {
    if (newTodoText.trim() === '' || !db) {
      toast({
        title: "Input is empty!",
        description: "Please enter a to-do item.",
      });
      return;
    }

    try {
      // Add a new document to the todos collection.
      await addDoc(collection(db, `artifacts/${typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'}/public/data/todos`), {
        text: newTodoText,
        completed: false,
        timestamp: new Date(),
      });
      setNewTodoText('');
    } catch (error) {
      console.error("Error adding document:", error);
    }
  };

  // Function to toggle the 'completed' status of a to-do item.
  const toggleTodoCompletion = async (id, completed) => {
    if (!db) return;

    try {
      const todoDocRef = doc(db, `artifacts/${typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'}/public/data/todos`, id);
      // Update the document with the new 'completed' status.
      await updateDoc(todoDocRef, {
        completed: !completed,
      });
    } catch (error) {
      console.error("Error updating document:", error);
    }
  };

  // Function to delete a to-do item from Firestore.
  const deleteTodo = async (id) => {
    if (!db) return;

    try {
      const todoDocRef = doc(db, `artifacts/${typeof __app_id !== 'undefined' ? __app_id : 'default-app-id'}/public/data/todos`, id);
      // Delete the document.
      await deleteDoc(todoDocRef);
    } catch (error) {
      console.error("Error deleting document:", error);
    }
  };

  return (
      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4 font-sans antialiased">
        <style>
          {`
            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
            body { font-family: 'Inter', sans-serif; }
            .scroll-container::-webkit-scrollbar {
              width: 8px;
            }
            .scroll-container::-webkit-scrollbar-track {
              background: #f1f1f1;
              border-radius: 10px;
            }
            .scroll-container::-webkit-scrollbar-thumb {
              background: #888;
              border-radius: 10px;
            }
            .scroll-container::-webkit-scrollbar-thumb:hover {
              background: #555;
            }
            .animate-spin {
              animation: spin 1s linear infinite;
            }
            @keyframes spin {
              from { transform: rotate(0deg); }
              to { transform: rotate(360deg); }
            }
          `}
        </style>
        <Card className="w-full max-w-xl shadow-lg rounded-xl overflow-hidden">
          <CardContent className="p-6">
            <h1 className="text-3xl font-bold text-center mb-6 text-gray-800">Family To-Do List</h1>
            <div className="flex items-center space-x-2 mb-6">
              <Input
                type="text"
                placeholder="Add a new to-do..."
                value={newTodoText}
                onChange={(e) => setNewTodoText(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && addTodo()}
                className="flex-1 rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
              />
              <Button onClick={addTodo} className="rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors">
                Add
              </Button>
            </div>

            <div className="flex justify-between items-center mb-4 text-gray-500 text-sm">
              <span>
                {todos.filter(todo => !todo.completed).length} items remaining
              </span>
              <span className="text-xs text-gray-400">
                User ID: <span className="font-mono text-gray-600 break-all">{userId || 'Loading...'}</span>
              </span>
            </div>

            {isLoading ? (
              <div className="flex justify-center items-center h-48">
                <div className="w-8 h-8 border-4 border-dashed rounded-full animate-spin border-blue-500"></div>
              </div>
            ) : (
              <div className="space-y-4 max-h-96 overflow-y-auto scroll-container">
                {todos.map((todo) => (
                  <div
                    key={todo.id}
                    className="flex items-center justify-between p-4 bg-white rounded-lg shadow-sm border border-gray-200 transition-transform transform hover:scale-[1.01]"
                  >
                    <div className="flex items-center space-x-4">
                      <Checkbox
                        checked={todo.completed}
                        onCheckedChange={() => toggleTodoCompletion(todo.id, todo.completed)}
                        id={`todo-${todo.id}`}
                        className="peer h-5 w-5 rounded-sm border-2 border-gray-300 data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600 transition-colors"
                      />
                      <label
                        htmlFor={`todo-${todo.id}`}
                        className={`text-lg transition-colors cursor-pointer ${todo.completed ? 'line-through text-gray-400' : 'text-gray-800'}`}
                      >
                        {todo.text}
                      </label>
                    </div>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => deleteTodo(todo.id)}
                      className="h-8 w-8 text-gray-400 hover:text-red-500 hover:bg-red-50 transition-colors"
                    >
                      <X className="h-5 w-5" />
                    </Button>
                  </div>
                ))}
                {todos.length === 0 && (
                  <div className="text-center text-gray-500 py-10">
                    You have no tasks! Start by adding one above.
                  </div>
                )}
              </div>
            )}
          </CardContent>
        </Card>
        <Toaster />
      </div>
  );
}

// The root component that wraps the main application in a context provider.
export default function App() {
  return (
    <ToastProvider>
      <ToDoListApp />
    </ToastProvider>
  );
}