import { Trip } from "../../types";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Link } from "react-router-dom";
import { formatDate } from "../../lib/utils";
import { getTravelerState } from "@/services/tripCrudGuards";
import { buildRememberedTripUrl } from "@/services/stepSelectionUrl";

interface TripCardProps {
  trip: Trip;
  isPlanner?: boolean;
}

export function TripCard({ trip, isPlanner = false }: TripCardProps) {
  // Sécuriser l'accès aux données steps
  const approvedDecisions = isPlanner
    ? trip.steps.flatMap((step) => step.validations || []).filter((decision) => decision.status === "approved").length
    : trip.steps.filter((step) => step.validationStatus === "approved").length;
  const totalDecisions = isPlanner ? trip.steps.length * (trip.members?.length || 0) : trip.steps.length;
  const progress = totalDecisions > 0 ? Math.round((approvedDecisions / totalDecisions) * 100) : 0;

  const detailsLink = isPlanner
    ? buildRememberedTripUrl(sessionStorage, "planner", trip.id)
    : `/voyageur/trips/${trip.id}`;

  const DEFAULT_COVER_IMAGE = "https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80";
  const coverImageUrl = trip.coverUrl || DEFAULT_COVER_IMAGE;
  const travelerState = getTravelerState(trip.members?.[0]?.userId || trip.travelerId, trip.travelerEmail, trip.invitationStatus);

  console.log("Trip dans TripCard:", trip.id, trip.title);
  console.log("Cover URL dans TripCard:", trip.coverUrl);

  const handleCardClick = () => {
    console.group('🔄 Navigation vers détails du voyage');
    console.info('Trip ID:', trip.id);
    console.info('Titre:', trip.title);
    console.info('URL de redirection:', detailsLink);
    console.info('Mode:', isPlanner ? 'Travel Planner' : 'Voyageur');
    console.info('Cover URL:', trip.coverUrl);
    console.groupEnd();
  };

  return (
    <Card className="group overflow-hidden transition-transform duration-200 hover:-translate-y-1 hover:shadow-[0_16px_40px_rgba(20,33,61,0.1)]">
      {/* Image de couverture */}
      <div className="relative h-48 w-full overflow-hidden">
        <img
          src={coverImageUrl}
          alt={`${trip.title} cover`}
          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
          loading="lazy"
          onError={(e) => {
            // En cas d'erreur de chargement, utiliser l'image par défaut
            const target = e.target as HTMLImageElement;
            console.warn("Erreur de chargement d'image:", target.src);
            target.src = DEFAULT_COVER_IMAGE;
          }}
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
        <div className="absolute inset-x-0 bottom-0 p-5"><p className="mb-1 text-xs font-bold uppercase tracking-widest text-white/75">{trip.destination}</p><h3 className="line-clamp-1 text-xl font-bold text-white">{trip.title}</h3></div>
      </div>

      <CardHeader className="pb-3 pt-5">
        <CardDescription className="text-sm flex flex-col gap-1">
          <span>
            {formatDate(trip.startDate)} - {formatDate(trip.endDate)}
          </span>
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col gap-4">
          <p className="text-sm font-medium text-muted-foreground">
            {trip.members?.length
              ? `${trip.members.length} voyageur${trip.members.length > 1 ? "s" : ""} associé${trip.members.length > 1 ? "s" : ""}`
              : travelerState === "pending" ? "Invitation en attente" : travelerState === "expired" ? "Invitation expirée" : travelerState === "revoked" ? "Invitation annulée" : "Sans voyageur"}
          </p>
          <div>
            <div className="flex justify-between items-center mb-1 text-sm">
              <span>{isPlanner ? "Avis approuvés" : "Étapes validées"}</span>
              <span className="font-medium">
                {approvedDecisions}/{totalDecisions}
              </span>
            </div>
            <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
              <div
                className="h-full rounded-full bg-[#66A17A]"
                style={{ width: `${progress}%` }}
              ></div>
            </div>
          </div>
          <Button asChild>
            <Link
              to={detailsLink}
              onClick={handleCardClick}
            >
              Voir les détails
            </Link>
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}