// components/jobs/JobFilter.tsx
"use client";

import { useState } from "react";
import { ChevronDown, X, SlidersHorizontal, Check } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";

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

interface JobFilterProps {
  onFilterChange?: (filters: FilterState) => void;
  isMobile?: boolean;
  onClose?: () => void;
}

const FilterSection = ({ 
  title, 
  children, 
  defaultOpen = true 
}: { 
  title: string; 
  children: React.ReactNode;
  defaultOpen?: boolean;
}) => {
  const [isOpen, setIsOpen] = useState(defaultOpen);
  return (
    <div className="border-b border-slate-100 last:border-0 py-5">
      <button 
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center justify-between w-full text-left group"
      >
        <span className="text-[13px] font-bold text-slate-900 uppercase tracking-wider">{title}</span>
        <ChevronDown className={`w-4 h-4 text-slate-400 transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`} />
      </button>
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="overflow-hidden"
          >
            <div className="pt-4 space-y-2.5">
              {children}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};

const CustomCheckbox = ({ 
  label, 
  checked, 
  onChange 
}: { 
  label: string; 
  checked: boolean; 
  onChange: () => void;
}) => (
  <label className="flex items-center gap-3 cursor-pointer group">
    <div 
      onClick={(e) => { e.preventDefault(); onChange(); }}
      className={`w-5 h-5 rounded-md border flex items-center justify-center transition-all duration-200 ${
        checked 
          ? "bg-sky-600 border-sky-600 shadow-sm shadow-sky-200" 
          : "bg-white border-slate-300 group-hover:border-sky-400"
      }`}
    >
      {checked && <Check className="w-3.5 h-3.5 text-white stroke-[3px]" />}
    </div>
    <span className={`text-sm transition-colors duration-200 ${
      checked ? "text-slate-900 font-medium" : "text-slate-500 group-hover:text-slate-700"
    }`}>
      {label}
    </span>
  </label>
);

export default function JobFilter({ onFilterChange, isMobile = false, onClose }: JobFilterProps) {
  const [selectedFilters, setSelectedFilters] = useState<FilterState>({
    sector: "",
    jobTypes: [],
    jobSites: [],
    experienceLevels: [],
    educationLevels: [],
    gender: [],
  });

  const filterCategories = {
    jobTypes: ["Full-time", "Part-time", "Freelance", "Contractual", "Volunteer", "Intern (Paid)", "Intern (Unpaid)"],
    jobSites: ["On-site", "Remote", "Hybrid"],
    experienceLevels: ["Entry level", "Junior", "Intermediate", "Senior", "Expert"],
    educationLevels: ["Tvet", "Secondary School", "Certificate", "Diploma", "Bachelors Degree", "Masters Degree", "PhD", "Not Required"],
    gender: ["Male", "Female"]
  };

  const handleCheckboxChange = (category: keyof FilterState, value: string) => {
    setSelectedFilters(prev => {
      const current = prev[category] as string[];
      const updated = current.includes(value)
        ? current.filter(v => v !== value)
        : [...current, value];
      
      const newFilters = { ...prev, [category]: updated };
      onFilterChange?.(newFilters);
      return newFilters;
    });
  };

  const handleSectorChange = (value: string) => {
    const newFilters = { ...selectedFilters, sector: value };
    setSelectedFilters(newFilters);
    onFilterChange?.(newFilters);
  };

  const clearFilters = () => {
    const reset = {
      sector: "",
      jobTypes: [],
      jobSites: [],
      experienceLevels: [],
      educationLevels: [],
      gender: [],
    };
    setSelectedFilters(reset);
    onFilterChange?.(reset);
  };

  const FilterBody = () => (
    <div className="p-6">
      {/* Sector Dropdown */}
      <div className="mb-6">
        <label className="block text-[13px] font-bold text-slate-900 uppercase tracking-wider mb-3">Sector</label>
        <select 
          className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:bg-white transition-all appearance-none"
          value={selectedFilters.sector}
          onChange={(e) => handleSectorChange(e.target.value)}
        >
          <option value="">All Sectors</option>
          <option value="technology">Technology</option>
          <option value="finance">Finance</option>
          <option value="marketing">Marketing</option>
          <option value="sales">Sales</option>
        </select>
      </div>

      <FilterSection title="Job Type">
        {filterCategories.jobTypes.map((type) => (
          <CustomCheckbox 
            key={type} 
            label={type} 
            checked={selectedFilters.jobTypes.includes(type)} 
            onChange={() => handleCheckboxChange('jobTypes', type)} 
          />
        ))}
      </FilterSection>

      <FilterSection title="Work Setting">
        {filterCategories.jobSites.map((site) => (
          <CustomCheckbox 
            key={site} 
            label={site} 
            checked={selectedFilters.jobSites.includes(site)} 
            onChange={() => handleCheckboxChange('jobSites', site)} 
          />
        ))}
      </FilterSection>

      <FilterSection title="Experience">
        {filterCategories.experienceLevels.map((level) => (
          <CustomCheckbox 
            key={level} 
            label={level} 
            checked={selectedFilters.experienceLevels.includes(level)} 
            onChange={() => handleCheckboxChange('experienceLevels', level)} 
          />
        ))}
      </FilterSection>

      <FilterSection title="Education" defaultOpen={false}>
        {filterCategories.educationLevels.map((level) => (
          <CustomCheckbox 
            key={level} 
            label={level} 
            checked={selectedFilters.educationLevels.includes(level)} 
            onChange={() => handleCheckboxChange('educationLevels', level)} 
          />
        ))}
      </FilterSection>
    </div>
  );

  if (isMobile) {
    return (
      <div className="fixed inset-0 z-50 lg:hidden">
        <motion.div 
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" 
          onClick={onClose} 
        />
        <motion.div 
          initial={{ x: "100%" }}
          animate={{ x: 0 }}
          className="absolute right-0 top-0 h-full w-80 bg-white shadow-2xl overflow-y-auto"
        >
          <div className="p-6 border-b border-slate-100 flex justify-between items-center sticky top-0 bg-white z-10">
            <div className="flex items-center gap-2">
              <SlidersHorizontal className="w-5 h-5 text-sky-600" />
              <h2 className="text-xl font-bold text-slate-900">Filters</h2>
            </div>
            <button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-xl transition-colors">
              <X className="w-5 h-5 text-slate-400" />
            </button>
          </div>
          <FilterBody />
          <div className="p-6 pt-0 mt-auto sticky bottom-0 bg-white border-t border-slate-100">
            <button 
              onClick={clearFilters}
              className="w-full py-3 text-sm font-bold text-slate-500 hover:text-slate-900 transition-colors"
            >
              Reset Filters
            </button>
          </div>
        </motion.div>
      </div>
    );
  }

  return (
    <div className="sticky top-24 bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm">
      <div className="p-6 border-b border-slate-100 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <SlidersHorizontal className="w-4 h-4 text-sky-600" />
          <h2 className="text-lg font-bold text-slate-900">Filters</h2>
        </div>
        <button 
          onClick={clearFilters}
          className="text-xs font-bold text-slate-400 hover:text-sky-600 transition-colors uppercase tracking-wider"
        >
          Reset
        </button>
      </div>
      <div className="max-h-[calc(100vh-200px)] overflow-y-auto scrollbar-hide">
        <FilterBody />
      </div>
    </div>
  );
}