"use client";

import { useState } from "react";
import { Input } from "@/Components/ui/input";
import { Button } from "@/Components/ui/button";
import {Link} from "@inertiajs/react";

interface Annonce {
  id: number;
  title: string;
  category: string;
  date: string;
  status: string;
}

const annonces: Annonce[] = [
  { id: 1, title: "Création de société - SARL", category: "Constitution", date: "12/10/2025", status: "Publié" },
  { id: 2, title: "Changement de gérant", category: "Modification", date: "15/10/2025", status: "En attente" },
  { id: 3, title: "Cessation d’activité", category: "Cessation", date: "18/10/2025", status: "Publié" },
  { id: 4, title: "Augmentation de capital", category: "Modification", date: "20/10/2025", status: "Rejeté" },
];

export default function AnnoncesPage() {
  const [search, setSearch] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("");
  const [selectedStatus, setSelectedStatus] = useState("");

  const filteredAnnonces = annonces.filter(
    (annonce) =>
      annonce.title.toLowerCase().includes(search.toLowerCase()) &&
      (selectedCategory ? annonce.category === selectedCategory : true) &&
      (selectedStatus ? annonce.status === selectedStatus : true)
  );

  return (
    <section className="container mx-auto px-4 py-10">
      <h2 className="text-3xl font-bold mb-6 text-gray-800">Liste des annonces</h2>

      {/* Filters */}
      <div className="mb-4 flex flex-wrap items-center gap-4">
        <Input
          type="text"
          placeholder="Rechercher une annonce..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="w-full md:w-1/3 p-2 border rounded-lg"
        />

        {/* Category Filter */}
        <select
          className="border p-2 rounded-md"
          value={selectedCategory}
          onChange={(e) => setSelectedCategory(e.target.value)}
        >
          <option value="">Toutes catégories</option>
          <option value="Constitution">Constitution</option>
          <option value="Modification">Modification</option>
          <option value="Cessation">Cessation</option>
        </select>

        {/* Status Filter */}
        <select
          className="border p-2 rounded-md"
          value={selectedStatus}
          onChange={(e) => setSelectedStatus(e.target.value)}
        >
          <option value="">Tous les statuts</option>
          <option value="Publié">Publié</option>
          <option value="En attente">En attente</option>
          <option value="Rejeté">Rejeté</option>
        </select>

        <Button className="bg-red-600">Publier une annonce</Button>
      </div>

      {/* Table */}
      <div className="overflow-x-auto bg-white shadow-lg rounded-lg">
        <table className="w-full border-collapse">
          <thead>
            <tr className="bg-gray-100 text-gray-700 text-left">
              <th className="p-4">Titre</th>
              <th className="p-4">Catégorie</th>
              <th className="p-4">Date de parution</th>
              <th className="p-4">Statut</th>
              <th className="p-4 text-center">Actions</th>
            </tr>
          </thead>
          <tbody>
            {filteredAnnonces.map((annonce) => (
              <tr key={annonce.id} className="border-b hover:bg-gray-50 transition">
                <td className="p-4">
                  <Link href={`/annonces/${annonce.id}`} className="text-blue-600 hover:underline">
                    {annonce.title}
                  </Link>
                </td>
                <td className="p-4">{annonce.category}</td>
                <td className="p-4">{annonce.date}</td>
                <td
                  className={`p-4 font-semibold ${annonce.status === "Publié"
                      ? "text-green-600"
                      : annonce.status === "En attente"
                        ? "text-yellow-600"
                        : "text-red-600"
                    }`}
                >
                  {annonce.status}
                </td>
                <td className="p-4 flex space-x-2 justify-center">
                  <Link href={`/annonces/${annonce.id}`}>
                    <Button size="sm" variant="outline">Voir</Button>
                  </Link>
                  <Button size="sm" className="bg-blue-600">
                    Modifier
                  </Button>
                </td>
              </tr>
            ))}
            {filteredAnnonces.length === 0 && (
              <tr>
                <td colSpan={5} className="p-4 text-center text-gray-500">
                  Aucune annonce trouvée.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </section>
  );
}