ttrpg-initiative-tracker/src/App.js

import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';
import { getFirestore, doc, setDoc, addDoc, getDoc, getDocs, collection, onSnapshot, updateDoc, deleteDoc, query, writeBatch } from 'firebase/firestore';
import { PlusCircle, Users, Swords, Shield, Trash2, Eye, Edit3, Save, XCircle, ChevronsUpDown, UserCheck, UserX, HeartCrack, HeartPulse, Zap, Image as ImageIcon, EyeOff, ExternalLink } from 'lucide-react';

// --- Firebase Configuration ---
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
};

let app;
let db;
let auth;

const requiredFirebaseConfigKeys = ['apiKey', 'authDomain', 'projectId', 'appId'];
const missingKeys = requiredFirebaseConfigKeys.filter(key => !firebaseConfig[key]);

if (missingKeys.length > 0) {
  console.error(`CRITICAL: Missing Firebase config values from environment variables: ${missingKeys.join(', ')}`);
  console.error("Firebase cannot be initialized. Please ensure all REACT_APP_FIREBASE_... variables are set in your .env.local file and accessible during the build.");
} else {
  try {
    app = initializeApp(firebaseConfig);
    db = getFirestore(app);
    auth = getAuth(app);
  } catch (error) {
    console.error("Error initializing Firebase:", error);
  }
}

// --- Firestore Paths ---
const APP_ID = process.env.REACT_APP_TRACKER_APP_ID || 'ttrpg-initiative-tracker-default';
const PUBLIC_DATA_PATH = `artifacts/${APP_ID}/public/data`;

// --- Firestore Path Helpers ---
const getCampaignsCollectionPath = () => `${PUBLIC_DATA_PATH}/campaigns`;
const getCampaignDocPath = (campaignId) => `${PUBLIC_DATA_PATH}/campaigns/${campaignId}`;
const getEncountersCollectionPath = (campaignId) => `${PUBLIC_DATA_PATH}/campaigns/${campaignId}/encounters`;
const getEncounterDocPath = (campaignId, encounterId) => `${PUBLIC_DATA_PATH}/campaigns/${campaignId}/encounters/${encounterId}`;
const getActiveDisplayDocPath = () => `${PUBLIC_DATA_PATH}/activeDisplay/status`;


// --- Helper Functions ---
const generateId = () => crypto.randomUUID();

// --- Custom Hooks for Firestore ---
function useFirestoreDocument(docPath) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!db || !docPath) {
      setData(null);
      setIsLoading(false);
      setError(docPath ? "Firestore not available." : "Document path not provided.");
      return;
    }

    setIsLoading(true);
    setError(null);

    const docRef = doc(db, docPath);
    const unsubscribe = onSnapshot(docRef, (docSnap) => {
      if (docSnap.exists()) {
        setData({ id: docSnap.id, ...docSnap.data() });
      } else {
        setData(null); 
      }
      setIsLoading(false);
    }, (err) => {
      console.error(`Error fetching document ${docPath}:`, err);
      setError(err.message || "Failed to fetch document.");
      setIsLoading(false);
      setData(null);
    });

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

  return { data, isLoading, error };
}

function useFirestoreCollection(collectionPath, queryConstraints = []) {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!db || !collectionPath) {
      setData([]);
      setIsLoading(false);
      setError(collectionPath ? "Firestore not available." : "Collection path not provided.");
      return;
    }

    setIsLoading(true);
    setError(null);
    
    const constraints = Array.isArray(queryConstraints) ? queryConstraints : [];
    const q = query(collection(db, collectionPath), ...constraints);
    
    const unsubscribe = onSnapshot(q, (snapshot) => {
      const items = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setData(items);
      setIsLoading(false);
    }, (err) => {
      console.error(`Error fetching collection ${collectionPath}:`, err);
      setError(err.message || "Failed to fetch collection.");
      setIsLoading(false);
      setData([]);
    });

    return () => unsubscribe();
  }, [collectionPath, JSON.stringify(queryConstraints)]); 

  return { data, isLoading, error };
}


