import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Calendar, MapPin, ArrowRight, Building2 } from 'lucide-react';
import { format } from 'date-fns';
import { parseDateForDisplay } from '@/lib/dateUtils';

interface HistoricalEntityCardProps {
  type: 'park' | 'ride';
  entity: {
    id: string;
    name: string;
    operated_from?: string;
    operated_until?: string;
    closure_reason?: string;
    removal_reason?: string;
    location?: {
      name: string;
      city?: string;
      country: string;
    };
    successor?: {
      id: string;
      name: string;
      slug: string;
    };
    relocated_to?: {
      id: string;
      name: string;
      slug: string;
    };
  };
  onViewDetails?: () => void;
}

export function HistoricalEntityCard({ type, entity, onViewDetails }: HistoricalEntityCardProps) {
  const reason = type === 'park' ? entity.closure_reason : entity.removal_reason;
  const hasSuccessor = type === 'park' ? !!entity.successor : !!entity.relocated_to;
  const successorInfo = type === 'park' ? entity.successor : entity.relocated_to;

  return (
    <Card className="border-dashed">
      <CardHeader>
        <div className="flex items-start justify-between">
          <div>
            <CardTitle className="flex items-center gap-2">
              {entity.name}
              <Badge variant="secondary" className="bg-gray-500/10">
                Historical
              </Badge>
            </CardTitle>
            <CardDescription className="flex items-center gap-1 mt-1">
              <MapPin className="h-3 w-3" />
              {entity.location?.city && `${entity.location.city}, `}
              {entity.location?.country || entity.location?.name}
            </CardDescription>
          </div>
        </div>
      </CardHeader>

      <CardContent className="space-y-4">
        {/* Operating Dates */}
        <div className="flex items-center gap-4 text-sm">
          <div className="flex items-center gap-1 text-muted-foreground">
            <Calendar className="h-4 w-4" />
            <span>Operated:</span>
          </div>
          <div className="font-medium">
            {/* ⚠️ Use parseDateForDisplay to prevent timezone shifts */}
            {entity.operated_from && format(parseDateForDisplay(entity.operated_from), 'MMM d, yyyy')}
            {' - '}
            {entity.operated_until && format(parseDateForDisplay(entity.operated_until), 'MMM d, yyyy')}
          </div>
        </div>

        {/* Closure/Removal Reason */}
        {reason && (
          <div className="p-3 rounded-md bg-muted">
            <div className="text-xs text-muted-foreground font-medium mb-1">
              {type === 'park' ? 'Closure Reason' : 'Removal Reason'}
            </div>
            <p className="text-sm">{reason}</p>
          </div>
        )}

        {/* Successor/Relocation Info */}
        {hasSuccessor && successorInfo && (
          <div className="flex items-center gap-2 p-3 rounded-md bg-primary/5 border border-primary/20">
            <Building2 className="h-4 w-4 text-primary" />
            <span className="text-sm">
              {type === 'park' ? 'Succeeded by' : 'Relocated to'}:
            </span>
            <Button
              variant="link"
              className="h-auto p-0 text-primary"
              onClick={() => {
                window.location.href = `/${type}s/${successorInfo.slug}`;
              }}
            >
              {successorInfo.name}
              <ArrowRight className="h-3 w-3 ml-1" />
            </Button>
          </div>
        )}

        {/* View Details Button */}
        {onViewDetails && (
          <Button variant="outline" className="w-full" onClick={onViewDetails}>
            View Full History
          </Button>
        )}
      </CardContent>
    </Card>
  );
}