import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, doc, collection, onSnapshot, setDoc, deleteDoc, query, where, Timestamp } from 'firebase/firestore';
import { Film, DollarSign, Clock, Play, User, Loader, Home, List, ShoppingCart, AlertTriangle, X } from 'lucide-react';

// --- Global Firebase Configuration Access ---
const firebaseConfig = typeof __firebase_config !== 'undefined'
  ? JSON.parse(__firebase_config)
  : {};

const initialAuthToken = typeof __initial_auth_token !== 'undefined'
  ? __initial_auth_token
  : null;

const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

// --- Movie Data Definition ---
const MOVIE_LIST = [
  // UPDATED: Added YouTube URL for deep linking
  { 
    id: 'decaf-origins', 
    title: 'The Decafinator Series (Playlist)', 
    genre: 'Sci-Fi/Comedy', 
    price_rent: 0.00, 
    price_buy: 0.00, 
    is_free: true, 
    duration: 'Playlist', 
    youtube_url: 'https://youtube.com/playlist?list=PLUNRIaIndf2bnq2kTo9iA05-Jtsi8aVfV' 
  },
  { id: 'space-odyssey', title: 'A Space Odyssey 2001', genre: 'Sci-Fi', price_rent: 3.99, price_buy: 14.99, is_free: false, duration: '2h 29m' },
  { id: 'starship-troopers', title: 'Starship Troopers', genre: 'Action/Sci-Fi', price_rent: 4.99, price_buy: 19.99, is_free: false, duration: '2h 9m' },
  { id: 'plan-9', title: 'Plan 9 from Outer Space', genre: 'B-Movie', price_rent: 0.00, price_buy: 0.00, is_free: true, duration: '1h 19m' },
  { id: 'grand-budapest', title: 'The Grand Budapest Hotel', genre: 'Comedy/Drama', price_rent: 2.99, price_buy: 12.99, is_free: false, duration: '1h 39m' },
  { id: 'ex-machina', title: 'Ex Machina', genre: 'Sci-Fi/Thriller', price_rent: 4.99, price_buy: 15.99, is_free: false, duration: '1h 48m' },
];

// Utility to calculate rental expiry (48 hours)
const getRentalExpiry = () => {
  const now = new Date();
  now.setHours(now.getHours() + 48);
  return Timestamp.fromDate(now);
};

// --- Firebase Initialization and Auth Hook ---
function useFirebase() {
  const [db, setDb] = useState(null);
  const [auth, setAuth] = useState(null);
  const [userId, setUserId] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    try {
      if (!firebaseConfig.apiKey) {
        console.error("Firebase config is missing API key. Check environment setup.");
        setIsLoading(false);
        return;
      }

      const app = initializeApp(firebaseConfig);
      const firestore = getFirestore(app);
      const firebaseAuth = getAuth(app);
      setDb(firestore);
      setAuth(firebaseAuth);

      const unsubscribe = onAuthStateChanged(firebaseAuth, async (user) => {
        if (user) {
          setUserId(user.uid);
          setIsLoading(false);
        } else {
          // If no user is authenticated, attempt sign in
          try {
            if (initialAuthToken) {
              await signInWithCustomToken(firebaseAuth, initialAuthToken);
            } else {
              await signInAnonymously(firebaseAuth);
            }
            // onAuthStateChanged will be triggered again upon successful sign-in
          } catch (error) {
            console.error("Firebase Auth Error:", error);
            // Fallback for environments where auth fails
            setUserId(crypto.randomUUID());
            setIsLoading(false);
          }
        }
      });

      return () => unsubscribe();
    } catch (e) {
      console.error("Failed to initialize Firebase:", e);
      setIsLoading(false);
    }
  }, []);

  return { db, auth, userId, isLoading };
}

