// app/(dashboard)/client/jobs/page.tsx
"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  Briefcase,
  MapPin,
  Calendar,
  Users,
  Eye,
  Edit2,
  Copy,
  Trash2,
  MoreVertical,
  Search,
  Filter,
  ChevronDown,
  TrendingUp,
  Clock,
  Plus,
  ArrowUpRight,
  Target,
  BarChart3,
  Layers,
  Globe,
  Sparkles
} from "lucide-react";
import { Card, CardContent } from "@/components/ui/Card";
import { Button } from "@/components/ui/Button";
import { Badge } from "@/components/ui/Badge";
import { Input } from "@/components/ui/Input";
import { Select } from "@/components/ui/Select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/Table";

export default function ManageJobsPage() {
  const [searchTerm, setSearchTerm] = useState("");
  const [statusFilter, setStatusFilter] = useState("all");

  const jobs = [
    {
      id: 1,
      title: "Senior Software Engineer",
      department: "Engineering",
      location: "Addis Ababa",
      locationType: "onsite",
      type: "Full-time",
      posted: "2024-02-15",
      deadline: "2024-03-15",
      applications: 34,
      views: 234,
      status: "active"
    },
    {
      id: 2,
      title: "Product Manager",
      department: "Product",
      location: "Remote",
      locationType: "remote",
      type: "Full-time",
      posted: "2024-02-10",
      deadline: "2024-03-10",
      applications: 28,
      views: 189,
      status: "active"
    },
    {
      id: 3,
      title: "UI/UX Designer",
      department: "Design",
      location: "Hybrid",
      locationType: "hybrid",
      type: "Contract",
      posted: "2024-02-01",
      deadline: "2024-02-28",
      applications: 52,
      views: 312,
      status: "expired"
    },
    {
      id: 4,
      title: "DevOps Engineer",
      department: "Engineering",
      location: "Addis Ababa",
      locationType: "onsite",
      type: "Full-time",
      posted: "2024-02-05",
      deadline: "2024-03-05",
      applications: 18,
      views: 156,
      status: "draft"
    }
  ];

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "active":
        return <Badge variant="success" className="bg-emerald-50 text-emerald-600 border-emerald-100 font-bold px-3 py-1 rounded-full uppercase text-[10px]">Active</Badge>;
      case "expired":
        return <Badge variant="danger" className="bg-rose-50 text-rose-600 border-rose-100 font-bold px-3 py-1 rounded-full uppercase text-[10px]">Expired</Badge>;
      case "draft":
        return <Badge variant="secondary" className="bg-slate-100 text-slate-500 border-slate-200 font-bold px-3 py-1 rounded-full uppercase text-[10px]">Draft</Badge>;
      default:
        return <Badge variant="primary" className="bg-sky-50 text-sky-600 border-sky-100 font-bold px-3 py-1 rounded-full uppercase text-[10px]">{status}</Badge>;
    }
  };

  const filteredJobs = jobs.filter(job => {
    const matchesSearch = job.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      job.department.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesStatus = statusFilter === "all" || job.status === statusFilter;
    return matchesSearch && matchesStatus;
  });

  const stats = [
    { label: "Total Jobs", value: jobs.length, icon: Briefcase, color: "sky" },
    { label: "Active Now", value: jobs.filter(j => j.status === "active").length, icon: TrendingUp, color: "emerald" },
    { label: "Total Apps", value: jobs.reduce((sum, j) => sum + j.applications, 0), icon: Users, color: "blue" },
    { label: "Profile Views", value: jobs.reduce((sum, j) => sum + j.views, 0), icon: Eye, color: "purple" }
  ];

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

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

  return (
    <div className="space-y-10 pb-20">
      {/* Header */}
      <motion.div
        initial={{ opacity: 0, x: -20 }}
        animate={{ opacity: 1, x: 0 }}
        className="flex flex-col sm:flex-row sm:items-center justify-between gap-6"
      >
        <div>
          <h1 className="text-3xl lg:text-4xl font-black text-slate-900 tracking-tight">Manage Jobs</h1>
          <p className="text-slate-500 font-bold mt-2 uppercase text-[10px] tracking-[0.2em] border-l-2 border-sky-500 pl-4">
            Oversee your active recruitment pipeline
          </p>
        </div>
        <div className="flex items-center gap-3">
          <Button variant="outline" size="sm" className="bg-white border-slate-200 text-slate-600 font-bold rounded-2xl px-6">
            Export Data
          </Button>
          <Button variant="dark" size="sm" leftIcon={<Plus className="w-4 h-4" />} className="px-8 shadow-lg shadow-sky-900/20">
            Post New Job
          </Button>
        </div>
      </motion.div>

      {/* Stats Grid */}
      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"
      >
        {stats.map((stat) => (
          <motion.div key={stat.label} variants={itemVariants}>
            <Card variant="dark" className="border-none shadow-2xl shadow-sky-900/20 rounded-[2.5rem] overflow-hidden group hover:scale-[1.03] transition-all duration-500">
              <CardContent className="p-8 relative">
                <div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -mr-16 -mt-16 group-hover:scale-150 transition-transform duration-700 blur-2xl" />
                <div className="flex flex-col gap-6">
                  <div className="p-4 bg-white/10 rounded-2xl w-fit backdrop-blur-md shadow-inner border border-white/5">
                    <stat.icon className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <p className="text-3xl font-black text-white tracking-tighter">{stat.value}</p>
                    <p className="text-[10px] font-black text-sky-300/60 uppercase tracking-[0.2em] mt-1">{stat.label}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </motion.div>

      {/* Search and Filters */}
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.4 }}
        className="flex flex-col sm:flex-row gap-4"
      >
        <div className="flex-1 relative">
          <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
          <Input
            placeholder="Search by job title or department..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-12 py-6 rounded-2xl border-slate-100 bg-white shadow-sm focus:ring-sky-900 font-bold"
          />
        </div>
        <div className="flex gap-2">
          <div className="relative">
            <Filter className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
              className="pl-12 pr-10 py-3.5 border-2 border-slate-50 bg-white rounded-2xl focus:outline-none focus:border-sky-900 appearance-none font-bold text-slate-700 text-sm transition-all"
            >
              <option value="all">All Status</option>
              <option value="active">Active</option>
              <option value="expired">Expired</option>
              <option value="draft">Draft</option>
            </select>
            <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
          </div>
        </div>
      </motion.div>

      {/* Jobs Table Section */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.5 }}
      >
        <Card className="border-slate-100/50 shadow-2xl shadow-slate-200/50 rounded-[2.5rem] overflow-hidden">
          <Table>
            <TableHeader>
              <TableRow className="hover:bg-transparent border-slate-50">
                <TableHead>Job Role & Department</TableHead>
                <TableHead>Work Mode</TableHead>
                <TableHead>Activity Timeline</TableHead>
                <TableHead>Engagement</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <AnimatePresence mode="popLayout">
                {filteredJobs.map((job) => (
                  <TableRow key={job.id} className="group border-slate-50">
                    <TableCell>
                      <div className="flex items-center gap-4">
                        <div className="p-3 bg-slate-50 rounded-2xl group-hover:bg-sky-50 transition-colors">
                          <Briefcase className="w-5 h-5 text-slate-400 group-hover:text-sky-600" />
                        </div>
                        <div>
                          <p className="font-black text-slate-900 text-sm group-hover:text-sky-900 transition-colors">{job.title}</p>
                          <p className="text-xs font-bold text-slate-400 uppercase tracking-tighter mt-1">{job.department}</p>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-1.5 text-xs font-bold text-slate-600">
                        {job.locationType === "remote" ? <Globe className="w-3 h-3 text-sky-500" /> : <MapPin className="w-3 h-3 text-emerald-500" />}
                        {job.location}
                      </div>
                      <p className="text-[10px] font-black text-slate-400 uppercase mt-1 tracking-widest">{job.locationType}</p>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-2 text-xs font-bold text-slate-600">
                        <Clock className="w-3 h-3 text-slate-400" />
                        Posted {job.posted}
                      </div>
                      <div className="flex items-center gap-2 mt-1">
                        <div className="w-1.5 h-1.5 rounded-full bg-rose-400 animate-pulse" />
                        <p className="text-[10px] font-black text-rose-500 uppercase tracking-tighter">Deadline: {job.deadline}</p>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-4">
                        <div>
                          <p className="font-black text-slate-900 text-sm">{job.applications}</p>
                          <p className="text-[10px] font-black text-slate-400 uppercase tracking-tighter">Apps</p>
                        </div>
                        <div className="w-px h-6 bg-slate-100" />
                        <div>
                          <p className="font-black text-slate-900 text-sm">{job.views}</p>
                          <p className="text-[10px] font-black text-slate-400 uppercase tracking-tighter">Views</p>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      {getStatusBadge(job.status)}
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex items-center justify-end gap-1">
                        <button className="p-2.5 text-slate-400 hover:text-sky-900 hover:bg-sky-50 rounded-xl transition-all" title="View Details">
                          <Eye className="w-4 h-4" />
                        </button>
                        <button className="p-2.5 text-slate-400 hover:text-emerald-600 hover:bg-emerald-50 rounded-xl transition-all" title="Edit Job">
                          <Edit2 className="w-4 h-4" />
                        </button>
                        <button className="p-2.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-all" title="Duplicate">
                          <Copy className="w-4 h-4" />
                        </button>
                        <button className="p-2.5 text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded-xl transition-all" title="Delete">
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </AnimatePresence>
            </TableBody>
          </Table>

          {/* Empty State */}
          {filteredJobs.length === 0 && (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              className="text-center py-24 bg-white"
            >
              <div className="w-24 h-24 bg-slate-50 rounded-[2.5rem] flex items-center justify-center mx-auto mb-6 shadow-inner">
                <Briefcase className="w-10 h-10 text-slate-300" />
              </div>
              <h3 className="text-xl font-black text-slate-900 mb-2">No Matching Jobs Found</h3>
              <p className="text-slate-400 font-bold text-sm mb-8">Try adjusting your filters or search keywords</p>
              <Button variant="dark" size="sm" onClick={() => { setSearchTerm(""); setStatusFilter("all"); }}>
                Clear All Filters
              </Button>
            </motion.div>
          )}
        </Card>
      </motion.div>

      {/* Pro Tip Card */}
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ delay: 0.7 }}
      >
        <Card variant="dark" className="border-none rounded-[2.5rem] shadow-xl shadow-sky-900/20 overflow-hidden relative">
          <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -mr-32 -mt-32 blur-3xl pointer-events-none" />
          <CardContent className="p-8">
            <div className="flex items-center justify-between flex-wrap gap-8">
              <div className="flex items-center gap-5">
                <div className="p-4 bg-white/10 rounded-[1.5rem] shadow-inner backdrop-blur-sm">
                  <Sparkles className="w-6 h-6 text-sky-300" />
                </div>
                <div>
                  <p className="text-base font-black text-white tracking-tight">Optimize Your Listings</p>
                  <p className="text-xs font-bold text-sky-300/60 uppercase tracking-[0.2em]">Active jobs with remote options get 40% more views</p>
                </div>
              </div>
              <Button variant="outline" size="sm" className="border-white/20 text-white hover:bg-white hover:text-sky-900 px-8" rightIcon={<ArrowUpRight className="w-4 h-4" />}>
                View Hiring Insights
              </Button>
            </div>
          </CardContent>
        </Card>
      </motion.div>
    </div>
  );
}