import { TripMember, TripStep } from "@/types";
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Link, MapPin } from "lucide-react";
import { StepStatusBadge } from "../StepStatusBadge";
import { getStepTypeById } from "@/types/stepTypes";
import { PlannerStepValidations } from "../PlannerStepValidations";

interface StepCardContentProps {
  step: TripStep;
  pendingStatus: 'validating' | 'rejecting' | 'publishing' | 'unpublishing' | null;
  dayDate?: string | null;
  stepTypeIcon?: React.ReactNode;
  isPlanner: boolean;
  members?: TripMember[];
}

export function StepCardContent({ step, pendingStatus, dayDate, stepTypeIcon, isPlanner, members }: StepCardContentProps) {
  const stepType = step.stepType || 'activity';
  const stepTypeInfo = getStepTypeById(stepType);

  // Format time to display
  const displayTime = step.startTime || step.time || '';

  // Format price to display
  const displayPrice = typeof step.price === 'number' ? `${step.price} €` : step.price;

  // Fonction pour rendre le lieu cliquable via Google Maps
  const getGoogleMapsUrl = (location: string) => {
    return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(location)}`;
  };

  // Build specific content based on step type
  const renderSpecificDetails = () => {
    switch(stepType) {
      case 'transport':
        return (
          <div className="text-xs space-y-1">
            {step.transportType && <Badge variant="outline">{step.transportType}</Badge>}
            {step.departureName && <div>Départ: {step.departureName}</div>}
            {step.arrivalName && <div>Arrivée: {step.arrivalName}</div>}
            {step.estimatedDuration && <div>Durée: {step.estimatedDuration}</div>}
          </div>
        );
      case 'accommodation':
        return (
          <div className="text-xs space-y-1">
            {step.accommodationName && <div>{step.accommodationName}</div>}
            {step.roomType && <div>Chambre: {step.roomType}</div>}
            {step.checkInTime && <div>Check-in: {step.checkInTime}</div>}
            {step.checkOutTime && <div>Check-out: {step.checkOutTime}</div>}
          </div>
        );
      case 'meal':
        return (
          <div className="text-xs space-y-1">
            {step.restaurantName && <div>{step.restaurantName}</div>}
            {step.cuisineType && <Badge variant="outline">{step.cuisineType}</Badge>}
            {step.budget && <div>Budget: {step.budget}</div>}
          </div>
        );
      case 'activity':
        return (
          <div className="text-xs space-y-1">
            {step.activityType && <Badge variant="outline">{step.activityType}</Badge>}
            {step.walkingLevel && <div>Niveau de marche: {step.walkingLevel}</div>}
            {step.guideName && <div>Guide: {step.guideName}</div>}
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <>
      <CardHeader className="p-3 pb-1">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            {displayTime && (
              <CardTitle className="text-sm font-semibold">{displayTime}</CardTitle>
            )}
            {!isPlanner && <StepStatusBadge
              validationStatus={step.validationStatus}
              pendingStatus={pendingStatus as 'validating' | 'rejecting' | null}
            />}
          </div>
          {stepTypeIcon && (
            <span className="text-lg">{stepTypeIcon}</span>
          )}
        </div>
        <CardTitle className="text-sm sm:text-base flex-grow text-left flex items-center">
          {step.activity}
          {!step.isPublished && (
            <Badge variant="outline" className="ml-2 bg-yellow-100 text-yellow-800 border-yellow-300 text-[10px]">
              Non publié
            </Badge>
          )}
        </CardTitle>
        {step.location && (
          <CardDescription className="flex items-center text-xs mt-1 text-left">
            <MapPin className="h-3 w-3 mr-1" />
            <a
              href={getGoogleMapsUrl(step.location)}
              target="_blank"
              rel="noopener noreferrer"
              className="text-blue-600 hover:underline"
              onClick={(e) => e.stopPropagation()}
            >
              {step.location}
            </a>
          </CardDescription>
        )}
        {dayDate && (
          <CardDescription className="text-xs mt-1 text-left italic">
            {dayDate}
          </CardDescription>
        )}
      </CardHeader>

      <CardContent className="p-3 pt-0 space-y-2 text-left">
        {isPlanner && <PlannerStepValidations validations={step.validations} members={members} />}
        {renderSpecificDetails()}

        <div className="flex flex-wrap gap-2 mt-1">
          {displayPrice && (
            <Badge variant="outline" className="text-xs">Prix: {displayPrice}</Badge>
          )}
          {step.distance && (
            <Badge variant="outline" className="text-xs">Distance: {step.distance}</Badge>
          )}
        </div>

        {step.link && (
          <a
            href={step.link}
            target="_blank"
            rel="noopener noreferrer"
            className="text-xs text-blue-600 hover:underline flex items-center gap-1 mt-1 text-left"
            onClick={(e) => e.stopPropagation()}
          >
            <Link className="h-3 w-3" />
            <span className="truncate">{step.link.replace(/^https?:\/\//, '')}</span>
          </a>
        )}
      </CardContent>
    </>
  );
}