import { useState, useEffect, lazy, Suspense } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Header } from '@/components/layout/Header';
import { trackPageView } from '@/lib/viewTracking';
import { getBannerUrls } from '@/lib/cloudflareImageUtils';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { AdminFormSkeleton } from '@/components/loading/PageSkeletons';
import { ArrowLeft, MapPin, Star, Globe, Calendar, Edit, Building2, Gauge } from 'lucide-react';
import { Company, Park } from '@/types/database';
import { supabase } from '@/lib/supabaseClient';
import { PropertyOwnerPhotoGallery } from '@/components/companies/PropertyOwnerPhotoGallery';
import { ParkCard } from '@/components/parks/ParkCard';
import { handleNonCriticalError } from '@/lib/errorHandler';

// Lazy load admin form
const PropertyOwnerForm = lazy(() => import('@/components/admin/PropertyOwnerForm').then(m => ({ default: m.PropertyOwnerForm })));
import { useAuth } from '@/hooks/useAuth';
import { useUserRole } from '@/hooks/useUserRole';
import { toast } from '@/hooks/use-toast';
import { getErrorMessage } from '@/lib/errorHandler';
import { submitCompanyUpdate } from '@/lib/companyHelpers';
import { VersionIndicator } from '@/components/versioning/VersionIndicator';
import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
import { useAuthModal } from '@/hooks/useAuthModal';
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
import { useOpenGraph } from '@/hooks/useOpenGraph';

