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

import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { Briefcase } from "lucide-react";
import JobFilter from "@/components/jobs/JobFilter";
import JobList from "@/components/jobs/JobList";
import { Job } from "@/components/jobs/JobCard";
import { Button } from "@/components/ui/Button";

// Sample job data - In production, this would come from an API
const sampleJobs: Job[] = [
  {
    id: 1,
    title: "Senior Software Engineer",
    company: "Tech Solutions PLC",
    location: "Addis Ababa",
    postedTime: "2024-02-15T10:00:00",
    description: "We are looking for a senior software engineer to lead our frontend development team. You will be responsible for building scalable web applications using React and Next.js.",
    skills: ["React", "Node.js", "TypeScript", "Next.js"],
    experience: "Senior",
    jobType: "Full-time",
    deadline: "Mar 15, 2024",
    verified: true
  },
  {
    id: 2,
    title: "Product Manager",
    company: "Innovate Corp",
    location: "Remote",
    postedTime: "2024-02-14T09:00:00",
    description: "Seeking an experienced Product Manager to drive product strategy and execution. Must have experience with agile methodologies and stakeholder management.",
    skills: ["Product Strategy", "Agile", "Leadership", "Analytics"],
    experience: "Senior",
    jobType: "Full-time",
    deadline: "Mar 20, 2024",
    verified: false
  },
  {
    id: 3,
    title: "UI/UX Designer",
    company: "Creative Studio",
    location: "Addis Ababa",
    postedTime: "2024-02-13T14:30:00",
    description: "Join our creative team as a UI/UX Designer. You'll work on exciting projects for international clients.",
    skills: ["Figma", "UI Design", "Prototyping", "User Research"],
    experience: "Intermediate",
    jobType: "Contract",
    deadline: "Mar 10, 2024",
    verified: true
  },
  {
    id: 4,
    title: "Data Scientist",
    company: "DataWorks",
    location: "Hybrid",
    postedTime: "2024-02-12T11:00:00",
    description: "Looking for a data scientist to join our analytics team. Experience with Python, ML, and SQL required.",
    skills: ["Python", "Machine Learning", "SQL", "TensorFlow"],
    experience: "Intermediate",
    jobType: "Full-time",
    deadline: "Mar 25, 2024",
    verified: false
  },
  {
    id: 5,
    title: "DevOps Engineer",
    company: "CloudTech",
    location: "Remote",
    postedTime: "2024-02-11T08:00:00",
    description: "Join our infrastructure team to manage cloud deployments and CI/CD pipelines.",
    skills: ["AWS", "Docker", "Kubernetes", "Jenkins"],
    experience: "Senior",
    jobType: "Full-time",
    deadline: "Mar 18, 2024",
    verified: true
  },
  {
    id: 6,
    title: "Marketing Specialist",
    company: "Growth Agency",
    location: "Addis Ababa",
    postedTime: "2024-02-10T16:00:00",
    description: "We're looking for a creative marketing specialist to manage social media and content marketing.",
    skills: ["Social Media", "Content Writing", "SEO", "Analytics"],
    experience: "Junior",
    jobType: "Full-time",
    deadline: "Mar 12, 2024",
    verified: false
  }
];

// Filter state interface
interface FilterState {
  sector: string;
  jobTypes: string[];
  jobSites: string[];
  experienceLevels: string[];
  educationLevels: string[];
  gender: string[];
}