// --- Movie Library Hook ---
function useUserLibrary(db, userId) {
  const [library, setLibrary] = useState({}); // { movieId: { type: 'OWNED/RENTED', expiry: Timestamp } }
  const [libraryLoading, setLibraryLoading] = useState(true);
  const [error, setError] = useState(null);

  const libraryPath = useMemo(() => {
    if (userId) {
      return `artifacts/${appId}/users/${userId}/user_library`;
    }
    return null;
  }, [userId]);

  useEffect(() => {
    if (!db || !libraryPath) {
      setLibraryLoading(false);
      return;
    }

    const q = collection(db, libraryPath);
    const unsubscribe = onSnapshot(q, (snapshot) => {
      const newLibrary = {};
      snapshot.forEach((doc) => {
        newLibrary[doc.id] = doc.data();
      });
      setLibrary(newLibrary);
      setLibraryLoading(false);
    }, (err) => {
      console.error("Firestore Snapshot Error:", err);
      setError("Failed to load library: " + err.message);
      setLibraryLoading(false);
    });

    return () => unsubscribe();
  }, [db, libraryPath]);

  // Function to add or update an item in the library
  const updateLibrary = useCallback(async (movieId, title, type) => {
    if (!db || !libraryPath) {
      setError("Database not initialized.");
      return;
    }

    try {
      const docRef = doc(db, libraryPath, movieId);
      const data = {
        title: title,
        type: type, // 'OWNED' or 'RENTED'
        rental_expiry: type === 'RENTED' ? getRentalExpiry() : null,
        purchased_at: Timestamp.now(),
      };
      await setDoc(docRef, data);
      return true;
    } catch (e) {
      console.error("Error updating library:", e);
      setError(`Failed to ${type === 'OWNED' ? 'buy' : 'rent'} ${title}. Please try again.`);
      return false;
    }
  }, [db, libraryPath]);

  // Function to remove a movie from the library (e.g., rental expired) - not used in UI but good practice
  const removeFromLibrary = useCallback(async (movieId) => {
    if (!db || !libraryPath) return;
    try {
      await deleteDoc(doc(db, libraryPath, movieId));
      return true;
    } catch (e) {
      console.error("Error removing from library:", e);
      setError(`Failed to remove movie ID ${movieId}.`);
      return false;
    }
  }, [db, libraryPath]);


  // Logic to determine a movie's current status for the UI
  const getMovieStatus = useCallback((movie) => {
    const libraryItem = library[movie.id];
    if (libraryItem) {
      if (libraryItem.type === 'OWNED') {
        return { status: 'OWNED', label: 'Owned' };
      }
      if (libraryItem.type === 'RENTED') {
        if (libraryItem.rental_expiry && libraryItem.rental_expiry.toDate() > new Date()) {
          const hoursLeft = Math.ceil((libraryItem.rental_expiry.toDate() - new Date()) / (1000 * 60 * 60));
          return { status: 'RENTED', label: `Rented (${hoursLeft}h left)` };
        } else {
          // Rental expired - theoretically should be removed, but we'll treat it as needing re-rent
          return { status: 'EXPIRED', label: 'Rental Expired' };
        }
      }
    }
    if (movie.is_free) {
      return { status: 'FREE', label: 'Watch Free' };
    }
    return { status: 'AVAILABLE', label: 'Available' };
  }, [library]);

  return { library, libraryLoading, error, setError, updateLibrary, getMovieStatus };
}

// --- Components ---

// New handler function to open YouTube link or show generic watch modal
const useWatchHandler = (setModal) => useCallback((movie) => {
  if (movie.youtube_url) {
    window.open(movie.youtube_url, '_blank');
  } else {
    setModal({ 
      type: 'WATCH', 
      title: `Watching ${movie.title}`, 
      message: `Enjoy watching ${movie.title}! Since this is a simulation, you can now consider it watched.` 
    });
  }
}, [setModal]);

