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

import { useState } from "react";
import { ChevronDown, Search, FilterX } from "lucide-react";
import JobCard, { Job } from "./JobCard";
import { motion, AnimatePresence } from "framer-motion";

interface JobListProps {
  jobs: Job[];
  onViewDetails: (jobId: number) => void;
}

export default function JobList({ jobs, onViewDetails }: JobListProps) {
  const [searchTerm, setSearchTerm] = useState("");
  const [visibleJobs, setVisibleJobs] = useState(10);

  const filteredJobs = jobs.filter(job =>
    job.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
    job.company.toLowerCase().includes(searchTerm.toLowerCase()) ||
    job.skills.some(skill => skill.toLowerCase().includes(searchTerm.toLowerCase()))
  );

  const displayedJobs = filteredJobs.slice(0, visibleJobs);

  const loadMore = () => {
    setVisibleJobs(prev => prev + 10);
  };

  return (
    <div className="space-y-8">
      {/* Search Bar Section */}
      <div className="relative group">
        <div className="absolute inset-y-0 left-5 flex items-center pointer-events-none">
          <Search className="w-5 h-5 text-slate-400 group-focus-within:text-sky-600 transition-colors" />
        </div>
        <input
          type="text"
          placeholder="Search for your next impact role..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="w-full pl-14 pr-6 py-5 bg-white border border-slate-200 rounded-2xl shadow-sm focus:outline-none focus:ring-2 focus:ring-sky-500/20 focus:border-sky-500 text-[15px] text-slate-700 placeholder:text-slate-400 transition-all"
        />
      </div>

      {/* List Header */}
      <div className="flex items-center justify-between border-b border-slate-100 pb-4">
        <div className="flex items-center gap-3">
          <h2 className="text-sm font-bold text-slate-900">
            {searchTerm ? "Search Results" : "All Jobs"}
          </h2>
          <span className="px-2 py-0.5 bg-slate-100 text-slate-600 text-[11px] font-bold rounded-md">
            {filteredJobs.length}
          </span>
        </div>
        
        {searchTerm && (
          <button 
            onClick={() => setSearchTerm("")}
            className="text-[11px] font-bold text-sky-600 hover:text-sky-700 uppercase tracking-wider flex items-center gap-1.5 transition-colors"
          >
            Clear Search
          </button>
        )}
      </div>

      {/* Job Listings */}
      <div className="space-y-4">
        <AnimatePresence mode="popLayout">
          {displayedJobs.length > 0 ? (
            <>
              {displayedJobs.map((job) => (
                <JobCard key={job.id} job={job} onViewDetails={onViewDetails} />
              ))}
              
              {/* Load More Button */}
              {visibleJobs < filteredJobs.length && (
                <motion.div 
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  className="flex justify-center mt-12 pt-4"
                >
                  <button
                    onClick={loadMore}
                    className="flex items-center gap-2 px-8 py-3 bg-white border border-slate-200 text-slate-600 hover:text-sky-600 hover:border-sky-200 hover:bg-sky-50/50 rounded-xl transition-all duration-300 text-sm font-bold shadow-sm"
                  >
                    Load More Jobs
                    <ChevronDown className="w-4 h-4" />
                  </button>
                </motion.div>
              )}
            </>
          ) : (
            <motion.div 
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              className="flex flex-col items-center justify-center py-20 bg-slate-50/50 rounded-3xl border-2 border-dashed border-slate-200"
            >
              <div className="w-16 h-16 rounded-2xl bg-white flex items-center justify-center shadow-sm border border-slate-100 mb-4">
                <FilterX className="w-8 h-8 text-slate-300" />
              </div>
              <h3 className="text-lg font-bold text-slate-900 mb-1">No matching jobs</h3>
              <p className="text-slate-500 text-sm">Try adjusting your search or filters.</p>
              <button 
                onClick={() => { setSearchTerm(""); }}
                className="mt-6 text-sm font-bold text-sky-600 hover:underline"
              >
                Reset all filters
              </button>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
}