import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Tag, Calendar } from "lucide-react";

interface FormerName {
  former_name?: string;
  name?: string;
  from_year?: number;
  to_year?: number;
  reason?: string;
  date_changed?: string;
}

interface FormerNamesSectionProps {
  currentName: string;
  formerNames: FormerName[];
  entityType: 'ride' | 'park' | 'company' | 'ride_model';
}

export function FormerNamesSection({ currentName, formerNames, entityType }: FormerNamesSectionProps) {
  if (!formerNames || formerNames.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Tag className="h-5 w-5" />
            Former Names
          </CardTitle>
          <CardDescription>
            This {entityType} has not had any previous names
          </CardDescription>
        </CardHeader>
      </Card>
    );
  }

  // Sort by date (most recent first)
  const sortedNames = [...formerNames].sort((a, b) => {
    const yearA = a.to_year || (a.date_changed ? new Date(a.date_changed).getFullYear() : 0);
    const yearB = b.to_year || (b.date_changed ? new Date(b.date_changed).getFullYear() : 0);
    return yearB - yearA;
  });

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Tag className="h-5 w-5" />
          Former Names
        </CardTitle>
        <CardDescription>
          Historical names for this {entityType}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {/* Current name */}
          <div className="flex items-start gap-3 p-3 rounded-lg bg-primary/5 border border-primary/20">
            <div className="flex-shrink-0 mt-1">
              <div className="h-3 w-3 rounded-full bg-primary" />
            </div>
            <div className="flex-1">
              <h4 className="font-semibold text-foreground">{currentName}</h4>
              <p className="text-sm text-muted-foreground">Current Name</p>
            </div>
          </div>

          {/* Former names */}
          {sortedNames.map((name, index) => {
            const displayName = name.former_name || name.name;
            const yearRange = name.from_year && name.to_year 
              ? `${name.from_year} - ${name.to_year}`
              : name.date_changed
              ? `Until ${new Date(name.date_changed).getFullYear()}`
              : null;

            return (
              <div key={index} className="flex items-start gap-3 p-3 rounded-lg border">
                <div className="flex-shrink-0 mt-1">
                  <div className="h-3 w-3 rounded-full bg-muted-foreground/30" />
                </div>
                <div className="flex-1 space-y-1">
                  <h4 className="font-medium text-foreground">{displayName}</h4>
                  {yearRange && (
                    <p className="text-sm text-muted-foreground flex items-center gap-1">
                      <Calendar className="h-3 w-3" />
                      {yearRange}
                    </p>
                  )}
                  {name.reason && (
                    <p className="text-sm text-muted-foreground italic">{name.reason}</p>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}