// --- Main App Component ---
function App() {
  const [userId, setUserId] = useState(null);
  const [isAuthReady, setIsAuthReady] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  const [isPlayerViewOnlyMode, setIsPlayerViewOnlyMode] = useState(false);

  useEffect(() => {
    const queryParams = new URLSearchParams(window.location.search);
    if (queryParams.get('playerView') === 'true') {
      setIsPlayerViewOnlyMode(true);
    }

    if (!auth) { 
        setError("Firebase Auth not initialized. Check your Firebase configuration.");
        setIsLoading(false);
        setIsAuthReady(false); 
        return;
    }
    
    const initAuth = async () => {
      try {
        const token = window.__initial_auth_token; 
        if (token) {
          await signInWithCustomToken(auth, token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) {
        console.error("Authentication error:", err);
        setError("Failed to authenticate. Please try again later.");
      }
    };

    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setUserId(user ? user.uid : null);
      setIsAuthReady(true);
      setIsLoading(false);
    });
    initAuth();
    return () => {
        unsubscribe();
    };
  }, []);

  if (!db || !auth) { 
    return (
        <div className="min-h-screen bg-red-900 text-white flex flex-col items-center justify-center p-4">
            <h1 className="text-3xl font-bold">Configuration Error</h1>
            <p className="mt-4 text-xl">Firebase is not properly configured or initialized.</p>
            <p>Please check your `.env.local` file and ensure all `REACT_APP_FIREBASE_...` variables are correctly set.</p>
            <p>Also, check the browser console for more specific error messages.</p>
            {error && <p className="mt-2 text-yellow-300">{error}</p>}
        </div>
    );
  }


  if (isLoading || !isAuthReady) {
    return (
      <div className="min-h-screen bg-slate-900 text-white flex flex-col items-center justify-center p-4">
        <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-blue-500 border-solid"></div>
        <p className="mt-4 text-xl">Loading Initiative Tracker...</p>
        {error && <p className="mt-2 text-red-400">{error}</p>}
      </div>
    );
  }

  const openPlayerWindow = () => {
    const playerViewUrl = window.location.origin + window.location.pathname + '?playerView=true';
    window.open(playerViewUrl, '_blank', 'noopener,noreferrer,width=1024,height=768'); 
  };


  if (isPlayerViewOnlyMode) {
    return (
      <div className="min-h-screen bg-slate-800 text-slate-100 font-sans">
        {isAuthReady && <DisplayView />}
        {!isAuthReady && !error && <p>Authenticating for Player Display...</p>}
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-800 text-slate-100 font-sans">
        <header className="bg-slate-900 p-4 shadow-lg">
          <div className="container mx-auto flex justify-between items-center">
            <h1 
              className="text-3xl font-bold text-sky-400"
            >
              TTRPG Initiative Tracker
            </h1>
            <div className="flex items-center space-x-4">
              {userId && <span className="text-xs text-slate-400">UID: {userId}</span>}
              <button
                onClick={openPlayerWindow}
                className={`px-4 py-2 rounded-md text-sm font-medium transition-colors bg-teal-500 hover:bg-teal-600 text-white flex items-center`}
              >
                <ExternalLink size={16} className="mr-2"/> Open Player Window
              </button>
            </div>
          </div>
        </header>

      <main className={`container mx-auto p-4 md:p-8`}>
        {isAuthReady && userId && <AdminView userId={userId} />}
        {!isAuthReady && !error && <p>Authenticating...</p>} 
      </main>
       <footer className="bg-slate-900 p-4 text-center text-sm text-slate-400 mt-8">
        TTRPG Initiative Tracker v0.1.21
      </footer>
    </div>
  );
}

// --- Admin View Component ---
function AdminView({ userId }) {
  const { data: campaignsData, isLoading: isLoadingCampaigns } = useFirestoreCollection(getCampaignsCollectionPath());
  const { data: initialActiveInfoData } = useFirestoreDocument(getActiveDisplayDocPath());
  
  const [campaigns, setCampaigns] = useState([]);
  const [selectedCampaignId, setSelectedCampaignId] = useState(null);
  const [showCreateCampaignModal, setShowCreateCampaignModal] = useState(false);

  useEffect(() => {
    if (campaignsData) {
      setCampaigns(campaignsData.map(c => ({ ...c, characters: c.players || [] })));
    }
  }, [campaignsData]);

  useEffect(() => {
    if (initialActiveInfoData && initialActiveInfoData.activeCampaignId && campaigns.length > 0 && !selectedCampaignId) {
        const campaignExists = campaigns.some(c => c.id === initialActiveInfoData.activeCampaignId);
        if (campaignExists) {
            setSelectedCampaignId(initialActiveInfoData.activeCampaignId);
        }
    }
  }, [initialActiveInfoData, campaigns, selectedCampaignId]);


  const handleCreateCampaign = async (name, backgroundUrl) => { 
    if (!db || !name.trim()) return;
    const newCampaignId = generateId();
    try {
      await setDoc(doc(db, getCampaignDocPath(newCampaignId)), {
        name: name.trim(), 
        playerDisplayBackgroundUrl: backgroundUrl.trim() || '', 
        ownerId: userId, 
        createdAt: new Date().toISOString(), 
        players: [], 
      });
      setShowCreateCampaignModal(false);
      setSelectedCampaignId(newCampaignId); 
    } catch (err) { console.error("Error creating campaign:", err); }
  };

  const handleDeleteCampaign = async (campaignId) => {
    if (!db) return;
    // TODO: Implement custom confirmation modal for deleting campaigns
    console.warn("Attempting to delete campaign without confirmation:", campaignId);
    try {
      const encountersPath = getEncountersCollectionPath(campaignId);
      const encountersSnapshot = await getDocs(collection(db, encountersPath));
      const batch = writeBatch(db);
      encountersSnapshot.docs.forEach(encounterDoc => batch.delete(encounterDoc.ref));
      await batch.commit();
      await deleteDoc(doc(db, getCampaignDocPath(campaignId)));
      if (selectedCampaignId === campaignId) setSelectedCampaignId(null);
      
      const activeDisplayRef = doc(db, getActiveDisplayDocPath());
      const activeDisplaySnap = await getDoc(activeDisplayRef);
      if (activeDisplaySnap.exists() && activeDisplaySnap.data().activeCampaignId === campaignId) {
        await updateDoc(activeDisplayRef, { activeCampaignId: null, activeEncounterId: null });
      }
    } catch (err) { console.error("Error deleting campaign:", err); }
  };

  const selectedCampaign = campaigns.find(c => c.id === selectedCampaignId);

  if (isLoadingCampaigns) {
    return <p className="text-center text-slate-300">Loading campaigns...</p>;
  }

  return (
    <div className="space-y-6">
      <div>
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-2xl font-semibold text-sky-300">Campaigns</h2>
          <button onClick={() => setShowCreateCampaignModal(true)} className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg flex items-center transition-colors">
            <PlusCircle size={20} className="mr-2" /> Create Campaign
          </button>
        </div>
        {campaigns.length === 0 && <p className="text-slate-400">No campaigns yet.</p>}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {campaigns.map(campaign => (
            <div 
              key={campaign.id} 
              onClick={() => setSelectedCampaignId(campaign.id)}
              className={`p-4 rounded-lg shadow-md cursor-pointer transition-all ${selectedCampaignId === campaign.id ? 'bg-sky-700 ring-2 ring-sky-400' : 'bg-slate-700 hover:bg-slate-600'}`}
            >
              <h3 className="text-xl font-semibold text-white">{campaign.name}</h3>
              <p className="text-xs text-slate-400">ID: {campaign.id}</p>
              {campaign.playerDisplayBackgroundUrl && <ImageIcon size={14} className="inline-block mr-1 text-slate-400" title="Has custom background"/>}
              <button 
                onClick={(e) => { 
                  e.stopPropagation(); 
                  handleDeleteCampaign(campaign.id); 
                }} 
                className="mt-2 text-red-400 hover:text-red-300 text-xs flex items-center"
              >
                <Trash2 size={14} className="mr-1" /> Delete
              </button>
            </div>
          ))}
        </div>
      </div>
      {showCreateCampaignModal && <Modal onClose={() => setShowCreateCampaignModal(false)} title="Create New Campaign"><CreateCampaignForm onCreate={handleCreateCampaign} onCancel={() => setShowCreateCampaignModal(false)} /></Modal>}
      {selectedCampaign && (
        <div className="mt-6 p-6 bg-slate-750 rounded-lg shadow-xl">
          <h2 className="text-2xl font-semibold text-amber-300 mb-4">Managing: {selectedCampaign.name}</h2>
          <CharacterManager campaignId={selectedCampaignId} campaignCharacters={selectedCampaign.players || []} />
          <hr className="my-6 border-slate-600" />
          <EncounterManager 
            campaignId={selectedCampaignId} 
            initialActiveEncounterId={initialActiveInfoData && initialActiveInfoData.activeCampaignId === selectedCampaignId ? initialActiveInfoData.activeEncounterId : null}
            campaignCharacters={selectedCampaign.players || []} 
          />
        </div>
      )}
    </div>
  );
}

function CreateCampaignForm({ onCreate, onCancel }) {
  const [name, setName] = useState('');
  const [backgroundUrl, setBackgroundUrl] = useState(''); 

  const handleSubmit = (e) => {
    e.preventDefault();
    onCreate(name, backgroundUrl); 
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label htmlFor="campaignName" className="block text-sm font-medium text-slate-300">Campaign Name</label>
        <input type="text" id="campaignName" value={name} onChange={(e) => setName(e.target.value)} className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" required />
      </div>
      <div>
        <label htmlFor="backgroundUrl" className="block text-sm font-medium text-slate-300">Player Display Background URL (Optional)</label>
        <input type="url" id="backgroundUrl" value={backgroundUrl} onChange={(e) => setBackgroundUrl(e.target.value)} placeholder="https://example.com/image.jpg" className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" />
      </div>
      <div className="flex justify-end space-x-3">
        <button type="button" onClick={onCancel} className="px-4 py-2 text-sm font-medium text-slate-300 bg-slate-600 hover:bg-slate-500 rounded-md transition-colors">Cancel</button>
        <button type="submit" className="px-4 py-2 text-sm font-medium text-white bg-green-500 hover:bg-green-600 rounded-md transition-colors">Create</button>
      </div>
    </form>
  );
}

function CharacterManager({ campaignId, campaignCharacters }) {
  const [characterName, setCharacterName] = useState('');
  const [editingCharacter, setEditingCharacter] = useState(null); 

  const handleAddCharacter = async () => {
    if (!db ||!characterName.trim() || !campaignId) return;
    const newCharacter = { id: generateId(), name: characterName.trim() };
    try {
      await updateDoc(doc(db, getCampaignDocPath(campaignId)), { players: [...campaignCharacters, newCharacter] });
      setCharacterName('');
    } catch (err) { console.error("Error adding character:", err); }
  };

  const handleUpdateCharacter = async (characterId, newName) => {
    if (!db ||!newName.trim() || !campaignId) return;
    const updatedCharacters = campaignCharacters.map(c => c.id === characterId ? { ...c, name: newName.trim() } : c);
    try {
      await updateDoc(doc(db, getCampaignDocPath(campaignId)), { players: updatedCharacters });
      setEditingCharacter(null); 
    } catch (err) { console.error("Error updating character:", err); }
  };

  const handleDeleteCharacter = async (characterId) => {
    if (!db) return;
    // TODO: Implement custom confirmation modal for deleting characters
    console.warn("Attempting to delete character without confirmation:", characterId);
    const updatedCharacters = campaignCharacters.filter(c => c.id !== characterId);
    try {
      await updateDoc(doc(db, getCampaignDocPath(campaignId)), { players: updatedCharacters });
    } catch (err) { console.error("Error deleting character:", err); }
  };

  return (
    <div className="p-4 bg-slate-800 rounded-lg shadow">
      <h3 className="text-xl font-semibold text-sky-300 mb-3 flex items-center"><Users size={24} className="mr-2" /> Campaign Characters</h3>
      <form onSubmit={(e) => { e.preventDefault(); handleAddCharacter(); }} className="flex gap-2 mb-4">
        <input type="text" value={characterName} onChange={(e) => setCharacterName(e.target.value)} placeholder="New character name" className="flex-grow px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" />
        <button type="submit" className="px-4 py-2 text-sm font-medium text-white bg-sky-500 hover:bg-sky-600 rounded-md transition-colors flex items-center"><PlusCircle size={18} className="mr-1" /> Add Character</button>
      </form>
      {campaignCharacters.length === 0 && <p className="text-sm text-slate-400">No characters added.</p>}
      <ul className="space-y-2">
        {campaignCharacters.map(character => (
          <li key={character.id} className="flex justify-between items-center p-3 bg-slate-700 rounded-md">
            {editingCharacter && editingCharacter.id === character.id ? (
              <input type="text" defaultValue={character.name} onBlur={(e) => handleUpdateCharacter(character.id, e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') handleUpdateCharacter(character.id, e.target.value); if (e.key === 'Escape') setEditingCharacter(null); }} autoFocus className="flex-grow px-3 py-2 bg-slate-600 border border-slate-500 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white"/>
            ) : ( <span className="text-slate-100">{character.name}</span> )}
            <div className="flex space-x-2">
              <button onClick={() => setEditingCharacter(character)} className="p-1 rounded transition-colors text-yellow-400 hover:text-yellow-300 bg-slate-600 hover:bg-slate-500" aria-label="Edit character"><Edit3 size={18} /></button>
              <button onClick={() => handleDeleteCharacter(character.id)} className="p-1 rounded transition-colors text-red-400 hover:text-red-300 bg-slate-600 hover:bg-slate-500" aria-label="Delete character"><Trash2 size={18} /></button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

function EncounterManager({ campaignId, initialActiveEncounterId, campaignCharacters }) { 
  const {data: encounters, isLoading: isLoadingEncounters } = useFirestoreCollection(campaignId ? getEncountersCollectionPath(campaignId) : null);
  const {data: activeDisplayInfo } = useFirestoreDocument(getActiveDisplayDocPath());

  const [selectedEncounterId, setSelectedEncounterId] = useState(null);
  const [showCreateEncounterModal, setShowCreateEncounterModal] = useState(false);
  
  const selectedEncounterIdRef = useRef(selectedEncounterId); 

  useEffect(() => {
    selectedEncounterIdRef.current = selectedEncounterId;
  }, [selectedEncounterId]);

  useEffect(() => {
    if (!campaignId) { 
        setSelectedEncounterId(null);
        return;
    }
    if (encounters && encounters.length > 0) {
        const currentSelection = selectedEncounterIdRef.current;
        if (currentSelection === null || !encounters.some(e => e.id === currentSelection)) {
            if (initialActiveEncounterId && encounters.some(e => e.id === initialActiveEncounterId)) {
                setSelectedEncounterId(initialActiveEncounterId);
            } else if (activeDisplayInfo && activeDisplayInfo.activeCampaignId === campaignId && 
                       encounters.some(e => e.id === activeDisplayInfo.activeEncounterId)) {
                setSelectedEncounterId(activeDisplayInfo.activeEncounterId);
            }
        }
    } else if (encounters && encounters.length === 0) { 
        setSelectedEncounterId(null);
    }
  }, [campaignId, initialActiveEncounterId, activeDisplayInfo, encounters]);


  const handleCreateEncounter = async (name) => {
    if (!db ||!name.trim() || !campaignId) return;
    const newEncounterId = generateId();
    try {
      await setDoc(doc(db, getEncountersCollectionPath(campaignId), newEncounterId), {
        name: name.trim(), createdAt: new Date().toISOString(), participants: [], round: 0, currentTurnParticipantId: null, isStarted: false,
      });
      setShowCreateEncounterModal(false);
      setSelectedEncounterId(newEncounterId);
    } catch (err) { console.error("Error creating encounter:", err); }
  };

  const handleDeleteEncounter = async (encounterId) => {
    if (!db) return;
    // TODO: Implement custom confirmation modal for deleting encounters
    console.warn("Attempting to delete encounter without confirmation:", encounterId);
    try {
      await deleteDoc(doc(db, getEncounterDocPath(campaignId, encounterId)));
      if (selectedEncounterId === encounterId) setSelectedEncounterId(null);
      if (activeDisplayInfo && activeDisplayInfo.activeEncounterId === encounterId) {
        await updateDoc(doc(db, getActiveDisplayDocPath()), { activeCampaignId: null, activeEncounterId: null });
      }
    } catch (err) { console.error("Error deleting encounter:", err); }
  };
  
  const handleTogglePlayerDisplayForEncounter = async (encounterId) => {
    if (!db) return;
    try {
      const currentActiveCampaign = activeDisplayInfo?.activeCampaignId;
      const currentActiveEncounter = activeDisplayInfo?.activeEncounterId;

      if (currentActiveCampaign === campaignId && currentActiveEncounter === encounterId) {
        await setDoc(doc(db, getActiveDisplayDocPath()), {
          activeCampaignId: null, 
          activeEncounterId: null,
        }, { merge: true }); 
        console.log("Player Display for this encounter turned OFF.");
      } else {
        await setDoc(doc(db, getActiveDisplayDocPath()), {
          activeCampaignId: campaignId,
          activeEncounterId: encounterId,
        }, { merge: true });
        console.log("Encounter set as active for Player Display!");
      }
    } catch (err) {
      console.error("Error toggling Player Display for encounter:", err);
    }
  };

  const selectedEncounter = encounters?.find(e => e.id === selectedEncounterId);

  if (isLoadingEncounters && campaignId) {
      return <p className="text-center text-slate-300 mt-4">Loading encounters...</p>;
  }

  return (
    <div className="mt-6 p-4 bg-slate-800 rounded-lg shadow">
      <div className="flex justify-between items-center mb-3">
        <h3 className="text-xl font-semibold text-sky-300 flex items-center"><Swords size={24} className="mr-2" /> Encounters</h3>
        <button onClick={() => setShowCreateEncounterModal(true)} className="px-4 py-2 text-sm font-medium text-white bg-orange-500 hover:bg-orange-600 rounded-md transition-colors flex items-center"><PlusCircle size={18} className="mr-1" /> Create Encounter</button>
      </div>
      {(!encounters || encounters.length === 0) && <p className="text-sm text-slate-400">No encounters yet.</p>}
      <div className="space-y-3">
        {encounters?.map(encounter => {
          const isLiveOnPlayerDisplay = activeDisplayInfo && activeDisplayInfo.activeCampaignId === campaignId && activeDisplayInfo.activeEncounterId === encounter.id;
          return (
            <div key={encounter.id} className={`p-3 rounded-md shadow transition-all ${selectedEncounterId === encounter.id ? 'bg-sky-600 ring-2 ring-sky-400' : 'bg-slate-700 hover:bg-slate-650'} ${isLiveOnPlayerDisplay ? 'ring-2 ring-green-500 shadow-md shadow-green-500/30' : ''}`}>
              <div className="flex justify-between items-center">
                <div onClick={() => setSelectedEncounterId(encounter.id)} className="cursor-pointer flex-grow">
                  <h4 className="font-medium text-white">{encounter.name}</h4>
                  <p className="text-xs text-slate-300">Participants: {encounter.participants?.length || 0}</p>
                  {isLiveOnPlayerDisplay && <span className="text-xs text-green-400 font-semibold block mt-1">LIVE ON PLAYER DISPLAY</span>}
                </div>
                <div className="flex items-center space-x-2">
                  <button 
                    onClick={() => handleTogglePlayerDisplayForEncounter(encounter.id)} 
                    className={`p-1 rounded transition-colors ${isLiveOnPlayerDisplay ? 'bg-red-500 hover:bg-red-600 text-white' : 'text-teal-400 hover:text-teal-300 bg-slate-600 hover:bg-slate-500'}`} 
                    title={isLiveOnPlayerDisplay ? "Deactivate for Player Display" : "Activate for Player Display"}
                  >
                    {isLiveOnPlayerDisplay ? <EyeOff size={18} /> : <Eye size={18} />}
                  </button>
                  <button onClick={(e) => { e.stopPropagation(); handleDeleteEncounter(encounter.id); }} className="p-1 rounded transition-colors text-red-400 hover:text-red-300 bg-slate-600 hover:bg-slate-500" title="Delete Encounter"><Trash2 size={18} /></button>
                </div>
              </div>
            </div>
          );
        })}
      </div>
      {showCreateEncounterModal && <Modal onClose={() => setShowCreateEncounterModal(false)} title="Create New Encounter"><CreateEncounterForm onCreate={handleCreateEncounter} onCancel={() => setShowCreateEncounterModal(false)} /></Modal>}
      {selectedEncounter && (
        <div className="mt-6 p-4 bg-slate-750 rounded-lg shadow-inner">
          <h3 className="text-xl font-semibold text-amber-300 mb-3">Managing Encounter: {selectedEncounter.name}</h3>
          <ParticipantManager encounter={selectedEncounter} encounterPath={getEncounterDocPath(campaignId, selectedEncounter.id)} campaignCharacters={campaignCharacters} /> 
          <InitiativeControls campaignId={campaignId} encounter={selectedEncounter} encounterPath={getEncounterDocPath(campaignId, selectedEncounter.id)} />
        </div>
      )}
    </div>
  );
}

function CreateEncounterForm({ onCreate, onCancel }) { 
  const [name, setName] = useState('');
  return (
    <form onSubmit={(e) => { e.preventDefault(); onCreate(name); }} className="space-y-4">
      <div>
        <label htmlFor="encounterName" className="block text-sm font-medium text-slate-300">Encounter Name</label>
        <input type="text" id="encounterName" value={name} onChange={(e) => setName(e.target.value)} className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" required />
      </div>
      <div className="flex justify-end space-x-3">
        <button type="button" onClick={onCancel} className="px-4 py-2 text-sm font-medium text-slate-300 bg-slate-600 hover:bg-slate-500 rounded-md transition-colors">Cancel</button>
        <button type="submit" className="px-4 py-2 text-sm font-medium text-white bg-orange-500 hover:bg-orange-600 rounded-md transition-colors">Create</button>
      </div>
    </form>
  );
}

function ParticipantManager({ encounter, encounterPath, campaignCharacters }) { 
  const [participantName, setParticipantName] = useState('');
  const [participantType, setParticipantType] = useState('monster'); 
  const [selectedCharacterId, setSelectedCharacterId] = useState(''); 
  const [initiative, setInitiative] = useState(10);
  const [maxHp, setMaxHp] = useState(10);
  const [editingParticipant, setEditingParticipant] = useState(null); 
  const [hpChangeValues, setHpChangeValues] = useState({}); 
  const [draggedItemId, setDraggedItemId] = useState(null);

  const participants = encounter.participants || [];

  const handleAddParticipant = async () => {
    if (!db || (participantType === 'monster' && !participantName.trim()) || (participantType === 'character' && !selectedCharacterId)) return;
    let nameToAdd = participantName.trim();
    if (participantType === 'character') {
      const character = campaignCharacters.find(c => c.id === selectedCharacterId);
      if (!character) { console.error("Selected character not found"); return; }
      if (participants.some(p => p.type === 'character' && p.originalCharacterId === selectedCharacterId)) {
        alert(`${character.name} is already in this encounter.`); return;
      }
      nameToAdd = character.name;
    }
    const newParticipant = {
      id: generateId(), name: nameToAdd, type: participantType, 
      originalCharacterId: participantType === 'character' ? selectedCharacterId : null, 
      initiative: parseInt(initiative, 10) || 0, maxHp: parseInt(maxHp, 10) || 1, currentHp: parseInt(maxHp, 10) || 1, 
      conditions: [], isActive: true, 
    };
    try {
      await updateDoc(doc(db, encounterPath), { participants: [...participants, newParticipant] });
      setParticipantName(''); setInitiative(10); setMaxHp(10); setSelectedCharacterId(''); 
    } catch (err) { console.error("Error adding participant:", err); }
  };

  const handleUpdateParticipant = async (updatedData) => {
    if (!db || !editingParticipant) return;
    const { flavorText, ...restOfData } = updatedData; 
    const updatedParticipants = participants.map(p => p.id === editingParticipant.id ? { ...p, ...restOfData } : p );
    try {
      await updateDoc(doc(db, encounterPath), { participants: updatedParticipants });
      setEditingParticipant(null);
    } catch (err) { console.error("Error updating participant:", err); }
  };

  const handleDeleteParticipant = async (participantId) => {
    if (!db) return;
    // TODO: Implement custom confirmation modal for deleting participants
    console.warn("Attempting to delete participant without confirmation:", participantId);
    const updatedParticipants = participants.filter(p => p.id !== participantId);
    try {
      await updateDoc(doc(db, encounterPath), { participants: updatedParticipants });
    } catch (err) { console.error("Error deleting participant:", err); }
  };
  
  const toggleParticipantActive = async (participantId) => {
    if (!db) return;
    const pToToggle = participants.find(p => p.id === participantId);
    if (!pToToggle) return;
    const updatedPs = participants.map(p => p.id === participantId ? { ...p, isActive: !p.isActive } : p);
    try { await updateDoc(doc(db, encounterPath), { participants: updatedPs }); } 
    catch (err) { console.error("Error toggling active state:", err); }
  };

  const handleHpInputChange = (participantId, value) => setHpChangeValues(prev => ({ ...prev, [participantId]: value }));

  const applyHpChange = async (participantId, changeType) => {
    if (!db) return;
    const amountStr = hpChangeValues[participantId];
    if (amountStr === undefined || amountStr.trim() === '') return;
    const amount = parseInt(amountStr, 10);
    if (isNaN(amount) || amount === 0) { setHpChangeValues(prev => ({ ...prev, [participantId]: '' })); return; }
    const pToChange = participants.find(p => p.id === participantId);
    if (!pToChange) return;
    let newHp = pToChange.currentHp;
    if (changeType === 'damage') newHp = Math.max(0, pToChange.currentHp - amount);
    else if (changeType === 'heal') newHp = Math.min(pToChange.maxHp, pToChange.currentHp + amount);
    const updatedPs = participants.map(p => p.id === participantId ? { ...p, currentHp: newHp } : p);
    try {
      await updateDoc(doc(db, encounterPath), { participants: updatedPs });
      setHpChangeValues(prev => ({ ...prev, [participantId]: '' })); 
    } catch (err) { console.error("Error applying HP change:", err); }
  };

  // --- Drag and Drop Handlers ---
  const handleDragStart = (e, id) => {
    setDraggedItemId(id);
    e.dataTransfer.effectAllowed = 'move'; 
  };

  const handleDragOver = (e) => {
    e.preventDefault(); 
    e.dataTransfer.dropEffect = 'move'; 
  };

  const handleDrop = async (e, targetId) => {
    e.preventDefault(); 
    if (!db || draggedItemId === null || draggedItemId === targetId) {
      setDraggedItemId(null); 
      return;
    }
    
    const currentParticipants = [...participants]; 
    const draggedItemIndex = currentParticipants.findIndex(p => p.id === draggedItemId);
    const targetItemIndex = currentParticipants.findIndex(p => p.id === targetId);

    if (draggedItemIndex === -1 || targetItemIndex === -1) {
      console.error("Dragged or target item not found in participants list.");
      setDraggedItemId(null);
      return;
    }

    const draggedItem = currentParticipants[draggedItemIndex];
    const targetItem = currentParticipants[targetItemIndex];

    if (draggedItem.initiative !== targetItem.initiative) {
      console.log("Drag-and-drop for tie-breaking only allowed between participants with the same initiative score.");
      setDraggedItemId(null);
      return;
    }

    const [removedItem] = currentParticipants.splice(draggedItemIndex, 1); 
    currentParticipants.splice(targetItemIndex, 0, removedItem); 

    try {
      await updateDoc(doc(db, encounterPath), { participants: currentParticipants });
      console.log("Participants reordered in Firestore for tie-breaking.");
    } catch (err) {
      console.error("Error updating participants after drag-drop:", err);
    }
    setDraggedItemId(null); 
  };
  
  const handleDragEnd = () => {
    setDraggedItemId(null); 
  };

  const sortedAdminParticipants = [...participants].sort((a, b) => {
    if (a.initiative === b.initiative) {
      const indexA = participants.findIndex(p => p.id === a.id);
      const indexB = participants.findIndex(p => p.id === b.id);
      return indexA - indexB; 
    }
    return b.initiative - a.initiative; 
  });
  
  const initiativeGroups = participants.reduce((acc, p) => {
    acc[p.initiative] = (acc[p.initiative] || 0) + 1;
    return acc;
  }, {});
  const tiedInitiatives = Object.keys(initiativeGroups).filter(init => initiativeGroups[init] > 1).map(Number);


  return (
    <div className="p-3 bg-slate-800 rounded-md mt-4">
      <h4 className="text-lg font-medium text-sky-200 mb-3">Participants</h4>
      <form onSubmit={(e) => { e.preventDefault(); handleAddParticipant(); }} className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4 p-3 bg-slate-700 rounded">
        <div>
          <label className="block text-sm font-medium text-slate-300">Type</label>
          <select value={participantType} onChange={(e) => setParticipantType(e.target.value)} className="mt-1 w-full px-3 py-2 bg-slate-600 border-slate-500 rounded text-white">
            <option value="monster">Monster</option>
            <option value="character">Character</option>
          </select>
        </div>

        {participantType === 'monster' && (
          <div className="md:col-span-2"> 
            <label className="block text-sm font-medium text-slate-300">Monster Name</label>
            <input type="text" value={participantName} onChange={(e) => setParticipantName(e.target.value)} placeholder="e.g., Dire Wolf" className="mt-1 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" />
          </div>
        )}
        {participantType === 'character' && (<div><label className="block text-sm font-medium text-slate-300">Select Character</label><select value={selectedCharacterId} onChange={(e) => setSelectedCharacterId(e.target.value)} className="mt-1 w-full px-3 py-2 bg-slate-600 border-slate-500 rounded text-white"><option value="">-- Select from Campaign --</option>{campaignCharacters.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}</select></div>)}
        
        <div><label className="block text-sm font-medium text-slate-300">Initiative</label><input type="number" value={initiative} onChange={(e) => setInitiative(e.target.value)} className="mt-1 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" /></div>
        <div><label className="block text-sm font-medium text-slate-300">Max HP</label><input type="number" value={maxHp} onChange={(e) => setMaxHp(e.target.value)} className="mt-1 w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" /></div>
        
        <div className="md:col-span-2 flex justify-end">
            <button type="submit" className="px-4 py-2 text-sm font-medium text-white bg-green-500 hover:bg-green-600 rounded-md transition-colors flex items-center">
                <PlusCircle size={18} className="mr-1" /> Add to Encounter
            </button>
        </div>
      </form>
      {participants.length === 0 && <p className="text-sm text-slate-400">No participants.</p>}
      <ul className="space-y-2">
        {sortedAdminParticipants.map((p, index) => {
          const isCurrentTurn = encounter.isStarted && p.id === encounter.currentTurnParticipantId;
          const isDraggable = !encounter.isStarted && tiedInitiatives.includes(Number(p.initiative)); 
          return (
            <li 
              key={p.id} 
              draggable={isDraggable}
              onDragStart={isDraggable ? (e) => handleDragStart(e, p.id) : undefined}
              onDragOver={isDraggable ? handleDragOver : undefined}
              onDrop={isDraggable ? (e) => handleDrop(e, p.id) : undefined}
              onDragEnd={isDraggable ? handleDragEnd : undefined}
              className={`p-3 rounded-md flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 transition-all 
                         ${isCurrentTurn ? 'bg-green-600 ring-2 ring-green-300 shadow-lg' : (p.type === 'character' ? 'bg-sky-800' : 'bg-red-800')} 
                         ${!p.isActive ? 'opacity-50' : ''}
                         ${isDraggable ? 'cursor-grab' : ''}
                         ${draggedItemId === p.id ? 'opacity-50 ring-2 ring-yellow-400' : ''}
                        `}
            >
              <div className="flex-1 flex items-center">
                {isDraggable && <ChevronsUpDown size={18} className="mr-2 text-slate-400 flex-shrink-0" title="Drag to reorder in tie"/>}
                <div>
                  <p className={`font-semibold text-lg ${isCurrentTurn ? 'text-white' : 'text-white'}`}>{p.name} <span className="text-xs">({p.type})</span>{isCurrentTurn && <span className="ml-2 px-2 py-0.5 bg-yellow-400 text-black text-xs font-bold rounded-full inline-flex items-center"><Zap size={12} className="mr-1"/> CURRENT</span>}</p>
                  <p className={`text-sm ${isCurrentTurn ? 'text-green-100' : 'text-slate-200'}`}>Init: {p.initiative} | HP: {p.currentHp}/{p.maxHp}</p>
                </div>
              </div>
              <div className="flex flex-wrap items-center space-x-2 mt-2 sm:mt-0">
                {encounter.isStarted && p.isActive && (<div className="flex items-center space-x-1 bg-slate-700 p-1 rounded-md"><input type="number" placeholder="HP" value={hpChangeValues[p.id] || ''} onChange={(e) => handleHpInputChange(p.id, e.target.value)} className="w-16 p-1 text-sm bg-slate-600 border border-slate-500 rounded-md text-white focus:ring-sky-500 focus:border-sky-500" aria-label={`HP change for ${p.name}`}/><button onClick={() => applyHpChange(p.id, 'damage')} className="p-1 bg-red-500 hover:bg-red-600 text-white rounded-md text-xs" title="Damage"><HeartCrack size={16}/></button><button onClick={() => applyHpChange(p.id, 'heal')} className="p-1 bg-green-500 hover:bg-green-600 text-white rounded-md text-xs" title="Heal"><HeartPulse size={16}/></button></div>)}
                <button onClick={() => toggleParticipantActive(p.id)} className={`p-1 rounded transition-colors ${p.isActive ? 'text-yellow-400 hover:text-yellow-300 bg-slate-600 hover:bg-slate-500' : 'text-slate-400 hover:text-slate-300 bg-slate-600 hover:bg-slate-500'}`} title={p.isActive ? "Mark Inactive" : "Mark Active"}>{p.isActive ? <UserCheck size={18} /> : <UserX size={18} />}</button>
                <button onClick={() => setEditingParticipant(p)} className="p-1 rounded transition-colors text-yellow-400 hover:text-yellow-300 bg-slate-600 hover:bg-slate-500" title="Edit"><Edit3 size={18} /></button>
                <button onClick={() => handleDeleteParticipant(p.id)} className="p-1 rounded transition-colors text-red-400 hover:text-red-300 bg-slate-600 hover:bg-slate-500" title="Remove"><Trash2 size={18} /></button>
              </div>
            </li>
          );
        })}
      </ul>
      {editingParticipant && <EditParticipantModal participant={editingParticipant} onClose={() => setEditingParticipant(null)} onSave={handleUpdateParticipant} />}
    </div>
  );
}

function EditParticipantModal({ participant, onClose, onSave }) {
  const [name, setName] = useState(participant.name);
  const [initiative, setInitiative] = useState(participant.initiative);
  const [currentHp, setCurrentHp] = useState(participant.currentHp);
  const [maxHp, setMaxHp] = useState(participant.maxHp);

  const handleSubmit = (e) => {
    e.preventDefault();
    onSave({
      name: name.trim(), initiative: parseInt(initiative, 10),
      currentHp: parseInt(currentHp, 10), maxHp: parseInt(maxHp, 10),
    });
  };
  return (
    <Modal onClose={onClose} title={`Edit ${participant.name}`}>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div><label className="block text-sm font-medium text-slate-300">Name</label><input type="text" value={name} onChange={(e) => setName(e.target.value)} className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" /></div>
        <div><label className="block text-sm font-medium text-slate-300">Initiative</label><input type="number" value={initiative} onChange={(e) => setInitiative(e.target.value)} className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" /></div>
        <div className="flex gap-4">
          <div className="flex-1"><label className="block text-sm font-medium text-slate-300">Current HP</label><input type="number" value={currentHp} onChange={(e) => setCurrentHp(e.target.value)} className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" /></div>
          <div className="flex-1"><label className="block text-sm font-medium text-slate-300">Max HP</label><input type="number" value={maxHp} onChange={(e) => setMaxHp(e.target.value)} className="mt-1 block w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm text-white" /></div>
        </div>
        <div className="flex justify-end space-x-3 pt-2">
          <button type="button" onClick={onClose} className="px-4 py-2 text-sm font-medium text-slate-300 bg-slate-600 hover:bg-slate-500 rounded-md transition-colors">Cancel</button>
          <button type="submit" className="px-4 py-2 text-sm font-medium text-white bg-sky-500 hover:bg-sky-600 rounded-md transition-colors"><Save size={18} className="mr-1 inline-block" /> Save</button>
        </div>
      </form>
    </Modal>
  );
}

function InitiativeControls({ campaignId, encounter, encounterPath }) { 
  const handleStartEncounter = async () => {
    if (!db ||!encounter.participants || encounter.participants.length === 0) { alert("Add participants first."); return; }
    const activePs = encounter.participants.filter(p => p.isActive);
    if (activePs.length === 0) { alert("No active participants."); return; }
    
    const sortedPs = [...activePs].sort((a, b) => {
        if (a.initiative === b.initiative) {
            const indexA = encounter.participants.findIndex(p => p.id === a.id);
            const indexB = encounter.participants.findIndex(p => p.id === b.id);
            return indexA - indexB;
        }
        return b.initiative - a.initiative; 
    });

    try {
      await updateDoc(doc(db, encounterPath), {
        isStarted: true, round: 1, currentTurnParticipantId: sortedPs[0].id, turnOrderIds: sortedPs.map(p => p.id) 
      });
      await setDoc(doc(db, getActiveDisplayDocPath()), { 
        activeCampaignId: campaignId, 
        activeEncounterId: encounter.id 
      }, { merge: true });
      console.log("Encounter started and set as active display.");

    } catch (err) { console.error("Error starting encounter:", err); }
  };

  const handleNextTurn = async () => {
    if (!db ||!encounter.isStarted || !encounter.currentTurnParticipantId || !encounter.turnOrderIds || encounter.turnOrderIds.length === 0) return;
    const activePsInOrder = encounter.turnOrderIds.map(id => encounter.participants.find(p => p.id === id && p.isActive)).filter(Boolean); 
    if (activePsInOrder.length === 0) {
      alert("No active participants left.");
      await updateDoc(doc(db, encounterPath), { isStarted: false, currentTurnParticipantId: null, round: encounter.round }); return;
    }
    const currentIndex = activePsInOrder.findIndex(p => p.id === encounter.currentTurnParticipantId);
    let nextIndex = (currentIndex + 1) % activePsInOrder.length;
    let nextRound = encounter.round;
    if (nextIndex === 0 && currentIndex !== -1) nextRound += 1;
    try {
      await updateDoc(doc(db, encounterPath), { currentTurnParticipantId: activePsInOrder[nextIndex].id, round: nextRound });
    } catch (err) { console.error("Error advancing turn:", err); }
  };
  
  const handleEndEncounter = async () => {
    if (!db) return;
    // TODO: Implement custom confirmation modal for ending encounter
    console.warn("Attempting to end encounter without confirmation");
    try {
      await updateDoc(doc(db, encounterPath), { isStarted: false, currentTurnParticipantId: null, round: 0, turnOrderIds: [] });
      await setDoc(doc(db, getActiveDisplayDocPath()), { 
        activeCampaignId: null, 
        activeEncounterId: null 
      }, { merge: true });
      console.log("Encounter ended and deactivated from Player Display.");
    } catch (err) { console.error("Error ending encounter:", err); }
  };

  if (!encounter || !encounter.participants) return null;
  return (
    <div className="mt-6 p-3 bg-slate-800 rounded-md">
      <h4 className="text-lg font-medium text-sky-200 mb-3">Combat Controls</h4>
      <div className="flex flex-wrap gap-3">
        {!encounter.isStarted ? (
          <button onClick={handleStartEncounter} className="px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-md transition-colors flex items-center" disabled={!encounter.participants || encounter.participants.filter(p=>p.isActive).length === 0}><PlayIcon size={18} className="mr-2" /> Start</button>
        ) : (
          <>
            <button onClick={handleNextTurn} className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors flex items-center" disabled={!encounter.currentTurnParticipantId}><SkipForwardIcon size={18} className="mr-2" /> Next Turn</button>
            <button onClick={handleEndEncounter} className="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition-colors flex items-center"><StopCircleIcon size={18} className="mr-2" /> End</button>
            <p className="text-slate-300 self-center">Round: {encounter.round}</p>
          </>
        )}
      </div>
    </div>
  );
}

function DisplayView() { 
  const { data: activeDisplayData, isLoading: isLoadingActiveDisplay, error: activeDisplayError } = useFirestoreDocument(getActiveDisplayDocPath());
  
  const [activeEncounterData, setActiveEncounterData] = useState(null);
  const [isLoadingEncounter, setIsLoadingEncounter] = useState(true); 
  const [encounterError, setEncounterError] = useState(null);
  const [campaignBackgroundUrl, setCampaignBackgroundUrl] = useState('');
  const [isPlayerDisplayActive, setIsPlayerDisplayActive] = useState(false); 
  const currentTurnRef = useRef(null); 

  useEffect(() => {
    if (!db) {
        setEncounterError("Firestore not available."); 
        setIsLoadingEncounter(false); 
        setIsPlayerDisplayActive(false);
        return;
    }

    let unsubscribeEncounter;
    let unsubscribeCampaign;

    if (activeDisplayData) {
        const { activeCampaignId, activeEncounterId } = activeDisplayData;
        if (activeCampaignId && activeEncounterId) {
            setIsPlayerDisplayActive(true);
            setIsLoadingEncounter(true);
            setEncounterError(null);

            const campaignDocRef = doc(db, getCampaignDocPath(activeCampaignId));
            unsubscribeCampaign = onSnapshot(campaignDocRef, (campSnap) => {
                if (campSnap.exists()) {
                    setCampaignBackgroundUrl(campSnap.data().playerDisplayBackgroundUrl || '');
                } else {
                    setCampaignBackgroundUrl(''); 
                }
            }, (err) => console.error("Error fetching campaign background for display:", err));

            const encounterPath = getEncounterDocPath(activeCampaignId, activeEncounterId);
            unsubscribeEncounter = onSnapshot(doc(db, encounterPath), (encDocSnap) => {
                if (encDocSnap.exists()) {
                    setActiveEncounterData({ id: encDocSnap.id, ...encDocSnap.data() });
                } else { 
                    setActiveEncounterData(null); 
                    setEncounterError("Active encounter data not found.");
                }
                setIsLoadingEncounter(false);
            }, (err) => { 
                console.error("Error fetching active encounter details for display:", err); 
                setEncounterError("Error loading active encounter data."); 
                setIsLoadingEncounter(false);
            });
        } else {
            setActiveEncounterData(null); 
            setCampaignBackgroundUrl('');
            setIsPlayerDisplayActive(false); 
            setIsLoadingEncounter(false);
        }
    } else if (!isLoadingActiveDisplay) { 
        setActiveEncounterData(null); 
        setCampaignBackgroundUrl('');
        setIsPlayerDisplayActive(false);
        setIsLoadingEncounter(false);
    }
    
    return () => { 
      if (unsubscribeEncounter) unsubscribeEncounter();
      if (unsubscribeCampaign) unsubscribeCampaign();
    };
  }, [activeDisplayData, isLoadingActiveDisplay]); 

  useEffect(() => {
    if (currentTurnRef.current) {
      currentTurnRef.current.scrollIntoView({
        behavior: 'smooth',
        block: 'center', 
      });
    }
  }, [activeEncounterData?.currentTurnParticipantId]); 

  if (isLoadingActiveDisplay || (isPlayerDisplayActive && isLoadingEncounter)) {
      return <div className="text-center py-10 text-2xl text-slate-300">Loading Player Display...</div>;
  }
  if (activeDisplayError || (isPlayerDisplayActive && encounterError)) {
      return <div className="text-center py-10 text-2xl text-red-400">{activeDisplayError || encounterError}</div>;
  }
  
  if (!isPlayerDisplayActive || !activeEncounterData) {
    return (
      <div className="min-h-screen bg-black text-slate-400 flex flex-col items-center justify-center p-4 text-center">
        <EyeOff size={64} className="mb-4 text-slate-500" />
        <h2 className="text-3xl font-semibold">Game Session Paused</h2>
        <p className="text-xl mt-2">The Dungeon Master has not activated an encounter for display.</p>
      </div>
    );
  }


  const { name, participants, round, currentTurnParticipantId, isStarted } = activeEncounterData;
  
  let allOrderedActiveParticipants = [];
  if (participants) {
    if (isStarted && activeEncounterData.turnOrderIds?.length > 0 ) {
      allOrderedActiveParticipants = activeEncounterData.turnOrderIds
          .map(id => participants.find(p => p.id === id)).filter(p => p && p.isActive); 
    } else {
      allOrderedActiveParticipants = [...participants].filter(p => p.isActive)
          .sort((a, b) => {
              if (a.initiative === b.initiative) {
                  const indexA = participants.findIndex(p => p.id === a.id);
                  const indexB = participants.findIndex(p => p.id === b.id);
                  return indexA - indexB;
              }
              return b.initiative - a.initiative; 
          });
    }
  }

  let participantsToRender = allOrderedActiveParticipants;
  const FOCUSED_VIEW_THRESHOLD = 7; // When to switch to focused view
  const ITEMS_AROUND_CURRENT = 3;   // Show 3 before and 3 after current = 7 total in focused view
  let inFocusedView = false;

  if (isStarted && allOrderedActiveParticipants.length >= FOCUSED_VIEW_THRESHOLD) {
    inFocusedView = true;
    const currentIndex = allOrderedActiveParticipants.findIndex(p => p.id === currentTurnParticipantId);
    if (currentIndex !== -1) {
      const focusedList = [];
      for (let i = -ITEMS_AROUND_CURRENT; i <= ITEMS_AROUND_CURRENT; i++) {
        const listLength = allOrderedActiveParticipants.length;
        // Ensure the index wraps around correctly for the circular list effect
        const actualIndex = (currentIndex + i + listLength) % listLength;
        focusedList.push(allOrderedActiveParticipants[actualIndex]);
      }
      participantsToRender = focusedList;
    } else {
        participantsToRender = allOrderedActiveParticipants.slice(0, ITEMS_AROUND_CURRENT * 2 + 1);
    }
  }


  const displayStyles = campaignBackgroundUrl ? {
    backgroundImage: `url(${campaignBackgroundUrl})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center center',
    backgroundRepeat: 'no-repeat',
    minHeight: '100vh' 
  } : { minHeight: '100vh' };


  return (
    <div 
        className={`p-4 md:p-8 rounded-xl shadow-2xl ${!campaignBackgroundUrl ? 'bg-slate-900' : ''}`}
        style={displayStyles}
    >
      <div className={campaignBackgroundUrl ? 'bg-slate-900 bg-opacity-75 p-4 md:p-6 rounded-lg' : ''}> 
        <h2 className="text-4xl md:text-5xl font-bold text-center text-amber-400 mb-2">{name}</h2>
        {isStarted && <p className="text-2xl text-center text-sky-300 mb-2">Round: {round}</p>}
        {inFocusedView && <p className="text-sm text-center text-slate-400 mb-4">(Focused View: {participantsToRender.length} of {allOrderedActiveParticipants.length} active)</p>}
        {!isStarted && participants?.length > 0 && <p className="text-2xl text-center text-slate-400 mb-6">Awaiting Start</p>}
        {!isStarted && (!participants || participants.length === 0) && <p className="text-2xl text-slate-500 mb-6">No participants.</p>}
        {participantsToRender.length === 0 && isStarted && <p className="text-xl text-slate-400">No active participants.</p>}
        
        <div className="space-y-4 max-w-4xl mx-auto overflow-y-auto" style={{maxHeight: 'calc(100vh - 220px)'}}> {/* Widened and adjusted maxHeight */}
          {participantsToRender.map(p => (
            <div 
              key={p.id} 
              ref={p.id === currentTurnParticipantId ? currentTurnRef : null} 
              className={`p-4 md:p-6 rounded-lg shadow-lg transition-all ${p.id === currentTurnParticipantId && isStarted ? 'bg-green-700 ring-4 ring-green-400 scale-105' : (p.type === 'character' ? 'bg-sky-700' : 'bg-red-700')} ${!p.isActive ? 'opacity-40 grayscale' : ''}`}
            >
              <div className="flex justify-between items-center mb-2">
                <h3 className={`text-2xl md:text-3xl font-bold ${p.id === currentTurnParticipantId && isStarted ? 'text-white' : (p.type === 'character' ? 'text-sky-100' : 'text-red-100')}`}>{p.name}{p.id === currentTurnParticipantId && isStarted && <span className="text-yellow-300 animate-pulse ml-2">(Current)</span>}</h3>
                <span className={`text-xl md:text-2xl font-semibold ${p.id === currentTurnParticipantId && isStarted ? 'text-green-200' : 'text-slate-200'}`}>Init: {p.initiative}</span>
              </div>
              <div className="flex justify-between items-center">
                <div className="w-full bg-slate-600 rounded-full h-6 md:h-8 relative overflow-hidden border-2 border-slate-500">
                  <div className={`h-full rounded-full transition-all ${p.currentHp <= p.maxHp / 4 ? 'bg-red-500' : (p.currentHp <= p.maxHp / 2 ? 'bg-yellow-500' : 'bg-green-500')}`} style={{ width: `${Math.max(0, (p.currentHp / p.maxHp) * 100)}%` }}></div>
                  {p.type !== 'monster' && ( 
                      <span className="absolute inset-0 flex items-center justify-center text-xs md:text-sm font-medium text-white px-2">
                      HP: {p.currentHp} / {p.maxHp}
                      </span>
                  )}
                </div>
              </div>
              {p.conditions?.length > 0 && <p className="text-sm text-yellow-300 mt-2">Conditions: {p.conditions.join(', ')}</p>}
              {!p.isActive && <p className="text-center text-lg font-semibold text-slate-300 mt-2">(Inactive)</p>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Modal({ onClose, title, children }) {
  useEffect(() => {
    const handleEsc = (event) => { if (event.key === 'Escape') onClose(); };
    window.addEventListener('keydown', handleEsc);
    return () => window.removeEventListener('keydown', handleEsc);
  }, [onClose]);
  return (
    <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-50">
      <div className="bg-slate-800 p-6 rounded-lg shadow-xl w-full max-w-md">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-semibold text-sky-300">{title}</h2>
          <button onClick={onClose} className="text-slate-400 hover:text-slate-200"><XCircle size={24} /></button>
        </div>
        {children}
      </div>
    </div>
  );
}

const PlayIcon = ({ size = 24, className = '' }) => <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>;
const SkipForwardIcon = ({ size = 24, className = '' }) => <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>;
const StopCircleIcon = ({size=24, className=''}) => <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><circle cx="12" cy="12" r="10"></circle><rect x="9" y="9" width="6" height="6"></rect></svg>;

export default App;