import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { History } from 'lucide-react';
import { RideNameHistory } from '@/types/database';
import { format } from 'date-fns';
import { parseDateForDisplay } from '@/lib/dateUtils';

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

interface FormerNamesProps {
  formerNames?: FormerName[];
  nameHistory?: RideNameHistory[]; // New relational data
  currentName: string;
}

export function FormerNames({ formerNames, nameHistory, currentName }: FormerNamesProps) {
  // Use new relational data if available, fallback to legacy JSON
  const names = nameHistory || formerNames;
  
  if (!names || names.length === 0) {
    return null;
  }
  
  // Normalize data structure
  const normalizedNames = names.map((item) => {
    if ('former_name' in item) {
      // New relational format (RideNameHistory)
      return {
        name: item.former_name,
        date_changed: item.date_changed,
        reason: item.reason,
        from_year: item.from_year,
        to_year: item.to_year,
        order: item.order_index,
      };
    } else {
      // Legacy JSON format (FormerName)
      return {
        name: item.name,
        from_year: item.from_year,
        to_year: item.to_year,
        order: 0,
      };
    }
  }).sort((a, b) => a.order - b.order);

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <History className="w-5 h-5" />
          Ride History
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          <div className="flex items-start gap-3">
            <div className="flex-shrink-0 w-2 h-2 mt-2 rounded-full bg-primary" />
            <div className="flex-1">
              <div className="font-medium">{currentName}</div>
              <div className="text-sm text-muted-foreground">Current name</div>
            </div>
            <Badge variant="default">Current</Badge>
          </div>

          {normalizedNames.map((former, index) => (
            <div key={index} className="flex items-start gap-3">
              <div className="flex-shrink-0 w-2 h-2 mt-2 rounded-full bg-muted-foreground" />
              <div className="flex-1">
                <div className="font-medium">{former.name}</div>
                <div className="text-sm text-muted-foreground space-y-1">
                  {(former.from_year || former.to_year) && (
                    <div>
                      {former.from_year && former.to_year 
                        ? `${former.from_year} - ${former.to_year}`
                        : former.from_year 
                        ? `Since ${former.from_year}`
                        : `Until ${former.to_year}`
                      }
                    </div>
                  )}
                  {former.date_changed && (
                    <div>Changed: {format(parseDateForDisplay(former.date_changed), 'MMM d, yyyy')}</div>
                  )}
                  {former.reason && (
                    <div className="italic">{former.reason}</div>
                  )}
                </div>
              </div>
              <Badge variant="outline">Former</Badge>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}