"use client";

import { motion, AnimatePresence } from "framer-motion";
import { 
  FileText, 
  TrendingUp, 
  Clock, 
  Calendar as CalendarIcon,
  Target,
  Plus
} from "lucide-react";
import { Card, CardContent } from "@/components/ui/Card";
import { Button } from "@/components/ui/Button";
import JobCard, { Job } from "@/components/jobs/JobCard";

export default function ApplicationsPage() {
  const applicationsData = [
    {
      id: 1,
      name: "Alex Morgan",
      email: "alex.morgan@example.com",
      phone: "+251 911 234 567",
      location: "Addis Ababa",
      position: "Senior Software Engineer",
      appliedDate: "2 hours ago",
      status: "Pending",
      match: 94,
      experience: "6 years",
      skills: ["React", "Node.js", "TypeScript", "Python"],
      image: "AM"
    },
    {
      id: 2,
      name: "Sarah Chen",
      email: "sarah.chen@example.com",
      phone: "+251 922 345 678",
      location: "Remote",
      position: "Product Manager",
      appliedDate: "1 day ago",
      status: "Reviewed",
      match: 87,
      experience: "5 years",
      skills: ["Product Strategy", "Agile", "Leadership"],
      image: "SC"
    },
    {
      id: 3,
      name: "Michael Okonkwo",
      email: "michael.okonkwo@example.com",
      phone: "+251 933 456 789",
      location: "Addis Ababa",
      position: "UI/UX Designer",
      appliedDate: "2 days ago",
      status: "Interview",
      match: 92,
      experience: "4 years",
      skills: ["Figma", "UI Design", "User Research"],
      image: "MO"
    }
  ];

  // Map application data to Job interface
  const applications: Job[] = applicationsData.map(app => ({
    id: app.id,
    title: app.name,
    company: app.position,
    location: app.location,
    postedTime: app.appliedDate,
    description: `Experienced professional with expertise in ${app.skills.slice(0, 3).join(", ")}. Highly motivated and result-oriented candidate.`,
    skills: app.skills,
    experience: app.experience,
    jobType: "Full-time",
    deadline: "",
    verified: true,
    matchScore: app.match,
    avatarInitials: app.image,
    status: app.status,
    isApplicant: true
  }));

  const stats = [
    { label: "Total Apps", value: applications.length, icon: FileText, color: "sky" },
    { label: "Pending Review", value: applications.filter(a => a.status === "Pending").length, icon: Clock, color: "amber" },
    { label: "Scheduled", value: applications.filter(a => a.status === "Interview").length, icon: CalendarIcon, color: "emerald" }
  ];

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.1 }
    }
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 15 },
    visible: { opacity: 1, y: 0 }
  };

  return (
    <div className="max-w-5xl mx-auto px-4 py-8 space-y-10 pb-24">
      {/* Header Section */}
      <motion.div 
        initial={{ opacity: 0, y: -10 }}
        animate={{ opacity: 1, y: 0 }}
        className="flex flex-col md:flex-row md:items-end justify-between gap-4"
      >
        <div className="space-y-1">
          <h1 className="text-3xl font-black text-slate-900 tracking-tight">Applicant Hub</h1>
          <p className="text-slate-500 font-bold text-xs">Track and review your candidate pipeline.</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" className="rounded-full px-5 h-10 text-slate-500 font-black uppercase text-[9px] tracking-widest bg-white border-slate-200">
            Export
          </Button>
          <Button variant="dark" leftIcon={<Plus className="w-3.5 h-3.5" />} className="rounded-full px-5 h-10 shadow-xl shadow-sky-900/10 font-black uppercase text-[9px] tracking-widest">
            New Role
          </Button>
        </div>
      </motion.div>

      {/* Floating Stats bar */}
      <motion.div 
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="grid grid-cols-1 md:grid-cols-3 gap-4"
      >
        {stats.map((stat) => (
          <motion.div key={stat.label} variants={itemVariants}>
            <Card variant="dark" className="border-none shadow-lg shadow-sky-900/5 rounded-[2rem] overflow-hidden group">
              <CardContent className="p-5 flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="p-2.5 bg-white/10 rounded-xl">
                    <stat.icon className="w-4 h-4 text-sky-300" />
                  </div>
                  <div>
                    <p className="text-[9px] font-black text-sky-300/40 uppercase tracking-widest leading-none mb-1">{stat.label}</p>
                    <p className="text-xl font-black text-white leading-none tracking-tight">{stat.value}</p>
                  </div>
                </div>
                <div className="p-1.5 bg-sky-500/10 rounded-full">
                  <TrendingUp className="w-3.5 h-3.5 text-sky-400" />
                </div>
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </motion.div>

      {/* Main Content */}
      <div className="space-y-6">
        {/* Applicant Count */}
        <div className="flex items-center px-2">
          <p className="text-[9px] font-black text-slate-400 uppercase tracking-widest">
            Showing <span className="text-slate-900">{applications.length}</span> active candidates
          </p>
        </div>

        {/* Applicant List */}
        <motion.div
          variants={containerVariants}
          initial="hidden"
          animate="visible"
          className="space-y-4"
        >
          <AnimatePresence mode="popLayout">
            {applications.map((app) => (
              <JobCard key={app.id} job={app} onViewDetails={(id) => console.log("Review", id)} />
            ))}
          </AnimatePresence>
        </motion.div>

        {/* AI Insights Card */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.6 }}
          className="pt-6"
        >
          <Card variant="dark" className="border-none rounded-[3rem] shadow-2xl shadow-sky-900/30 overflow-hidden relative group">
            <div className="p-10 flex flex-col md:flex-row items-center justify-between gap-8 overflow-hidden relative group">
              <div className="absolute top-0 right-0 w-64 h-64 bg-emerald-500/10 rounded-full -mr-32 -mt-32 blur-[80px]" />
              <div className="flex items-center gap-8 relative z-10">
                <div className="w-20 h-20 bg-white/10 rounded-[2rem] flex items-center justify-center backdrop-blur-xl border border-white/10 shadow-inner">
                  <Target className="w-8 h-8 text-sky-300" />
                </div>
                <div>
                  <h4 className="text-2xl font-black text-white tracking-tighter">Smart Screening</h4>
                  <p className="text-xs font-bold text-sky-300/60 uppercase tracking-[0.2em] mt-2">AI-prioritized candidate review</p>
                </div>
              </div>
              <Button variant="outline" className="border-white/20 text-white hover:bg-white hover:text-sky-900 px-8 h-12 rounded-full font-black uppercase text-[10px] tracking-widest relative z-10 transition-all">
                Settings
              </Button>
            </div>
          </Card>
        </motion.div>
      </div>
    </div>
  );
}