"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";

// 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="flex flex-col h-full">
      <div className="flex justify-between items-center bg-black/30 py-[6px] px-4">
        <h1 className="text-white text-xs font-normal">Gérez vos missions et opportunités de bénévolat</h1>
        <div className="flex items-center gap-2">
          <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-0 rounded-none w-48"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          <Link href="/missions/new">
            <Button className="h-8 rounded-none bg-blue-600 hover:bg-blue-700 text-white px-3 py-0 text-xs">
              <Plus className="h-3.5 w-3.5 mr-1" />
              Nouvelle Mission
            </Button>
          </Link>
        </div>
      </div>
      
      <div 
        className="flex-1 bg-cover bg-center p-0 overflow-auto"
        style={{
          backgroundImage: "url('https://images.unsplash.com/photo-1483921020237-2ff51e8e4b22?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80')"
        }}
      >
        <div className="grid grid-cols-1 md:grid-cols-3 gap-0 p-0">
          {filteredMissions.map((mission, index) => (
            <div key={mission.id} className="p-4">
              <div className="bg-white shadow-md overflow-hidden h-full">
                <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">
                      {mission.category}
                    </span>
                    <span className="text-xs text-gray-500 px-2 py-1 border border-gray-200 rounded-sm font-normal">
                      {mission.duration}
                    </span>
                  </div>
                  
                  <div className="px-4 pb-4">
                    <h2 className="text-base font-medium mb-2">{mission.title}</h2>
                    <p className="text-sm text-gray-600 mb-4">Location: {mission.location}</p>
                    
                    <div className="flex flex-wrap gap-1 mb-4">
                      {mission.skills.map(skill => (
                        <span key={skill} className="bg-gray-100 text-gray-700 px-2 py-1 rounded-sm text-xs">
                          {skill}
                        </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 {mission.createdAt.replace('2023-', '')}
                    </span>
                    <Link href={`/missions/${mission.id}`}>
                      <Button className="bg-black text-white text-xs px-3 py-1 h-6 rounded-none">
                        Voir détails
                      </Button>
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
} 