"use client";

import { useState } from "react";
import { Plus, Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import Link from "next/link";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

// Mock mission data until we implement the database
const mockMissions = [
  {
    id: 1,
    title: "Développement d'une application web",
    category: "Technology",
    location: "Remote",
    skills: ["React", "Node.js", "MongoDB"],
    duration: "1-3 months",
    createdAt: "2023-05-15"
  },
  {
    id: 2,
    title: "Conception d'identité visuelle",
    category: "Design",
    location: "Paris",
    skills: ["Adobe Photoshop", "Illustrator", "UI/UX"],
    duration: "< 1 month",
    createdAt: "2023-06-02"
  },
  {
    id: 3,
    title: "Traduction de documentation technique",
    category: "Writing",
    location: "Hybrid",
    skills: ["Translation", "Technical Writing", "English"],
    duration: "> 3 months",
    createdAt: "2023-06-10"
  }
];

export default function MissionsPage() {
  const [searchTerm, setSearchTerm] = useState("");
  
  const filteredMissions = mockMissions.filter(mission => 
    mission.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
    mission.category.toLowerCase().includes(searchTerm.toLowerCase()) ||
    mission.skills.some(skill => skill.toLowerCase().includes(searchTerm.toLowerCase()))
  );
  
  return (
    <div className="p-6">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
        <div>
          <h1 className="text-2xl font-bold">Mes Missions</h1>
          <p className="text-gray-500 mt-1">Gérez vos missions et opportunités de bénévolat</p>
        </div>
        
        <div className="flex gap-3 w-full md:w-auto">
          <div className="relative flex-1 md:w-64">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
            <Input
              placeholder="Rechercher une mission..."
              className="pl-9 w-full"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          <Link href="/missions/new">
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Nouvelle Mission
            </Button>
          </Link>
        </div>
      </div>
      
      {filteredMissions.length > 0 ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredMissions.map(mission => (
            <Card key={mission.id} className="overflow-hidden">
              <CardHeader className="pb-3">
                <div className="flex justify-between">
                  <Badge className="mb-2">{mission.category}</Badge>
                  <Badge variant="outline">{mission.duration}</Badge>
                </div>
                <CardTitle className="text-lg">{mission.title}</CardTitle>
                <CardDescription className="flex items-center mt-1">
                  <span>Location: {mission.location}</span>
                </CardDescription>
              </CardHeader>
              <CardContent className="pb-3">
                <div className="flex flex-wrap gap-1">
                  {mission.skills.map(skill => (
                    <Badge key={skill} variant="secondary" className="text-xs">
                      {skill}
                    </Badge>
                  ))}
                </div>
              </CardContent>
              <CardFooter className="border-t pt-3 flex justify-between">
                <span className="text-xs text-gray-500">
                  Créée le {new Date(mission.createdAt).toLocaleDateString('fr-FR')}
                </span>
                <Link href={`/missions/${mission.id}`}>
                  <Button variant="outline" size="sm">Voir details</Button>
                </Link>
              </CardFooter>
            </Card>
          ))}
        </div>
      ) : (
        <div className="text-center py-12">
          <h3 className="text-lg font-medium text-gray-900">Aucune mission trouvée</h3>
          <p className="mt-1 text-sm text-gray-500">
            Utilisez le bouton "Nouvelle Mission" pour créer votre première mission.
          </p>
        </div>
      )}
    </div>
  );
}