import { useEffect, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import { useOfflineProperties } from "@/hooks/useOfflineProperties";
import { useAuth } from "@/contexts/AuthContext";
import { useSubscription } from "@/contexts/SubscriptionContext";
import { useLanguage } from "@/contexts/LanguageContext";
import { getDashboardBadgesContent } from "@/i18n/pages/dashboardBadges";
import { PropertyCard } from "@/components/PropertyCard";
import { AddPropertyDialog } from "@/components/AddPropertyDialog";
import { RecentActivity } from "@/components/RecentActivity";
import { MobileNavigation } from "@/components/MobileNavigation";
import { Header } from "@/components/Header";
import { SubscriptionBanner } from "@/components/SubscriptionBanner";
import { TrialCountdown } from "@/components/TrialCountdown";
import { PropertyAnalytics } from "@/components/analytics/PropertyAnalytics";
import { PerformanceSummary } from "@/components/analytics/PerformanceSummary";
import { FeatureTour } from "@/components/analytics/FeatureTour";
import { OnboardingChecklist } from "@/components/onboarding/OnboardingChecklist";
import { AchievementBadges } from "@/components/onboarding/AchievementBadges";
import { CohostSearchWidget } from "@/components/dashboard/CohostSearchWidget";
import { RecommendedCohosts } from "@/components/dashboard/RecommendedCohosts";
import { PullToRefresh } from "@/components/PullToRefresh";
import { DashboardSkeleton } from "@/components/dashboard/DashboardSkeleton";
import { useOnboardingEmails } from "@/hooks/useOnboardingEmails";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Home, Bell, BarChart3, WifiOff, Plus } from "lucide-react";

const mockActivities = [
  { id: "1", type: "payment" as const, title: "Paiement reçu", description: "Ahmed Ben Ali - Appartement Centre-ville", date: "Il y a 2 heures", status: "success" as const },
  { id: "2", type: "maintenance" as const, title: "Intervention programmée", description: "Studio Medina - Réparation plomberie", date: "Hier", status: "pending" as const },
  { id: "3", type: "contract" as const, title: "Nouveau contrat", description: "Villa Kantaoui - En attente de signature", date: "Il y a 3 jours", status: "pending" as const },
];

export default function Dashboard() {
  const { user, isLoading: authLoading } = useAuth();
  const { subscription, isLoading: subscriptionLoading } = useSubscription();
  const { t, language } = useLanguage();
  const badgesContent = getDashboardBadgesContent(language);
  const { data: properties = [], isLoading: propertiesLoading, isOffline, usingCache, refresh } = useOfflineProperties();
  const navigate = useNavigate();
  
  // Initialize onboarding emails
  useOnboardingEmails();

  useEffect(() => {
    document.title = "Dashboard - CohostBee";
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', 'CohostBee - Votre tableau de bord de gestion locative. Gérez vos propriétés, réservations et paiements.');
    }
  }, []);

  const handleTabChange = (tab: string) => {
    switch (tab) {
      case "dashboard": navigate("/dashboard"); break;
      case "contracts": navigate("/contracts"); break;
      case "payments": navigate("/payments"); break;
      case "subscription": navigate("/subscription"); break;
      case "notifications": navigate("/alerts"); break;
      case "settings": navigate("/profile"); break;
    }
  };

  const handleRefresh = useCallback(async () => {
    await refresh();
  }, [refresh]);

  const occupiedCount = properties.filter(p => p.status === 'occupied').length;

  // Show skeleton while initial data is loading
  const isInitialLoading = authLoading || (propertiesLoading && properties.length === 0);

  return (
    <PullToRefresh onRefresh={handleRefresh} className="min-h-screen bg-background pb-20 sm:pb-24">
      <Header />
      <div className="p-3 sm:p-4 md:p-6 max-w-7xl mx-auto">
        <TrialCountdown />
        <SubscriptionBanner />
        
        {isInitialLoading ? (
          <DashboardSkeleton />
        ) : (
        
        <div className="space-y-6">
          <div className="flex items-center justify-between gap-2">
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <h1 className="text-lg sm:text-xl md:text-2xl font-bold text-foreground truncate">
                  {t('hello')}, {user?.user_metadata?.name || user?.email?.split('@')[0]}
                </h1>
                {(isOffline || usingCache) && (
                  <Badge variant="secondary" className="flex items-center gap-1 text-xs">
                    <WifiOff className="w-3 h-3" />
                    {isOffline ? badgesContent.offline : badgesContent.cache}
                  </Badge>
                )}
              </div>
              <p className="text-xs sm:text-sm text-muted-foreground">{t('propertyStatus')}</p>
            </div>
            <div className="flex items-center gap-2 flex-shrink-0">
              <AddPropertyDialog trigger={
                <Button size="sm" className="gap-1">
                  <Plus className="h-4 w-4" />
                  <span className="hidden sm:inline">{t('addProperty')}</span>
                </Button>
              } />
              <Button size="icon" variant="outline" className="relative" onClick={() => navigate('/alerts')}>
                <Bell className="h-4 w-4 sm:h-5 sm:w-5" />
                <Badge className="absolute -top-2 -right-2 h-5 w-5 text-xs bg-destructive text-destructive-foreground border-0">3</Badge>
              </Button>
            </div>
          </div>

          {/* Onboarding Checklist for new users */}
          <OnboardingChecklist />

          {/* Achievement Badges */}
          <AchievementBadges />

          {/* Performance Summary from Analytics */}
          <PerformanceSummary />

          <Tabs defaultValue="properties" className="space-y-4">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="properties" className="flex items-center gap-2">
                <Home className="w-4 h-4" />
                {t('yourProperties')}
              </TabsTrigger>
              <TabsTrigger value="analytics" className="flex items-center gap-2">
                <BarChart3 className="w-4 h-4" />
                {t('analytics')}
              </TabsTrigger>
            </TabsList>

            <TabsContent value="properties">
              {propertiesLoading ? (
                <p className="text-center text-muted-foreground">{t('loading')}</p>
              ) : properties.length === 0 ? (
                <Card className="p-6 text-center space-y-3">
                  <p className="text-muted-foreground">{t('noProperties')}</p>
                  <AddPropertyDialog trigger={
                    <Button className="gap-1"><Plus className="h-4 w-4" />{t('addProperty')}</Button>
                  } />
                </Card>
              ) : (
                <div className="space-y-3">
                  {properties.map((property) => (
                    <PropertyCard 
                      key={property.id} 
                      {...property} 
                      monthlyRent={Number(property.monthly_rent)} 
                      nextPaymentDate={property.next_payment_date || undefined} 
                      airbnbUrl={property.airbnb_url || undefined} 
                      bookingUrl={property.booking_url || undefined} 
                      googleMapsUrl={property.google_maps_url || undefined} 
                      googleSheetsUrl={property.google_sheets_url || undefined}
                      _pendingSync={(property as { _pendingSync?: boolean })._pendingSync}
                    />
                  ))}
                </div>
              )}
            </TabsContent>

            <TabsContent value="analytics">
              <PropertyAnalytics />
            </TabsContent>
          </Tabs>

          {/* Recommended Co-hosts based on property locations */}
          <RecommendedCohosts />

          {/* Cohost Search Widget */}
          <CohostSearchWidget />

          <RecentActivity activities={mockActivities} />
        </div>
        )}
      </div>
      <MobileNavigation activeTab="dashboard" onTabChange={handleTabChange} />
      
      {/* Feature Tour for new users */}
      <FeatureTour />
    </PullToRefresh>
  );
}