"use client";

import { useState, useEffect } from "react";
import { Search } 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";

// 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;
  oddScope: string[];
  niveau: string;
  missionType: string;
  projection: string;
  createdAt: string;
  creator: User;
  missionUsers: MissionUser[];
}

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();
        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
  const getCategory = (mission: Mission) => {
    return mission.oddScope && mission.oddScope.length > 0 
      ? mission.oddScope[0].replace('odd-', 'ODD ') 
      : "Non catégorisé";
  };

  // 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-2 px-4">
        <div className="flex items-center justify-between">
          <h1 className="text-gray-700 text-sm font-medium">Gérez vos missions et opportunités de bénévolat</h1>
          <div className="relative">
            <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-3.5 w-3.5 text-gray-500" />
            <Input
              placeholder="Rechercher une mission..."
              className="h-8 pl-7 pr-2 py-1 text-xs bg-white border-gray-200 rounded-sm w-48"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        </div>
      </div>
      
      <div className="flex-1 overflow-auto bg-white p-4">
        {loading ? (
          <div className="flex justify-center items-center h-40">
            <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-gray-900"></div>
          </div>
        ) : filteredMissions.length > 0 ? (
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {filteredMissions.map((mission) => (
              <div key={mission.id} className="bg-white shadow-sm border border-gray-200 overflow-hidden h-full rounded-sm">
                <div className="p-0">
                  <div className="flex justify-between items-center px-4 pt-4 pb-2">
                    <span className="bg-gray-100 px-2 py-1 text-xs rounded-sm font-normal text-gray-800">
                      {getCategory(mission)}
                    </span>
                    <span className="text-xs text-gray-500 px-2 py-1 border border-gray-200 rounded-sm font-normal">
                      {getDuration(mission.projection)}
                    </span>
                  </div>
                  
                  <div className="px-4 pb-4">
                    <h2 className="text-base font-medium mb-2">{mission.name}</h2>
                    <p className="text-sm text-gray-600 mb-4">Type: {mission.missionType}</p>
                    
                    <div className="flex flex-wrap gap-1 mb-4">
                      {mission.missionUsers.slice(0, 3).map(missionUser => (
                        <span key={missionUser.id} className="bg-gray-100 text-gray-700 px-2 py-1 rounded-sm text-xs">
                          {missionUser.role === 'gardien-temps' ? 'Gardien du Temps' : 
                           missionUser.role === 'gardien-parole' ? 'Gardien de la Parole' :
                           missionUser.role === 'gardien-memoire' ? 'Gardien de la Mémoire' : 'Volontaire'}
                        </span>
                      ))}
                    </div>
                  </div>
                  
                  <div className="flex justify-between items-center px-4 py-2 border-t border-gray-100">
                    <span className="text-xs text-gray-500">
                      Créée le {formatDate(mission.createdAt)}
                    </span>
                    <Link href={`/missions/${mission.id}`}>
                      <Button className="bg-black text-white text-xs px-3 py-1 h-6 rounded-sm">
                        Voir détails
                      </Button>
                    </Link>
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-center p-8">
            <p className="text-gray-500">Aucune mission trouvée</p>
            <Link href="/missions/new">
              <Button className="mt-4 bg-blue-600 text-white">
                Créer une nouvelle mission
              </Button>
            </Link>
          </div>
        )}
      </div>
    </div>
  );
}