import React, { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";
import { Tabs, TabsContent } from "@/components/ui/tabs";
import { useAuth } from '@/hooks/useAuth';
import { useSettings, useSetting } from '@/hooks/useSettings';


import { ModernHomeFeed, TabContentWrapper, PlaceTabContent } from "@/components/home";
import VotingInterface from "@/screens/VotingInterface";
import Leaderboard from "@/components/Leaderboard";
import Gallery from "@/components/Gallery";
import Timeline from "@/components/Timeline";
import NomineeGrid from "@/components/NomineeGrid";
import ShareProfileButton from "@/components/ShareProfileButton";

import PWAInstallPrompt from "@/components/PWAInstallPrompt";

const Index: React.FC = () => {
  const [searchParams] = useSearchParams();
  const [activeTab, setActiveTab] = useState(() => {
    const tabParam = searchParams.get('tab');
    return tabParam || "home";
  });
  const { loading } = useAuth();

  // Weather location state
  const [userLocation, setUserLocation] = useState<{ lat: number; lon: number } | null>(null);

  // Fetch settings data
  const { isLoading: settingsLoading } = useSettings();
  const { data: logoUrl } = useSetting('application_logo_url');
  const { data: appName } = useSetting('app_name');
  
  const { data: appDescription } = useSetting('app_description');

  // Default values
  const defaultLogoUrl = '/lovable-uploads/Mrbearfesthero_transparent.webp';
  const defaultAppName = 'MR Bearfest 2025';
  
  const defaultAppDescription = 'Vote for your favorite nominees in the MR Bearfest 2025 competition';

  // Extract logo URL from settings
  const getLogoUrl = () => {
    if (logoUrl && typeof logoUrl === 'object' && 'url' in logoUrl) {
      return (logoUrl as any).url as string;
    }
    return defaultLogoUrl;
  };

  // Get app name from settings
  const getAppName = () => {
    return appName || defaultAppName;
  };


  // Get app description from settings
  const getAppDescription = () => {
    return appDescription || defaultAppDescription;
  };

  useEffect(() => {
    const tabParam = searchParams.get('tab');
    if (tabParam && tabParam !== activeTab) {
      setActiveTab(tabParam);
    }
  }, [searchParams, activeTab]);

  // Update document title and meta description based on settings
  useEffect(() => {
    const title = getAppName();
    const description = getAppDescription();
    
    document.title = title;
    
    // Update meta description
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', description);
    }
  }, [appName, appDescription, getAppName, getAppDescription]);

  // Get user's location for weather
  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          setUserLocation({
            lat: position.coords.latitude,
            lon: position.coords.longitude,
          });
        },
        (error) => {
          console.log('Error getting location:', error);
        }
      );
    }
  }, []);

  if (loading || settingsLoading) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center p-4">
        <div className="w-full max-w-sm">
          <div className="bg-bb-white/90 gradient-border-bb shadow-lg rounded-xl p-6 text-center space-y-4">
            <div className="w-12 h-12 mx-auto animate-spin rounded-full border-4 border-bb-orange border-t-transparent"></div>
            <h2 className="text-2xl font-bold text-bb-brown">Loading {getAppName()}...</h2>
            <p className="text-bb-brown/70">Preparing your experience...</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background pb-16">
      <div className="container mx-auto px-0 md:px-4 py-0 md:py-6">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsContent value="home" className="mt-0">
            <TabContentWrapper>
              <ModernHomeFeed 
                logoUrl={getLogoUrl()}
                onTabChange={(tab) => setActiveTab(tab)}
              />
            </TabContentWrapper>
          </TabsContent>

          <TabsContent value="nominate" className="mt-0">
            <TabContentWrapper>
              <div className="space-y-6">
                <div className="text-center space-y-4 bg-bb-peach/30 gradient-border-bb shadow-lg rounded-xl p-6">
                  <h2 className="text-2xl font-bold text-bb-brown">Find & Support Nominees</h2>
                  <p className="text-bb-brown/70">Browse all registered members and show your support by liking their profiles!</p>
                  <ShareProfileButton />
                </div>
                <NomineeGrid />
              </div>
            </TabContentWrapper>
          </TabsContent>

          <TabsContent value="vote" className="mt-0">
            <VotingInterface />
          </TabsContent>

          <TabsContent value="leaderboard" className="mt-0">
            <TabContentWrapper>
              <Leaderboard />
            </TabContentWrapper>
          </TabsContent>

          <TabsContent value="gallery" className="mt-0">
            <TabContentWrapper>
              <Gallery />
            </TabContentWrapper>
          </TabsContent>

          <TabsContent value="place" className="mt-0">
            <TabContentWrapper>
              <PlaceTabContent userLocation={userLocation} />
            </TabContentWrapper>
          </TabsContent>

          <TabsContent value="timeline" className="mt-0">
            <TabContentWrapper>
              <Timeline />
            </TabContentWrapper>
          </TabsContent>
        </Tabs>
      </div>

      {/* PWA Install Prompt */}
      <PWAInstallPrompt />
    </div>
  );
};

export default Index;