const MovieCard = ({ movie, updateLibrary, getMovieStatus, setModal, handleWatch }) => {
  const { title, genre, price_rent, price_buy, duration } = movie;
  const { status, label } = getMovieStatus(movie);

  const handleAction = (type) => {
    // Paid movie actions: RENT / BUY
    if (type === 'RENT' || type === 'BUY') {
      const action = type === 'RENT' ? 'rent' : 'buy';
      setModal({
        type: 'CONFIRM',
        title: `Confirm ${type} Movie`,
        message: `Do you want to ${action} "${title}" for $${type === 'RENT' ? price_rent.toFixed(2) : price_buy.toFixed(2)}? (This is a simulation, no real money will be charged.)`,
        onConfirm: async () => {
          const success = await updateLibrary(movie.id, title, type === 'RENT' ? 'RENTED' : 'OWNED');
          if (success) {
            setModal({ type: 'SUCCESS', title: `${type} Successful!`, message: `You have successfully ${action === 'rent' ? 'rented' : 'bought'} ${title}. Enjoy!` });
          }
        }
      });
      return;
    }

    // Free/Watched movie action: FREE
    if (type === 'FREE') {
      handleWatch(movie);
      return;
    }
  };

  const getButtonClass = (base) => `w-full px-3 py-2 text-sm font-semibold transition duration-200 rounded-lg shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 ${base}`;

  return (
    <div className="flex flex-col bg-white rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition duration-300">
      <div className="p-4 bg-gray-50 border-b border-gray-100">
        <h3 className="text-xl font-bold text-gray-800 flex items-center">
          <Film className="w-5 h-5 mr-2 text-indigo-600" />
          {title}
        </h3>
        <p className="text-sm text-gray-500 mt-1">{genre} | {duration}</p>
      </div>

      <div className="p-4 flex-grow">
        <div className="mb-4 flex items-center justify-center space-x-2 p-2 bg-indigo-50/50 rounded-lg border border-indigo-200">
          <Clock className="w-4 h-4 text-indigo-700" />
          <span className="text-indigo-800 text-sm font-medium">{label}</span>
        </div>

        {/* Action Button for Free, Owned, and Rented Movies */}
        {(status === 'FREE' || status === 'OWNED' || status === 'RENTED') && (
          <button
            onClick={() => handleAction('FREE')}
            className={getButtonClass('bg-green-600 text-white hover:bg-green-700 focus:ring-green-500')}
          >
            <Play className="w-4 h-4 inline-block mr-1" /> 
            {status === 'FREE' ? 'Watch Now' : 'Watch in Library'}
          </button>
        )}

        {/* Rent/Buy options for Available or Expired Movies */}
        {(status === 'AVAILABLE' || status === 'EXPIRED') && (
          <div className="space-y-3 pt-2">
            <button
              onClick={() => handleAction('RENT')}
              className={getButtonClass('bg-yellow-500 text-gray-900 hover:bg-yellow-600 focus:ring-yellow-500')}
            >
              <Clock className="w-4 h-4 inline-block mr-1" /> Rent for ${price_rent.toFixed(2)} (48h)
            </button>
            <button
              onClick={() => handleAction('BUY')}
              className={getButtonClass('bg-indigo-500 text-white hover:bg-indigo-600 focus:ring-indigo-500')}
            >
              <DollarSign className="w-4 h-4 inline-block mr-1" /> Buy for ${price_buy.toFixed(2)}
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

const Modal = ({ modal, setModal }) => {
  if (!modal) return null;

  const { type, title, message, onConfirm } = modal;

  const handleClose = () => {
    setModal(null);
  };

  const handleConfirm = () => {
    if (onConfirm) {
      onConfirm();
    }
    handleClose();
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
      <div className="bg-white rounded-xl shadow-2xl max-w-sm w-full transform transition-all overflow-hidden">
        <div className={`p-4 flex items-center justify-between ${type === 'CONFIRM' ? 'bg-indigo-600' : type === 'SUCCESS' ? 'bg-green-500' : 'bg-yellow-500'}`}>
          <h4 className="text-lg font-bold text-white">{title}</h4>
          <button onClick={handleClose} className="text-white hover:text-gray-200">
            <X className="w-5 h-5" />
          </button>
        </div>
        <div className="p-6">
          <p className="text-gray-700 mb-6">{message}</p>
          <div className="flex justify-end space-x-3">
            <button
              onClick={handleClose}
              className="px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 font-medium transition"
            >
              {type === 'CONFIRM' ? 'Cancel' : 'Close'}
            </button>
            {type === 'CONFIRM' && (
              <button
                onClick={handleConfirm}
                className="px-4 py-2 text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 font-semibold transition"
              >
                Proceed
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

const LibraryView = ({ library, getMovieStatus, handleWatch }) => {
  const libraryMovies = useMemo(() => {
    return Object.entries(library).map(([id, item]) => {
      const movieData = MOVIE_LIST.find(m => m.id === id);
      if (!movieData) return null;

      const status = getMovieStatus(movieData);
      const isExpired = status.status === 'EXPIRED';

      return {
        ...movieData,
        ...item,
        statusLabel: status.label,
        isExpired,
        expiryDate: item.rental_expiry ? item.rental_expiry.toDate().toLocaleString() : null,
      };
    }).filter(m => m !== null && !m.isExpired); // Filter out expired rentals for a clean view
  }, [library, getMovieStatus]);

  if (libraryMovies.length === 0) {
    return (
      <div className="p-8 text-center bg-white rounded-xl shadow-lg mt-8">
        <ShoppingCart className="w-12 h-12 text-gray-400 mx-auto mb-4" />
        <p className="text-lg font-medium text-gray-600">Your library is empty. Start renting or buying a movie!</p>
      </div>
    );
  }

  return (
    <div className="mt-8 space-y-4">
      <h2 className="text-2xl font-bold text-gray-800 border-b pb-2 mb-4">Your Collection</h2>
      <div className="grid grid-cols-1 gap-4">
        {libraryMovies.map(movie => (
          <div key={movie.id} className="flex items-center p-4 bg-white rounded-lg shadow-md border border-indigo-100">
            <div className={`p-3 rounded-full ${movie.type === 'OWNED' ? 'bg-indigo-100 text-indigo-600' : 'bg-yellow-100 text-yellow-600'}`}>
              {movie.type === 'OWNED' ? <DollarSign className="w-5 h-5" /> : <Clock className="w-5 h-5" />}
            </div>
            <div className="ml-4 flex-grow">
              <p className="text-lg font-semibold text-gray-800">{movie.title}</p>
              <p className="text-sm text-gray-500">
                {movie.type === 'OWNED' ? 'Permanent Ownership' : `Rented | Expires: ${movie.expiryDate}`}
              </p>
            </div>
            {/* UPDATED: Use the dedicated watch handler */}
            <button 
              onClick={() => handleWatch(movie)}
              className="flex items-center px-4 py-2 bg-green-500 text-white text-sm font-medium rounded-lg shadow-sm hover:bg-green-600 transition"
            >
              <Play className="w-4 h-4 mr-1" /> Watch
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

// --- Main Application Component ---
const App = () => {
  const { db, userId, isLoading } = useFirebase();
  const { library, libraryLoading, error, setError, updateLibrary, getMovieStatus } = useUserLibrary(db, userId);
  
  const [view, setView] = useState('HOME'); // 'HOME' or 'LIBRARY'
  const [modal, setModal] = useState(null);

  // NEW: Memoized watch handler that includes the deep-linking logic
  const handleWatch = useWatchHandler(setModal); 

  useEffect(() => {
    if (error) {
      setModal({
        type: 'ERROR',
        title: 'Database Error',
        message: error,
      });
      setError(null); // Clear error after showing modal
    }
  }, [error, setError]);

  if (isLoading || libraryLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-50">
        <Loader className="w-8 h-8 animate-spin text-indigo-600" />
        <span className="ml-3 text-lg font-medium text-gray-600">Loading App...</span>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-100 font-[Inter] flex flex-col items-center">
      {modal && <Modal modal={modal} setModal={setModal} />}

      {/* Header */}
      <header className="w-full bg-white shadow-md sticky top-0 z-10">
        <div className="max-w-4xl mx-auto flex items-center justify-between p-4">
          <div className="flex items-center">
            <Film className="w-7 h-7 text-indigo-600 mr-2" />
            <h1 className="text-2xl font-extrabold text-gray-900">Movie Stream Sim</h1>
          </div>
          <div className="flex items-center space-x-4">
            <button
              onClick={() => setView('HOME')}
              className={`flex items-center px-3 py-2 rounded-lg text-sm font-medium transition ${view === 'HOME' ? 'bg-indigo-100 text-indigo-700' : 'text-gray-600 hover:bg-gray-100'}`}
            >
              <Home className="w-4 h-4 mr-1" /> Browse
            </button>
            <button
              onClick={() => setView('LIBRARY')}
              className={`flex items-center px-3 py-2 rounded-lg text-sm font-medium transition ${view === 'LIBRARY' ? 'bg-indigo-100 text-indigo-700' : 'text-gray-600 hover:bg-gray-100'}`}
            >
              <List className="w-4 h-4 mr-1" /> My Library
            </button>
          </div>
        </div>
      </header>

      {/* User Status */}
      <div className="w-full max-w-4xl p-4 flex justify-between items-center text-sm text-gray-600 bg-white/70 border-b border-indigo-200 backdrop-blur-sm z-0">
        <span className="flex items-center">
          <User className="w-4 h-4 mr-2" />
          User ID: <code className="ml-1 font-mono text-xs p-1 bg-gray-200 rounded">{userId}</code>
        </span>
        <span className="flex items-center text-green-600">
          <DollarSign className="w-4 h-4 mr-1" />
          Balance: $100.00 (Simulated)
        </span>
      </div>

      {/* Main Content */}
      <main className="w-full max-w-4xl p-4 pb-12">
        {view === 'HOME' && (
          <>
            <h2 className="text-3xl font-extrabold text-gray-900 mb-6">Featured Movies</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {MOVIE_LIST.map(movie => (
                <MovieCard
                  key={movie.id}
                  movie={movie}
                  updateLibrary={updateLibrary}
                  getMovieStatus={getMovieStatus}
                  setModal={setModal}
                  handleWatch={handleWatch} // Pass handler to MovieCard
                />
              ))}
            </div>
          </>
        )}

        {view === 'LIBRARY' && (
          <>
            <h2 className="text-3xl font-extrabold text-gray-900 mb-2">My Library</h2>
            <p className="text-gray-600 mb-6">Your collection of owned and currently rented movies.</p>
            <LibraryView 
              library={library} 
              getMovieStatus={getMovieStatus} 
              handleWatch={handleWatch} // Pass handler to LibraryView
            />
          </>
        )}
      </main>
    </div>
  );
};

export default App;