"use client"

import { useEffect, useState } from "react"
import { db } from "@/lib/firebase"
import { collection, getDocs, updateDoc, doc } from "firebase/firestore"
import { motion, AnimatePresence } from "framer-motion"
import { 
  Search, 
  Filter, 
  CheckCircle, 
  XCircle, 
  Clock, 
  Calendar,
  User,
  Mail,
  Store,
  ChevronDown,
  Loader2,
  Phone
} from "lucide-react"

type Meeting = {
  id: string
  nom: string
  email: string
  telephone: string
  restaurant: string
  date: string
  status: "nouveau" | "terminé" | "absent"
  attended: boolean
  createdAt?: any
}

export default function MeetingsAdmin() {
  const [meetings, setMeetings] = useState<Meeting[]>([])
  const [filteredMeetings, setFilteredMeetings] = useState<Meeting[]>([])
  const [loading, setLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState<string>("tous")
  const [sortBy, setSortBy] = useState<"date" | "nom">("date")
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc")
  const [stats, setStats] = useState({
    total: 0,
    aujourdhui: 0,
    nouveau: 0,
    termine: 0,
    absent: 0,
  })

  const loadMeetings = async () => {
    setLoading(true)
    try {
      const snap = await getDocs(collection(db, "meetings"))
      const data: Meeting[] = []
      snap.forEach((d) => {
        data.push({ id: d.id, ...d.data() } as Meeting)
      })
      setMeetings(data)
    } catch (error) {
      console.error("Error loading meetings:", error)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    loadMeetings()
  }, [])

  // Update filtered meetings and stats when meetings, search, filter, or sort change
  useEffect(() => {
    let filtered = [...meetings]

    // Apply search
    if (searchTerm) {
      const term = searchTerm.toLowerCase()
      filtered = filtered.filter(
        (m) =>
          m.nom?.toLowerCase().includes(term) ||
          m.email?.toLowerCase().includes(term) ||
          m.telephone?.toLowerCase().includes(term) ||
          m.restaurant?.toLowerCase().includes(term)
      )
    }

    // Apply status filter
    if (statusFilter !== "tous") {
      filtered = filtered.filter((m) => m.status === statusFilter)
    }

    // Apply sorting
    filtered.sort((a, b) => {
      if (sortBy === "date") {
        const dateA = new Date(a.date).getTime()
        const dateB = new Date(b.date).getTime()
        return sortOrder === "asc" ? dateA - dateB : dateB - dateA
      } else {
        const nameA = a.nom?.toLowerCase() || ""
        const nameB = b.nom?.toLowerCase() || ""
        return sortOrder === "asc"
          ? nameA.localeCompare(nameB)
          : nameB.localeCompare(nameA)
      }
    })

    setFilteredMeetings(filtered)

    // Update stats
    const today = new Date().toDateString()
    const stats = {
      total: meetings.length,
      aujourdhui: meetings.filter((m) => new Date(m.date).toDateString() === today).length,
      nouveau: meetings.filter((m) => m.status === "nouveau").length,
      termine: meetings.filter((m) => m.status === "terminé").length,
      absent: meetings.filter((m) => m.status === "absent").length,
    }
    setStats(stats)
  }, [meetings, searchTerm, statusFilter, sortBy, sortOrder])

  const markAttended = async (id: string) => {
    try {
      await updateDoc(doc(db, "meetings", id), {
        attended: true,
        status: "terminé",
      })
      loadMeetings()
    } catch (error) {
      console.error(error)
    }
  }

  const markAbsent = async (id: string) => {
    try {
      await updateDoc(doc(db, "meetings", id), {
        attended: false,
        status: "absent",
      })
      loadMeetings()
    } catch (error) {
      console.error(error)
    }
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "nouveau":
        return (
          <span className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200">
            <Clock className="w-3 h-3" /> Nouveau
          </span>
        )
      case "terminé":
        return (
          <span className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-200">
            <CheckCircle className="w-3 h-3" /> Terminé
          </span>
        )
      case "absent":
        return (
          <span className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 border border-red-200">
            <XCircle className="w-3 h-3" /> Absent
          </span>
        )
      default:
        return null
    }
  }

  const formatDate = (dateStr: string) => {
    const date = new Date(dateStr)
    return new Intl.DateTimeFormat("fr-FR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    }).format(date)
  }

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="min-h-screen flex flex-col bg-gradient-to-br from-blue-50 via-white to-white text-gray-900"
    >
      {/* Light background orbs */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none">
        <div className="absolute -top-40 -right-40 w-96 h-96 bg-blue-200/40 rounded-full blur-3xl" />
        <div className="absolute -bottom-40 -left-40 w-96 h-96 bg-purple-200/40 rounded-full blur-3xl" />
      </div>

      <main className="flex-grow relative z-10 px-4 sm:px-6 lg:px-8 py-12 max-w-7xl mx-auto w-full">
        <motion.div
          initial={{ y: 20, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.5 }}
          className="space-y-8"
        >
          {/* Header */}
          <div className="text-center">
            <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-3">
              Rendez-vous programmés
            </h1>
            <p className="text-gray-600 text-lg">
              Gérez les demandes de démonstration
            </p>
          </div>

          {/* Stats cards */}
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            {[
              { label: "Total", value: stats.total, icon: Calendar, color: "blue" },
              { label: "Aujourd'hui", value: stats.aujourdhui, icon: Clock, color: "purple" },
              { label: "Nouveaux", value: stats.nouveau, icon: Clock, color: "blue" },
              { label: "Terminés", value: stats.termine, icon: CheckCircle, color: "green" },
              { label: "Absents", value: stats.absent, icon: XCircle, color: "red" },
            ].map((stat, idx) => (
              <motion.div
                key={stat.label}
                initial={{ scale: 0.9, opacity: 0 }}
                animate={{ scale: 1, opacity: 1 }}
                transition={{ delay: idx * 0.1 }}
                className="bg-white rounded-2xl p-4 shadow-md border border-gray-100 hover:shadow-lg transition-shadow"
              >
                <div className="flex items-center gap-3">
                  <div className={`p-3 rounded-xl bg-${stat.color}-100 text-${stat.color}-600`}>
                    <stat.icon className="w-5 h-5" />
                  </div>
                  <div>
                    <p className="text-2xl font-bold">{stat.value}</p>
                    <p className="text-xs text-gray-500">{stat.label}</p>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>

          {/* Filters and search */}
          <div className="flex flex-col sm:flex-row gap-4 items-center justify-between">
            <div className="flex items-center gap-2 w-full sm:w-auto">
              <div className="relative flex-1 sm:flex-initial">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
                <input
                  type="text"
                  placeholder="Rechercher..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="w-full sm:w-64 pl-9 pr-4 py-2 bg-white border border-gray-200 rounded-xl focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all text-gray-900"
                />
              </div>
              <div className="relative">
                <select
                  value={statusFilter}
                  onChange={(e) => setStatusFilter(e.target.value)}
                  className="appearance-none pl-4 pr-10 py-2 bg-white border border-gray-200 rounded-xl focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all text-gray-900"
                >
                  <option value="tous">Tous les statuts</option>
                  <option value="nouveau">Nouveau</option>
                  <option value="terminé">Terminé</option>
                  <option value="absent">Absent</option>
                </select>
                <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
              </div>
            </div>

            <div className="flex items-center gap-2">
              <span className="text-sm text-gray-500">Trier par:</span>
              <button
                onClick={() => {
                  if (sortBy === "date") setSortOrder(sortOrder === "asc" ? "desc" : "asc")
                  else setSortBy("date")
                }}
                className={`px-3 py-1 rounded-lg text-sm ${
                  sortBy === "date"
                    ? "bg-blue-600 text-white"
                    : "bg-white text-gray-700 border border-gray-200 hover:bg-gray-50"
                } transition-colors flex items-center gap-1`}
              >
                Date {sortBy === "date" && (sortOrder === "asc" ? "↑" : "↓")}
              </button>
              <button
                onClick={() => {
                  if (sortBy === "nom") setSortOrder(sortOrder === "asc" ? "desc" : "asc")
                  else setSortBy("nom")
                }}
                className={`px-3 py-1 rounded-lg text-sm ${
                  sortBy === "nom"
                    ? "bg-blue-600 text-white"
                    : "bg-white text-gray-700 border border-gray-200 hover:bg-gray-50"
                } transition-colors flex items-center gap-1`}
              >
                Nom {sortBy === "nom" && (sortOrder === "asc" ? "↑" : "↓")}
              </button>
            </div>
          </div>

          {/* Meetings list */}
          {loading ? (
            <div className="flex justify-center py-20">
              <Loader2 className="w-10 h-10 text-blue-500 animate-spin" />
            </div>
          ) : filteredMeetings.length === 0 ? (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              className="text-center py-20 bg-white rounded-3xl shadow-sm border border-gray-100"
            >
              <Calendar className="w-16 h-16 text-gray-300 mx-auto mb-4" />
              <p className="text-xl text-gray-500">Aucun rendez-vous trouvé</p>
            </motion.div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <AnimatePresence>
                {filteredMeetings.map((meeting, idx) => (
                  <motion.div
                    key={meeting.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, scale: 0.9 }}
                    transition={{ delay: idx * 0.05 }}
                    layout
                    className="bg-white rounded-2xl p-6 shadow-md border border-gray-100 hover:shadow-lg transition-shadow"
                  >
                    <div className="flex justify-between items-start mb-4">
                      <div className="space-y-1">
                        <h3 className="font-semibold text-lg flex items-center gap-2 text-gray-900">
                          <User className="w-4 h-4 text-blue-500" />
                          {meeting.nom}
                        </h3>
                        <p className="text-sm text-gray-600 flex items-center gap-2">
                          <Mail className="w-4 h-4" />
                          {meeting.email}
                        </p>
                        <p className="text-sm text-gray-600 flex items-center gap-2">
                          <Phone className="w-4 h-4" />
                          {meeting.telephone}
                        </p>
                        <p className="text-sm text-gray-600 flex items-center gap-2">
                          <Store className="w-4 h-4" />
                          {meeting.restaurant}
                        </p>
                      </div>
                      {getStatusBadge(meeting.status)}
                    </div>

                    <div className="border-t border-gray-100 my-4 pt-4">
                      <p className="text-sm flex items-center gap-2 text-gray-700">
                        <Calendar className="w-4 h-4 text-purple-500" />
                        {formatDate(meeting.date)}
                      </p>
                    </div>

                    {meeting.status === "nouveau" && (
                      <div className="flex gap-3 mt-4">
                        <button
                          onClick={() => markAttended(meeting.id)}
                          className="flex-1 flex items-center justify-center gap-2 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-xl text-sm font-medium transition-colors shadow-sm"
                        >
                          <CheckCircle className="w-4 h-4" />
                          Présent
                        </button>
                        <button
                          onClick={() => markAbsent(meeting.id)}
                          className="flex-1 flex items-center justify-center gap-2 bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-xl text-sm font-medium transition-colors shadow-sm"
                        >
                          <XCircle className="w-4 h-4" />
                          Absent
                        </button>
                      </div>
                    )}

                    {meeting.status !== "nouveau" && (
                      <div className="mt-4 text-center text-sm text-gray-400 italic">
                        Action déjà effectuée
                      </div>
                    )}
                  </motion.div>
                ))}
              </AnimatePresence>
            </div>
          )}
        </motion.div>
      </main>
    </motion.div>
  )
}