"use client";

import { useState, useEffect } from "react";
import { Search, Lock } from "lucide-react";
import { Input } from "@/components/ui/input";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { useToast } from "@/components/ui/use-toast";
import { getPublicUrl } from "@/lib/s3";

// Define Mission interface
interface User {
  id: string;
  email: string;
}

interface MissionUser {
  id: string;
  role: string;
  user: User;
}

interface Mission {
  id: string;
  name: string;
  logo?: string;
  logoUrl?: string;
  oddScope: string[];
  niveau: string;
  missionType: string;
  projection: string;
  participation?: string;
  services?: string[];
  createdAt: string;
  creator: User;
  missionUsers: MissionUser[];
  intention?: string;
  isClosed?: boolean;
  closedAt?: string;
}

export default function MissionsPage() {
  const [searchTerm, setSearchTerm] = useState("");
  const [missions, setMissions] = useState<Mission[]>([]);
  const [loading, setLoading] = useState(true);
  const { toast } = useToast();
  
  // Fetch missions from API
  useEffect(() => {
    const fetchMissions = async () => {
      try {
        setLoading(true);
        const response = await fetch('/api/missions');
        if (!response.ok) {
          throw new Error('Failed to fetch missions');
        }
        const data = await response.json();
        // Debug log to check mission data structure including intention
        console.log("Mission data with intention:", data.missions);
        setMissions(data.missions || []);
      } catch (error) {
        console.error('Error fetching missions:', error);
        toast({
          title: "Erreur",
          description: "Impossible de charger les missions",
          variant: "destructive",
        });
      } finally {
        setLoading(false);
      }
    };

    fetchMissions();
  }, []);
  
  // Filter missions based on search term
  const filteredMissions = missions.filter(mission => 
    mission.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    mission.niveau.toLowerCase().includes(searchTerm.toLowerCase()) ||
    mission.missionType.toLowerCase().includes(searchTerm.toLowerCase()) ||
    mission.oddScope.some(scope => scope.toLowerCase().includes(searchTerm.toLowerCase()))
  );
  
  // Function to format date
  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('fr-FR', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric'
    });
  };

  // Function to get mission category and icon
  const getODDInfo = (mission: Mission) => {
    const oddCode = mission.oddScope && mission.oddScope.length > 0 
      ? mission.oddScope[0] 
      : null;
    
    // Extract number from odd code (e.g., "odd-3" -> "3")
    const oddNumber = oddCode ? oddCode.replace('odd-', '') : null;
    
    return {
      number: oddNumber,
      label: oddNumber ? `ODD ${oddNumber}` : "Non catégorisé",
      iconPath: oddNumber ? `/F SDG Icons 2019 WEB/F-WEB-Goal-${oddNumber.padStart(2, '0')}.png` : ""
    };
  };

  // Function to get appropriate badge color based on niveau
  const getNiveauBadgeColor = (niveau: string) => {
    switch(niveau) {
      case 'a': return 'bg-green-100 text-green-800';
      case 'b': return 'bg-blue-100 text-blue-800';
      case 'c': return 'bg-purple-100 text-purple-800';
      case 's': return 'bg-amber-100 text-amber-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  // Function to get full niveau label
  const getNiveauLabel = (niveau: string) => {
    switch(niveau) {
      case 'a': return 'A';
      case 'b': return 'B';
      case 'c': return 'C';
      case 's': return 'S';
      default: return niveau.toUpperCase();
    }
  };

  // Function to get mission type label
  const getMissionTypeLabel = (type: string) => {
    switch(type) {
      case 'remote': return 'À distance';
      case 'onsite': return 'Sur site';
      case 'hybrid': return 'Hybride';
      default: return type;
    }
  };

  // Function to get participation label
  const getParticipationLabel = (participation: string | null | undefined) => {
    console.log("Participation value:", participation); // Debug log
    if (!participation) return 'Non spécifié';
    switch(participation) {
      case 'ouvert': return 'Ouvert';
      case 'volontaire': return 'Ouvert'; // Legacy support
      case 'cooptation': return 'Cooptation';
      default: return participation;
    }
  };

  // Function to get mission duration
  const getDuration = (projection: string) => {
    switch(projection) {
      case 'short': return '< 1 mois';
      case 'medium': return '1-3 mois';
      case 'long': return '> 3 mois';
      default: return projection;
    }
  };
  
  return (
    <div className="flex flex-col h-full w-full bg-white">
      <div className="bg-white border-b border-gray-100 py-3 px-6">
        <div className="flex items-center justify-between">
          <h1 className="text-gray-800 text-base font-medium">Gérez vos missions et opportunités de bénévolat</h1>
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500" />
            <Input
              placeholder="Rechercher une mission..."
              className="h-9 pl-9 pr-3 py-2 text-sm bg-white text-gray-800 border-gray-200 rounded-md w-60"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        </div>
      </div>
      
      <div className="flex-1 overflow-auto bg-gray-50 p-6">
        {loading ? (
          <div className="flex justify-center items-center h-40">
            <div className="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-blue-600"></div>
          </div>
        ) : filteredMissions.length > 0 ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {/* @ts-ignore */}
            {(() => {
              // Debug: Log all mission logos to see what URLs are being used
              console.log("All mission logos:", filteredMissions.map(m => ({
                id: m.id,
                name: m.name,
                logo: m.logo
              })));
              return filteredMissions.map((mission) => {
                const oddInfo = getODDInfo(mission);
                const niveauColor = getNiveauBadgeColor(mission.niveau);
                
                return (
                  <div key={mission.id} className={`bg-white shadow-sm hover:shadow-md transition-shadow duration-200 border overflow-hidden h-full rounded-lg flex flex-col ${mission.isClosed ? 'border-amber-300' : 'border-gray-200'}`}>
                    {/* Card Header with Name and Level */}
                    <div className="px-5 pt-4 pb-3 flex justify-between items-center border-b border-gray-100">
                      <h2 className="text-base font-medium text-gray-900 line-clamp-2 flex-1">{mission.name}</h2>
                      <div className="flex items-center gap-2 ml-2">
                        {/* ODD scope icon moved next to level badge */}
                        {oddInfo.number && (
                          <div className="flex items-center bg-gray-100 p-1 rounded-md">
                            <img 
                              src={oddInfo.iconPath} 
                              alt={oddInfo.label}
                              className="w-8 h-8" 
                              onError={(e) => {
                                // Fallback if image fails to load
                                (e.target as HTMLImageElement).style.display = 'none';
                              }}
                            />
                          </div>
                        )}
                        <span className={`flex-shrink-0 text-sm font-bold px-2.5 py-1.5 rounded-md ${niveauColor}`}>
                          {getNiveauLabel(mission.niveau)}
                        </span>
                      </div>
                    </div>
                    
                    {/* Centered Logo */}
                    <div className="flex justify-center items-center p-6 flex-grow">
                      <div className="w-48 h-48 relative">
                        {mission.logoUrl ? (
                          <img 
                            src={mission.logoUrl} 
                            alt={mission.name}
                            className="w-full h-full object-cover rounded-md"
                            onError={(e) => {
                              console.error("Logo failed to load:", {
                                missionId: mission.id,
                                missionName: mission.name,
                                logoUrl: mission.logoUrl,
                                logoPath: mission.logo
                              });
                              // If the image fails to load, show the fallback
                              (e.currentTarget as HTMLImageElement).style.display = 'none';
                              // Show the fallback div
                              const fallbackDiv = e.currentTarget.parentElement?.querySelector('.logo-fallback');
                              if (fallbackDiv) {
                                (fallbackDiv as HTMLElement).style.display = 'flex';
                              }
                            }}
                          />
                        ) : null}
                        <div 
                          className={`logo-fallback w-full h-full flex items-center justify-center bg-gray-100 rounded-md text-gray-500 text-4xl font-medium ${mission.logo ? 'hidden' : ''}`}
                        >
                          {mission.name.slice(0, 2).toUpperCase()}
                        </div>
                      </div>
                    </div>
                      
                    {/* Card Content - Services and Description */}
                    <div className="px-5 pb-3">
                      {/* Services section */}
                      {mission.services && mission.services.length > 0 && (
                        <div>
                          <span className="text-sm font-medium text-gray-700 block mb-1">Services:</span>
                          <div className="flex flex-wrap gap-1.5 mb-3">
                            {mission.services.map(service => (
                              <span key={service} className="bg-blue-50 text-blue-700 px-2 py-1 rounded-md text-xs font-medium">
                                {service}
                              </span>
                            ))}
                          </div>
                        </div>
                      )}
                      
                      {/* Description text (can be added from mission data) */}
                      <div className="mt-2 text-sm text-gray-600 line-clamp-2">
                        {mission.intention ? 
                          (mission.intention.substring(0, 100) + (mission.intention.length > 100 ? '...' : '')) : 
                          'Pas de description disponible.'}
                      </div>
                    </div>
                      
                    {/* Card Footer */}
                    <div className={`mt-auto px-5 py-3 border-t flex justify-between items-center ${mission.isClosed ? 'bg-amber-50 border-amber-200' : 'bg-gray-50 border-gray-100'}`}>
                      <div className="flex flex-col gap-1">
                        <span className="text-xs text-gray-500">
                          Créée le {formatDate(mission.createdAt)}
                        </span>
                        {mission.isClosed && (
                          <span className="flex items-center gap-1 text-xs font-medium text-amber-700">
                            <Lock className="h-3 w-3" />
                            Clôturée
                          </span>
                        )}
                      </div>
                      
                      <Link href={`/missions/${mission.id}`}>
                        <Button className="bg-blue-600 hover:bg-blue-700 text-white text-xs px-3 py-1 h-7 rounded-md">
                          Voir détails
                        </Button>
                      </Link>
                    </div>
                  </div>
                );
              });
            })()}
          </div>
        ) : (
          <div className="text-center py-16 px-6 bg-white rounded-lg border border-gray-200 shadow-sm">
            <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Search className="h-8 w-8 text-gray-400" />
            </div>
            <h3 className="text-lg font-medium text-gray-900 mb-2">Aucune mission trouvée</h3>
            <p className="text-gray-500 mb-6 max-w-md mx-auto">
              Créez votre première mission pour commencer à organiser vos projets et inviter des participants.
            </p>
            <Link href="/missions/new">
              <Button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2">
                Créer une nouvelle mission
              </Button>
            </Link>
          </div>
        )}
      </div>
    </div>
  );
}