export default function FindJobsPage() {
  const [jobs, setJobs] = useState<Job[]>(sampleJobs);
  const [filteredJobs, setFilteredJobs] = useState<Job[]>(sampleJobs);
  const [showMobileFilter, setShowMobileFilter] = useState(false);
  const [activeFilters, setActiveFilters] = useState<FilterState>({
    sector: "",
    jobTypes: [],
    jobSites: [],
    experienceLevels: [],
    educationLevels: [],
    gender: [],
  });

  // Apply filters whenever filters change
  useEffect(() => {
    let filtered = [...jobs];

    // Filter by job types
    if (activeFilters.jobTypes.length > 0) {
      filtered = filtered.filter(job => 
        activeFilters.jobTypes.includes(job.jobType)
      );
    }

    // Filter by work setting (jobSites)
    if (activeFilters.jobSites.length > 0) {
      filtered = filtered.filter(job => 
        activeFilters.jobSites.some(site => 
          job.location.toLowerCase().includes(site.toLowerCase()) ||
          job.jobType.toLowerCase().includes(site.toLowerCase())
        )
      );
    }

    // Filter by experience level
    if (activeFilters.experienceLevels.length > 0) {
      filtered = filtered.filter(job => 
        activeFilters.experienceLevels.includes(job.experience)
      );
    }

    // eslint-disable-next-line react-hooks/set-state-in-effect
    setFilteredJobs(filtered);
  }, [activeFilters, jobs]);

  const handleViewDetails = (jobId: number) => {
    console.log("View job details:", jobId);
    // router.push(`/job-seeker/jobs/${jobId}`);
  };

  const handleFilterChange = (filters: FilterState) => {
    setActiveFilters(filters);
  };

  const activeFilterCount = 
    activeFilters.jobTypes.length +
    activeFilters.jobSites.length +
    activeFilters.experienceLevels.length +
    activeFilters.educationLevels.length +
    activeFilters.gender.length +
    (activeFilters.sector ? 1 : 0);

  return (
    <div className="space-y-6">
      {/* Header Section */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <div className="flex items-center gap-2 mb-1">
            <div className="p-1.5 rounded-lg bg-sky-50">
              <Briefcase className="w-4 h-4 text-sky-600" />
            </div>
            <h1 className="text-2xl lg:text-3xl font-bold text-slate-900">
              Find Jobs
            </h1>
          </div>
          <p className="text-slate-500 text-sm ml-7">
            Discover opportunities that match your calling and skills
          </p>
        </div>
        
        {/* Mobile Filter Button */}
        <div className="sm:hidden">
          <Button
            variant="outline"
            onClick={() => setShowMobileFilter(true)}
            className="w-full justify-between"
          >
            <span>Filters</span>
            {activeFilterCount > 0 && (
              <span className="px-2 py-0.5 bg-sky-600 text-white text-xs rounded-full">
                {activeFilterCount}
              </span>
            )}
          </Button>
        </div>
      </div>

      {/* Main Content - Desktop (Filter on Right Side) */}
      <div className="hidden sm:grid grid-cols-1 lg:grid-cols-12 gap-6">
        {/* Job Listings - Left Side */}
        <div className="lg:col-span-8">
          <JobList jobs={filteredJobs} onViewDetails={handleViewDetails} />
        </div>

        {/* Filter Sidebar - Right Side */}
        <div className="lg:col-span-4">
          <JobFilter onFilterChange={handleFilterChange} />
        </div>
      </div>

      {/* Mobile Content */}
      <div className="sm:hidden">
        <JobList jobs={filteredJobs} onViewDetails={handleViewDetails} />
      </div>

      {/* Mobile Filter Drawer */}
      {showMobileFilter && (
        <JobFilter 
          isMobile={true} 
          onClose={() => setShowMobileFilter(false)}
          onFilterChange={handleFilterChange}
        />
      )}

      {/* Active Filters Display */}
      {activeFilterCount > 0 && (
        <motion.div 
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          className="hidden lg:flex flex-wrap items-center gap-2 mt-4 pt-4 border-t border-slate-100"
        >
          <span className="text-xs text-slate-500 mr-2">Active filters:</span>
          {activeFilters.jobTypes.map(type => (
            <span key={type} className="px-2 py-1 bg-sky-50 text-sky-700 text-xs rounded-full border border-sky-100">
              {type}
            </span>
          ))}
          {activeFilters.jobSites.map(site => (
            <span key={site} className="px-2 py-1 bg-sky-50 text-sky-700 text-xs rounded-full border border-sky-100">
              {site}
            </span>
          ))}
          {activeFilters.experienceLevels.map(level => (
            <span key={level} className="px-2 py-1 bg-sky-50 text-sky-700 text-xs rounded-full border border-sky-100">
              {level}
            </span>
          ))}
          <button 
            onClick={() => handleFilterChange({
              sector: "",
              jobTypes: [],
              jobSites: [],
              experienceLevels: [],
              educationLevels: [],
              gender: [],
            })}
            className="ml-2 text-xs text-slate-400 hover:text-red-500 transition-colors"
          >
            Clear all
          </button>
        </motion.div>
      )}
    </div>
  );
}