thrilltrack-explorer/src/pages/ManufacturerDetail.tsx

import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Header } from '@/components/layout/Header';
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 { ArrowLeft, MapPin, Star, Globe, Calendar, Edit, Factory, FerrisWheel } from 'lucide-react';
import { Company } from '@/types/database';
import { supabase } from '@/integrations/supabase/client';
import { ManufacturerForm } from '@/components/admin/ManufacturerForm';
import { ManufacturerPhotoGallery } from '@/components/companies/ManufacturerPhotoGallery';
import { useAuth } from '@/hooks/useAuth';
import { useUserRole } from '@/hooks/useUserRole';
import { toast } from '@/hooks/use-toast';
import { submitCompanyUpdate } from '@/lib/companyHelpers';
import { VersionIndicator } from '@/components/versioning/VersionIndicator';
import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
import { EntityHistoryTimeline, HistoryEvent } from '@/components/history/EntityHistoryTimeline';
import { FormerNamesSection } from '@/components/history/FormerNamesSection';

export default function ManufacturerDetail() {
  const { slug } = useParams<{ slug: string }>();
  const navigate = useNavigate();
  const [manufacturer, setManufacturer] = useState<Company | null>(null);
  const [loading, setLoading] = useState(true);
  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
  const { user } = useAuth();
  const { isModerator } = useUserRole();

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

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

      if (error) throw error;
      setManufacturer(data);
    } catch (error) {
      console.error('Error fetching manufacturer:', error);
    } finally {
      setLoading(false);
    }
  };

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

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

      setIsEditModalOpen(false);
    } catch (error: any) {
      toast({
        title: "Error",
        description: error.message || "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 (!manufacturer) {
    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">Manufacturer Not Found</h1>
            <Button onClick={() => navigate('/manufacturers')}>
              <ArrowLeft className="w-4 h-4 mr-2" />
              Back to Manufacturers
            </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('/manufacturers')}>
            <ArrowLeft className="w-4 h-4 mr-2" />
            <span className="md:hidden">Back</span>
            <span className="hidden md:inline">Back to Manufacturers</span>
          </Button>
          
          <Button 
            variant="outline"
            onClick={() => {
              if (!user) {
                navigate('/auth');
              } else {
                setIsEditModalOpen(true);
              }
            }}
          >
            <Edit className="w-4 h-4 mr-2" />
            <span className="md:hidden">Edit</span>
            <span className="hidden md:inline">Edit Manufacturer</span>
          </Button>
        </div>

        {/* Hero Section */}
        <div className="relative mb-4 md:mb-8">
          <div className="aspect-[16/9] md:aspect-[21/9] bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 rounded-lg overflow-hidden relative">
            {(manufacturer.banner_image_url || manufacturer.banner_image_id) ? (
              <img 
                src={manufacturer.banner_image_url || `https://imagedelivery.net/X-2-mmiWukWxvAQQ2_o-7Q/${manufacturer.banner_image_id}/public`} 
                alt={manufacturer.name}
                className="w-full h-full object-cover"
              />
            ) : manufacturer.logo_url ? (
              <div className="flex items-center justify-center h-full bg-background/90">
                <img 
                  src={manufacturer.logo_url} 
                  alt={manufacturer.name}
                  className="max-h-48 object-contain"
                />
              </div>
            ) : (
              <div className="flex items-center justify-center h-full">
                <Factory className="w-24 h-24 opacity-50" />
              </div>
            )}
            
            <div className="absolute bottom-0 left-0 right-0 p-6 pb-12 md: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">
                    Manufacturer
                  </Badge>
                  <h1 className="text-2xl md:text-4xl lg:text-6xl font-bold text-white mb-2">
                    {manufacturer.name}
                  </h1>
                  {manufacturer.headquarters_location && (
                    <div className="flex items-center text-white/90 text-sm md:text-lg">
                      <MapPin className="w-5 h-5 mr-2" />
                      {manufacturer.headquarters_location}
                    </div>
                  )}
                  <div className="mt-3">
                    <VersionIndicator 
                      entityType="company" 
                      entityId={manufacturer.id} 
                      entityName={manufacturer.name}
                    />
                  </div>
                </div>
                
                {manufacturer.average_rating > 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">
                        {manufacturer.average_rating.toFixed(1)}
                      </span>
                    </div>
                    <div className="text-white/90 text-sm">
                      {manufacturer.review_count} {manufacturer.review_count === 1 ? "review" : "reviews"}
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* Company Info */}
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-8 max-w-4xl mx-auto">
          {manufacturer.founded_year && (
            <Card>
              <CardContent className="p-3 md:p-4 text-center">
                <Calendar className="w-6 h-6 text-primary mx-auto mb-2" />
                <div className="text-2xl font-bold">{manufacturer.founded_year}</div>
                <div className="text-sm text-muted-foreground">Founded</div>
              </CardContent>
            </Card>
          )}
          {manufacturer.website_url && (
            <Card>
              <CardContent className="p-3 md:p-4 text-center">
                <Globe className="w-6 h-6 text-primary mx-auto mb-2" />
                <a 
                  href={manufacturer.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-5">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="rides">Rides</TabsTrigger>
            <TabsTrigger value="models">Models</TabsTrigger>
            <TabsTrigger value="photos">Photos</TabsTrigger>
            <TabsTrigger value="history">History</TabsTrigger>
          </TabsList>

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

          <TabsContent value="rides">
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between mb-4">
                  <h2 className="text-2xl font-bold">Rides</h2>
                  <Button 
                    variant="outline" 
                    onClick={() => navigate(`/manufacturers/${manufacturer.slug}/rides`)}
                  >
                    View All Rides
                  </Button>
                </div>
                <p className="text-muted-foreground">
                  View all rides manufactured by {manufacturer.name}
                </p>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="models">
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between mb-4">
                  <h2 className="text-2xl font-bold">Models</h2>
                  <Button 
                    variant="outline" 
                    onClick={() => navigate(`/manufacturers/${manufacturer.slug}/models`)}
                  >
                    View All Models
                  </Button>
                </div>
                <p className="text-muted-foreground">
                  View all ride models by {manufacturer.name}
                </p>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="photos">
            <ManufacturerPhotoGallery 
              manufacturerId={manufacturer.id}
              manufacturerName={manufacturer.name}
            />
          </TabsContent>

          <TabsContent value="history" className="mt-6">
            <Tabs defaultValue="company-history" className="w-full">
              <TabsList className="w-full max-w-md">
                <TabsTrigger value="company-history">Company History</TabsTrigger>
                <TabsTrigger value="version-history">Version History</TabsTrigger>
              </TabsList>

              <TabsContent value="company-history" className="mt-6 space-y-6">
                <EntityHistoryTimeline
                  events={[
                    ...(manufacturer.founded_year ? [{
                      date: `${manufacturer.founded_year}`,
                      title: `${manufacturer.name} Founded`,
                      description: `${manufacturer.name} was established`,
                      type: 'milestone' as const
                    }] : []),
                  ]}
                  entityName={manufacturer.name}
                />
              </TabsContent>

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

      {/* Edit Modal */}
      <Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <ManufacturerForm
            initialData={{
              id: manufacturer.id,
              name: manufacturer.name,
              slug: manufacturer.slug,
              description: manufacturer.description,
              person_type: manufacturer.person_type as any,
              website_url: manufacturer.website_url,
              founded_year: manufacturer.founded_year,
              headquarters_location: manufacturer.headquarters_location,
              banner_image_url: manufacturer.banner_image_url,
              card_image_url: manufacturer.card_image_url
            }}
            onSubmit={handleEditSubmit}
            onCancel={() => setIsEditModalOpen(false)}
          />
        </DialogContent>
      </Dialog>
    </div>
  );
}