thrilltrack-explorer/src/components/moderation/displays/RichCompanyDisplay.tsx

import { Building, MapPin, Calendar, Globe, ExternalLink, AlertCircle } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { FlexibleDateDisplay } from '@/components/ui/flexible-date-display';
import type { DatePrecision } from '@/components/ui/flexible-date-input';
import type { CompanySubmissionData } from '@/types/submission-data';

interface RichCompanyDisplayProps {
  data: CompanySubmissionData;
  actionType: 'create' | 'edit' | 'delete';
  showAllFields?: boolean;
}

export function RichCompanyDisplay({ data, actionType, showAllFields = true }: RichCompanyDisplayProps) {
  const getCompanyTypeColor = (type: string | undefined) => {
    if (!type) return 'bg-gray-500';
    switch (type.toLowerCase()) {
      case 'manufacturer': return 'bg-blue-500';
      case 'operator': return 'bg-green-500';
      case 'designer': return 'bg-purple-500';
      case 'property_owner': return 'bg-orange-500';
      default: return 'bg-gray-500';
    }
  };
  
  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">
          <Building 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>
          <div className="flex items-center gap-2 mt-1 flex-wrap">
            <Badge className={`${getCompanyTypeColor(data.company_type)} text-white text-xs`}>
              {(data.company_type || 'Unknown')?.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
            </Badge>
            {data.person_type && (
              <Badge variant="outline" className="text-xs">
                {data.person_type.replace(/\b\w/g, l => l.toUpperCase())}
              </Badge>
            )}
            {actionType === 'create' && (
              <Badge className="bg-green-600 text-white text-xs">New Company</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>
      
      {/* Key Information */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        {/* Founded Date */}
        {(data.founded_date || data.founded_year) && (
          <div className="bg-muted/50 rounded-lg p-3">
            <div className="flex items-center gap-2 mb-2">
              <Calendar className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm font-semibold">Founded</span>
            </div>
            <div className="text-sm ml-6">
              {data.founded_date ? (
                <FlexibleDateDisplay 
                  date={data.founded_date} 
                  precision={(data.founded_date_precision as DatePrecision) || 'exact'}
                  className="font-medium"
                />
              ) : (
                <span className="font-medium">{data.founded_year}</span>
              )}
            </div>
          </div>
        )}
        
        {/* Location */}
        {data.headquarters_location && (
          <div className="bg-muted/50 rounded-lg p-3">
            <div className="flex items-center gap-2 mb-2">
              <MapPin className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm font-semibold">Headquarters</span>
            </div>
            <div className="text-sm font-medium ml-6">
              {data.headquarters_location}
            </div>
          </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>
      )}
      
      {/* Website & Source */}
      {(data.website_url || data.source_url) && (
        <div className="flex items-center gap-3 flex-wrap">
          {data.website_url && (
            <a 
              href={data.website_url} 
              target="_blank" 
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
            >
              <Globe className="h-3.5 w-3.5" />
              Official Website
              <ExternalLink className="h-3 w-3" />
            </a>
          )}
          {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>
          )}
        </div>
      )}
      
      {/* 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.logo_url || 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.logo_url && (
              <div className="space-y-1">
                <img 
                  src={data.logo_url} 
                  alt="Logo" 
                  className="w-full h-24 object-contain bg-muted rounded border p-2"
                />
                <div className="text-xs text-center text-muted-foreground">Logo</div>
              </div>
            )}
            {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>
  );
}