export default function PropertyOwnerDetail() {
  const { slug } = useParams<{ slug: string }>();
  const navigate = useNavigate();
  const [owner, setOwner] = useState<Company | null>(null);
  const [parks, setParks] = useState<Park[]>([]);
  const [loading, setLoading] = useState(true);
  const [parksLoading, setParksLoading] = useState(true);
  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
  const [totalParks, setTotalParks] = useState<number>(0);
  const [operatingRides, setOperatingRides] = useState<number>(0);
  const [statsLoading, setStatsLoading] = useState(true);
  const [totalPhotos, setTotalPhotos] = useState<number>(0);
  const { user } = useAuth();
  const { isModerator } = useUserRole();
  const { requireAuth } = useAuthModal();
  
  // Update document title when owner changes
  useDocumentTitle(owner?.name || 'Property Owner Details');
  
  // Update Open Graph meta tags
  useOpenGraph({
    title: owner?.name || '',
    description: owner?.description || (owner ? `${owner.name} - Property Owner${owner.headquarters_location ? ` based in ${owner.headquarters_location}` : ''}` : ''),
    imageUrl: owner?.banner_image_url ?? undefined,
    imageId: owner?.banner_image_id ?? undefined,
    type: 'profile',
    enabled: !!owner
  });

  useEffect(() => {
    if (slug) {
      fetchOwnerData();
    }
  }, [slug]);

  // Track page view when property owner is loaded
  useEffect(() => {
    if (owner?.id) {
      trackPageView('company', owner.id);
    }
  }, [owner?.id]);

  const fetchOwnerData = async () => {
    try {
      const { data, error } = await supabase
        .from('companies')
        .select('*')
        .eq('slug', slug || '')
        .eq('company_type', 'property_owner')
        .maybeSingle();

      if (error) throw error;
      setOwner(data);
      
      // Fetch parks owned by this property owner
      if (data) {
        fetchParks(data.id);
        fetchStatistics(data.id);
        fetchPhotoCount(data.id);
      }
    } catch (error) {
      handleNonCriticalError(error, { action: 'Fetch Property Owner', metadata: { slug } });
    } finally {
      setLoading(false);
    }
  };

  const fetchParks = async (ownerId: string) => {
    try {
      const { data, error } = await supabase
        .from('parks')
        .select(`
          *,
          location:locations(*)
        `)
        .eq('property_owner_id', ownerId)
        .order('name')
        .limit(6);

      if (error) throw error;
      setParks(data || []);
    } catch (error) {
      handleNonCriticalError(error, { action: 'Fetch Owner Parks', metadata: { ownerId } });
    } finally {
      setParksLoading(false);
    }
  };

  const fetchStatistics = async (ownerId: string) => {
    try {
      // Get total parks count
      const { count: parksCount, error: parksError } = await supabase
        .from('parks')
        .select('id', { count: 'exact', head: true })
        .eq('property_owner_id', ownerId);

      if (parksError) throw parksError;
      setTotalParks(parksCount || 0);

      // Get operating rides count across all owned parks
      const { data: ridesData, error: ridesError } = await supabase
        .from('rides')
        .select('id, parks!inner(property_owner_id)')
        .eq('parks.property_owner_id', ownerId)
        .eq('status', 'operating');

      if (ridesError) throw ridesError;
      setOperatingRides(ridesData?.length || 0);
    } catch (error) {
      handleNonCriticalError(error, { action: 'Fetch Owner Statistics', metadata: { ownerId } });
    } finally {
      setStatsLoading(false);
    }
  };

  const fetchPhotoCount = async (ownerId: string) => {
    try {
      const { count, error } = await supabase
        .from('photos')
        .select('id', { count: 'exact', head: true })
        .eq('entity_type', 'property_owner')
        .eq('entity_id', ownerId);

      if (error) throw error;
      setTotalPhotos(count || 0);
    } catch (error) {
      handleNonCriticalError(error, { action: 'Fetch Owner Photo Count', metadata: { ownerId } });
      setTotalPhotos(0);
    }
  };

  const handleEditSubmit = async (data: any) => {
    try {
      await submitCompanyUpdate(
        owner!.id,
        data,
        user!.id
      );

      toast({
        title: "Edit Submitted",
        description: "Your edit has been submitted for review."
      });

      setIsEditModalOpen(false);
    } catch (error) {
      const errorMsg = getErrorMessage(error);
      toast({
        title: "Error",
        description: errorMsg || "Failed to submit edit.",
        variant: "destructive"
      });
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-background">
        <Header />
        <div className="container mx-auto px-4 py-8">
          <div className="animate-pulse space-y-6">
            <div className="h-64 bg-muted rounded-lg"></div>
            <div className="h-8 bg-muted rounded w-1/2"></div>
          </div>
        </div>
      </div>
    );
  }

  if (!owner) {
    return (
      <div className="min-h-screen bg-background">
        <Header />
        <div className="container mx-auto px-4 py-8">
          <div className="text-center py-12">
            <h1 className="text-2xl font-bold mb-4">Property Owner Not Found</h1>
            <Button onClick={() => navigate('/owners')}>
              <ArrowLeft className="w-4 h-4 mr-2" />
              Back to Property Owners
            </Button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background">
      <Header />
      
      <main className="container mx-auto px-4 py-8 max-w-7xl">
        {/* Back Button and Edit Button */}
        <div className="flex items-center justify-between mb-6">
          <Button variant="ghost" onClick={() => navigate('/owners')}>
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back to Property Owners
          </Button>
          
          <Button 
            variant="outline"
            onClick={() => requireAuth(() => setIsEditModalOpen(true), "Sign in to edit this property owner")}
          >
            <Edit className="w-4 h-4 mr-2" />
            Edit Property Owner
          </Button>
        </div>

        {/* Hero Section */}
        <div className="relative mb-8">
          <div className="aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
            {(owner.banner_image_url || owner.banner_image_id) ? (
              <picture>
                <source 
                  media="(max-width: 768px)" 
                  srcSet={getBannerUrls(owner.banner_image_id ?? undefined).mobile || owner.banner_image_url || undefined} 
                />
                <img 
                  src={getBannerUrls(owner.banner_image_id ?? undefined).desktop || owner.banner_image_url || undefined}
                  alt={owner.name}
                  className="w-full h-full object-cover"
                  loading="eager"
                />
              </picture>
            ) : owner.logo_url ? (
              <div className="flex items-center justify-center h-full bg-background/90">
                <img 
                  src={owner.logo_url} 
                  alt={owner.name}
                  className="max-h-48 object-contain"
                />
              </div>
            ) : (
              <div className="flex items-center justify-center h-full">
                <Building2 className="w-24 h-24 opacity-50" />
              </div>
            )}
            
            <div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/60 to-transparent">
              <div className="flex items-end justify-between">
                <div>
                  <Badge variant="outline" className="bg-black/20 text-white border-white/20 mb-2">
                    Property Owner
                  </Badge>
                  <h1 className="text-4xl md:text-6xl font-bold text-white mb-2">
                    {owner.name}
                  </h1>
                  {owner.headquarters_location && (
                    <div className="flex items-center text-white/90 text-lg">
                      <MapPin className="w-5 h-5 mr-2" />
                      {owner.headquarters_location}
                    </div>
                  )}
                  <div className="mt-3">
                    <VersionIndicator 
                      entityType="company" 
                      entityId={owner.id} 
                      entityName={owner.name}
                    />
                  </div>
                </div>
                
                {(owner.average_rating ?? 0) > 0 && (
                  <div className="bg-black/30 backdrop-blur-md rounded-lg p-6 text-center">
                    <div className="flex items-center gap-2 text-white mb-2">
                      <Star className="w-6 h-6 fill-yellow-400 text-yellow-400" />
                  <span className="text-3xl font-bold">
                    {(owner.average_rating ?? 0).toFixed(1)}
                  </span>
                    </div>
                    <div className="text-white/90 text-sm">
                      {owner.review_count} {owner.review_count === 1 ? "review" : "reviews"}
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* Company Info */}
        <div className="flex flex-wrap justify-center gap-4 mb-8">
          {!statsLoading && totalParks > 0 && (
            <Card>
              <CardContent className="p-4 text-center">
                <Building2 className="w-6 h-6 text-primary mx-auto mb-2" />
                <div className="text-2xl font-bold">{totalParks}</div>
                <div className="text-sm text-muted-foreground">
                  {totalParks === 1 ? 'Park Owned' : 'Parks Owned'}
                </div>
              </CardContent>
            </Card>
          )}
          
          {!statsLoading && operatingRides > 0 && (
            <Card>
              <CardContent className="p-4 text-center">
                <Gauge className="w-6 h-6 text-accent mx-auto mb-2" />
                <div className="text-2xl font-bold">{operatingRides}</div>
                <div className="text-sm text-muted-foreground">
                  Operating {operatingRides === 1 ? 'Ride' : 'Rides'}
                </div>
              </CardContent>
            </Card>
          )}
          
          {owner.founded_year && (
            <Card>
              <CardContent className="p-4 text-center">
                <Calendar className="w-6 h-6 text-primary mx-auto mb-2" />
                <div className="text-2xl font-bold">{owner.founded_year}</div>
                <div className="text-sm text-muted-foreground">Founded</div>
              </CardContent>
            </Card>
          )}
          
          {owner.website_url && (
            <Card>
              <CardContent className="p-4 text-center">
                <Globe className="w-6 h-6 text-primary mx-auto mb-2" />
                <a 
                  href={owner.website_url} 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="text-sm text-primary hover:underline break-all"
                >
                  Visit Website
                </a>
              </CardContent>
            </Card>
          )}
        </div>

        {/* Tabs */}
        <Tabs defaultValue="overview" className="w-full">
          <TabsList className="grid w-full grid-cols-2 md:grid-cols-4">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="parks">
              Parks {!statsLoading && totalParks > 0 && `(${totalParks})`}
            </TabsTrigger>
            <TabsTrigger value="photos">
              Photos {!statsLoading && totalPhotos > 0 && `(${totalPhotos})`}
            </TabsTrigger>
            <TabsTrigger value="history">History</TabsTrigger>
          </TabsList>

          <TabsContent value="overview" className="space-y-6">
            {owner.description && (
              <Card>
                <CardContent className="p-6">
                  <h2 className="text-2xl font-bold mb-4">About</h2>
                  <p className="text-muted-foreground whitespace-pre-wrap">
                    {owner.description}
                  </p>
                </CardContent>
              </Card>
            )}
          </TabsContent>

          <TabsContent value="parks">
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between mb-6">
                  <h2 className="text-2xl font-bold">Parks Owned</h2>
                  <Button 
                    variant="outline" 
                    onClick={() => navigate(`/owners/${owner.slug}/parks`)}
                  >
                    View All Parks
                  </Button>
                </div>
                
                {parksLoading ? (
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {[1, 2, 3].map((i) => (
                      <div key={i} className="h-64 bg-muted rounded-lg animate-pulse" />
                    ))}
                  </div>
                ) : parks.length > 0 ? (
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 gap-4 lg:gap-5 xl:gap-4 2xl:gap-5">
                    {parks.map((park) => (
                      <ParkCard key={park.id} park={park} />
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-12 text-muted-foreground">
                    <Building2 className="w-12 h-12 mx-auto mb-4 opacity-50" />
                    <p>No parks found for {owner.name}</p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="photos">
            <PropertyOwnerPhotoGallery 
              propertyOwnerId={owner.id}
              propertyOwnerName={owner.name}
            />
          </TabsContent>

          <TabsContent value="history" className="mt-6">
            <EntityHistoryTabs
              entityType="company"
              entityId={owner.id}
              entityName={owner.name}
            />
          </TabsContent>
        </Tabs>
      </main>

      {/* Edit Modal */}
      <Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <Suspense fallback={<AdminFormSkeleton />}>
            <PropertyOwnerForm
              initialData={{
                id: owner.id,
                name: owner.name,
                slug: owner.slug,
                description: owner.description ?? undefined,
              company_type: 'property_owner',
              person_type: (owner.person_type || 'company') as 'company' | 'individual' | 'firm' | 'organization',
              website_url: owner.website_url ?? undefined,
                founded_year: owner.founded_year ?? undefined,
                headquarters_location: owner.headquarters_location ?? undefined,
                banner_image_url: owner.banner_image_url ?? undefined,
                card_image_url: owner.card_image_url ?? undefined
              }}
              onSubmit={handleEditSubmit}
              onCancel={() => setIsEditModalOpen(false)}
            />
          </Suspense>
        </DialogContent>
      </Dialog>
    </div>
  );
}