import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';
import { getFirestore, doc, setDoc, onSnapshot, collection } from 'firebase/firestore';

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

// --- ICONS (Inline SVG for reliability) ---
const IconClock = () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>;
const IconSun = ({ className }) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>;
const IconCloud = ({ className }) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17.5 19c3.037 0 5.5-2.463 5.5-5.5 0-2.799-2.083-5.111-4.773-5.464a7.5 7.5 0 0 0-14.727 0C.583 8.389-1.5 10.701-1.5 13.5c0 3.037 2.463 5.5 5.5 5.5Z"/></svg>;
const IconCalendar = ({ className }) => <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>;
const IconSettings = ({ size = 24 }) => <svg width={size} height={size} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.1a2 2 0 0 1-1-1.72v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>;
const IconSave = () => <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>;
const IconLock = () => <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>;

export default function App() {
  const [user, setUser] = useState(null);
  const [view, setView] = useState('display');
  const [adminAuth, setAdminAuth] = useState(false);
  const [password, setPassword] = useState('');
  const [currentTime, setCurrentTime] = useState(new Date());
  
  const [settings, setSettings] = useState({
    city: 'Stockholm',
    weatherApiKey: '',
    greeting: 'Välkomna hem familjen!',
    photoUrls: [
      'https://images.unsplash.com/photo-1506744038136-46273834b3fb',
      'https://images.unsplash.com/photo-1470770841072-f978cf4d019e'
    ],
    calendarEvents: [
      { id: 1, title: 'Gympa - Elsa', time: '17:30' },
      { id: 2, title: 'Middag hos mormor', time: '18:30' }
    ]
  });

  const [weather, setWeather] = useState(null);
  const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);

  // 1. Firebase Auth
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) {
        console.error("Auth error:", err);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  // 2. Sync Settings (Fixed Path Segments)
  useEffect(() => {
    if (!user) return;

    // RULE 1: artifacts/{appId}/public/data/{collectionName}/{documentId}
    const settingsRef = doc(db, 'artifacts', appId, 'public', 'data', 'config', 'settings');
    
    const unsubscribe = onSnapshot(settingsRef, (docSnap) => {
      if (docSnap.exists()) {
        setSettings(docSnap.data());
      } else {
        setDoc(settingsRef, settings).catch(e => console.error("Initial set error:", e));
      }
    }, (error) => console.error("Firestore sync error:", error));

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

  // 3. Timers
  useEffect(() => {
    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
    const photoTimer = setInterval(() => {
      setCurrentPhotoIndex((prev) => (prev + 1) % settings.photoUrls.length);
    }, 15000);
    return () => {
      clearInterval(timer);
      clearInterval(photoTimer);
    };
  }, [settings.photoUrls.length]);

  // 4. Weather Fetch
  useEffect(() => {
    const fetchWeather = async () => {
      const key = settings.weatherApiKey;
      if (!key) return;
      try {
        const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${settings.city}&units=metric&lang=se&appid=${key}`);
        const data = await res.json();
        if (data.main) setWeather(data);
      } catch (err) {
        console.error("Weather fetch error:", err);
      }
    };
    fetchWeather();
    const interval = setInterval(fetchWeather, 600000);
    return () => clearInterval(interval);
  }, [settings.city, settings.weatherApiKey]);

  const saveSettings = async (newSettings) => {
    if (!user) return;
    const settingsRef = doc(db, 'artifacts', appId, 'public', 'data', 'config', 'settings');
    await setDoc(settingsRef, newSettings);
  };

  // --- VIEWS ---

  const AdminPanel = () => {
    const [localSettings, setLocalSettings] = useState({...settings});
    const [newPhotoUrl, setNewPhotoUrl] = useState('');

    if (!adminAuth) {
      return (
        <div className="flex flex-col items-center justify-center min-h-screen bg-slate-900 text-white p-6">
          <div className="bg-slate-800 p-8 rounded-2xl shadow-xl w-full max-w-md border border-slate-700">
            <div className="flex justify-center mb-6 text-blue-400">
              <IconLock />
            </div>
            <h2 className="text-2xl font-bold text-center mb-6 text-white">Admin Inloggning</h2>
            <input 
              type="password" 
              placeholder="Lösenord (standard: admin)"
              className="w-full bg-slate-700 border border-slate-600 rounded-lg p-3 mb-4 text-white placeholder:text-slate-400"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
            <button 
              onClick={() => { if(password === 'admin') setAdminAuth(true); else alert('Fel lösenord'); }}
              className="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 rounded-lg transition"
            >
              Logga in
            </button>
            <button onClick={() => setView('display')} className="w-full mt-4 text-slate-400 text-sm">Tillbaka till skärmen</button>
          </div>
        </div>
      );
    }

    return (
      <div className="min-h-screen bg-slate-50 p-4 md:p-8 text-slate-800">
        <div className="max-w-4xl mx-auto">
          <div className="flex justify-between items-center mb-8">
            <h1 className="text-3xl font-bold flex items-center gap-2">
              <IconSettings /> Inställningar
            </h1>
            <button onClick={() => setView('display')} className="bg-slate-200 px-4 py-2 rounded-lg text-slate-700 font-medium">Visa Skärm</button>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
              <h3 className="text-lg font-semibold mb-4 text-slate-700">Basinformation</h3>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-slate-500 mb-1">Stad för väder</label>
                  <input className="w-full border rounded-lg p-2" value={localSettings.city} onChange={e => setLocalSettings({...localSettings, city: e.target.value})}/>
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-500 mb-1">Hälsningsfras</label>
                  <input className="w-full border rounded-lg p-2" value={localSettings.greeting} onChange={e => setLocalSettings({...localSettings, greeting: e.target.value})}/>
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-500 mb-1">OpenWeather API Nyckel</label>
                  <input type="password" className="w-full border rounded-lg p-2" value={localSettings.weatherApiKey} onChange={e => setLocalSettings({...localSettings, weatherApiKey: e.target.value})} placeholder="API-nyckel"/>
                </div>
              </div>
            </div>

            <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
              <h3 className="text-lg font-semibold mb-4 text-slate-700">Bildspel (URLs)</h3>
              <div className="space-y-2 max-h-48 overflow-y-auto mb-4 border rounded p-2">
                {localSettings.photoUrls.map((url, i) => (
                  <div key={i} className="flex gap-2 items-center text-xs text-slate-400">
                    <span className="flex-1 truncate">{url}</span>
                    <button onClick={() => setLocalSettings({...localSettings, photoUrls: localSettings.photoUrls.filter((_, idx) => idx !== i)})} className="text-red-500">Ta bort</button>
                  </div>
                ))}
              </div>
              <div className="flex gap-2">
                <input className="flex-1 border rounded-lg p-2 text-sm" placeholder="Bild-URL" value={newPhotoUrl} onChange={e => setNewPhotoUrl(e.target.value)}/>
                <button onClick={() => { if(newPhotoUrl) { setLocalSettings({...localSettings, photoUrls: [...localSettings.photoUrls, newPhotoUrl]}); setNewPhotoUrl(''); } }} className="bg-blue-600 text-white px-4 py-2 rounded-lg">+</button>
              </div>
            </div>
          </div>

          <div className="mt-8 flex justify-end">
            <button onClick={() => saveSettings(localSettings)} className="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-xl font-bold flex items-center gap-2 shadow-lg transition">
              <IconSave /> Spara alla ändringar
            </button>
          </div>
        </div>
      </div>
    );
  };

  const DisplayView = () => {
    const timeStr = currentTime.toLocaleTimeString('sv-SE', { hour: '2-digit', minute: '2-digit' });
    const dateStr = currentTime.toLocaleDateString('sv-SE', { weekday: 'long', day: 'numeric', month: 'long' });

    return (
      <div className="h-screen w-screen bg-black text-white overflow-hidden flex flex-col p-8 relative">
        <div className="absolute inset-0 z-0 opacity-40">
           {settings.photoUrls.map((url, i) => (
             <img key={i} src={url} className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-[2000ms] ${i === currentPhotoIndex ? 'opacity-100' : 'opacity-0'}`} alt="Background" onError={(e) => { e.target.src = 'https://images.unsplash.com/photo-1506744038136-46273834b3fb'; }}/>
           ))}
           <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-black opacity-80"></div>
        </div>

        <div className="relative z-10 flex flex-col h-full">
          <div className="flex justify-between items-start">
            <div>
              <h1 className="text-[120px] font-light leading-none tracking-tighter tabular-nums">{timeStr}</h1>
              <p className="text-3xl text-slate-300 font-medium capitalize mt-2">{dateStr}</p>
            </div>
            {weather && (
              <div className="bg-black/30 backdrop-blur-md p-6 rounded-3xl border border-white/10 text-right min-w-[200px]">
                <div className="flex items-center justify-end gap-3 text-white">
                  <span className="text-5xl font-bold">{Math.round(weather.main.temp)}°</span>
                  {weather.weather[0].main.includes('Cloud') ? <IconCloud className="w-12 h-12 text-slate-300" /> : <IconSun className="w-12 h-12 text-yellow-400" />}
                </div>
                <p className="text-xl text-slate-300 capitalize mt-1">{weather.weather[0].description}</p>
                <p className="text-sm text-slate-400">{settings.city}</p>
              </div>
            )}
          </div>

          <div className="flex-1 flex items-center justify-center">
            <h2 className="text-5xl font-semibold text-center drop-shadow-lg max-w-3xl">"{settings.greeting}"</h2>
          </div>

          <div className="grid grid-cols-3 gap-8 items-end">
            <div className="col-span-1 bg-black/40 backdrop-blur-md p-6 rounded-3xl border border-white/10 h-64 flex flex-col">
              <h3 className="text-xl font-bold flex items-center gap-2 mb-4">
                <IconCalendar className="text-blue-400" /> Familjens Schema
              </h3>
              <div className="space-y-3 overflow-hidden">
                {settings.calendarEvents.map(event => (
                  <div key={event.id} className="flex justify-between items-center border-b border-white/5 pb-2">
                    <span className="font-medium text-white">{event.title}</span>
                    <span className="text-blue-300 text-sm font-bold">{event.time}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="col-span-2 text-right pb-4">
              <button onClick={() => setView('admin')} className="bg-white/5 hover:bg-white/10 p-3 rounded-full transition text-white/30 hover:text-white">
                <IconSettings size={20} />
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="font-sans antialiased text-white">
      {view === 'admin' ? <AdminPanel /> : <DisplayView />}
    </div>
  );
}