import { Package, Building, Calendar, ExternalLink, AlertCircle } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import type { RideModelSubmissionData } from '@/types/submission-data';
import { useEffect, useState } from 'react';
import { supabase } from '@/lib/supabaseClient';

interface RichRideModelDisplayProps {
  data: RideModelSubmissionData;
  actionType: 'create' | 'edit' | 'delete';
  showAllFields?: boolean;
}

export function RichRideModelDisplay({ data, actionType, showAllFields = true }: RichRideModelDisplayProps) {
  const [manufacturer, setManufacturer] = useState<string | null>(null);
  
  useEffect(() => {
    const fetchManufacturer = async () => {
      if (data.manufacturer_id) {
        const { data: mfgData } = await supabase
          .from('companies')
          .select('name')
          .eq('id', data.manufacturer_id)
          .single();
        setManufacturer(mfgData?.name || null);
      }
    };
    
    fetchManufacturer();
  }, [data.manufacturer_id]);
  
  return (
    <div className="space-y-4">
      {/* Header Section */}
      <div className="flex items-start gap-3">
        <div className="p-2 rounded-lg bg-primary/10 text-primary">
          <Package className="h-5 w-5" />
        </div>
        <div className="flex-1 min-w-0">
          <h3 className="text-xl font-bold text-foreground truncate">{data.name}</h3>
          {manufacturer && (
            <div className="text-sm text-muted-foreground mt-0.5">by {manufacturer}</div>
          )}
          <div className="flex items-center gap-2 mt-1 flex-wrap">
            <Badge variant="secondary" className="text-xs">
              {data.category?.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
            </Badge>
            {data.ride_type && (
              <Badge variant="outline" className="text-xs">
                {data.ride_type.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
              </Badge>
            )}
            {actionType === 'create' && (
              <Badge className="bg-green-600 text-white text-xs">New Model</Badge>
            )}
            {actionType === 'edit' && (
              <Badge className="bg-amber-600 text-white text-xs">Edit</Badge>
            )}
            {actionType === 'delete' && (
              <Badge variant="destructive" className="text-xs">Delete</Badge>
            )}
          </div>
        </div>
      </div>
      
      {/* Manufacturer */}
      {manufacturer && (
        <div className="bg-muted/50 rounded-lg p-3">
          <div className="flex items-center gap-2 mb-2">
            <Building className="h-4 w-4 text-muted-foreground" />
            <span className="text-sm font-semibold">Manufacturer</span>
          </div>
          <div className="text-sm font-medium ml-6">
            {manufacturer}
          </div>
        </div>
      )}
      
      {/* Description */}
      {data.description && (
        <div className="bg-muted/50 rounded-lg p-4">
          <div className="text-sm font-semibold mb-2">Description</div>
          <div className="text-sm text-muted-foreground leading-relaxed">
            {data.description}
          </div>
        </div>
      )}
      
      {/* Source */}
      {data.source_url && (
        <a 
          href={data.source_url} 
          target="_blank" 
          rel="noopener noreferrer"
          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:underline"
        >
          Source
          <ExternalLink className="h-3 w-3" />
        </a>
      )}
      
      {/* Submission Notes */}
      {data.submission_notes && (
        <div className="bg-amber-50 dark:bg-amber-950 rounded-lg p-3 border border-amber-200 dark:border-amber-800">
          <div className="flex items-center gap-2 mb-1">
            <AlertCircle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
            <span className="text-sm font-semibold text-amber-900 dark:text-amber-100">Submitter Notes</span>
          </div>
          <div className="text-sm text-amber-800 dark:text-amber-200 ml-6">
            {data.submission_notes}
          </div>
        </div>
      )}
      
      {/* Images Preview */}
      {(data.banner_image_url || data.card_image_url) && (
        <div className="space-y-2">
          <Separator />
          <div className="text-sm font-semibold">Images</div>
          <div className="grid grid-cols-2 gap-2">
            {data.banner_image_url && (
              <div className="space-y-1">
                <img 
                  src={data.banner_image_url} 
                  alt="Banner" 
                  className="w-full h-24 object-cover rounded border"
                />
                <div className="text-xs text-center text-muted-foreground">
                  Banner
                  {data.banner_image_id && (
                    <span className="block font-mono text-[10px] mt-0.5">ID: {data.banner_image_id.slice(0, 8)}...</span>
                  )}
                </div>
              </div>
            )}
            {data.card_image_url && (
              <div className="space-y-1">
                <img 
                  src={data.card_image_url} 
                  alt="Card" 
                  className="w-full h-24 object-cover rounded border"
                />
                <div className="text-xs text-center text-muted-foreground">
                  Card
                  {data.card_image_id && (
                    <span className="block font-mono text-[10px] mt-0.5">ID: {data.card_image_id.slice(0, 8)}...</span>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}