frontend/src/components/sections/JobSearch.tsx

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  // Search as SearchIcon,
  MapPin,
  Briefcase,
  AlertCircle,
  Zap,
} from "lucide-react";
import { Card, Button, Input, Select } from "@/components/common";
import { useJobStore } from "@/store/appStore";
import { jobsAPI } from "@/utils/api";
import type { SearchFilters, Job } from "@/types";

interface JobSearchProps {
  onJobsFound?: (jobs: Job[]) => void;
}

const JobSearch: React.FC<JobSearchProps> = ({ onJobsFound }) => {
  const [filters, setFilters] = React.useState<SearchFilters>({
    keyword: "",
    location: "",
    maxJobs: 10,
    maxDaysOld: 30,
  });
  const [errors, setErrors] = React.useState<Record<string, string>>({});

  // Added a local state to track which button triggered the search
  const [searchMode, setSearchMode] = useState<"standard" | "apify" | null>(
    null
  );

  // Validate inputs helper function
  const validateInputs = () => {
    const newErrors: Record<string, string> = {};
    if (!filters.keyword.trim()) newErrors.keyword = "Job title is required";
    if (!filters.location.trim()) newErrors.location = "Location is required";

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return false;
    }
    setErrors({});
    return true;
  };

  const { setIsSearching, isSearching, setJobs } = useJobStore();

  // const handleSearch = async (e: React.FormEvent) => {
  //   e.preventDefault();
  //   const newErrors: Record<string, string> = {};

  //   if (!filters.keyword.trim()) {
  //     newErrors.keyword = "Job title is required";
  //   }
  //   if (!filters.location.trim()) {
  //     newErrors.location = "Location is required";
  //   }

  //   if (Object.keys(newErrors).length > 0) {
  //     setErrors(newErrors);
  //     return;
  //   }

  //   setErrors({});
  //   setIsSearching(true);

  //   try {
  //     const response = await jobsAPI.searchJobs(filters);
  //     setJobs(response.jobs);
  //     onJobsFound?.(response.jobs);
  //   } catch (error) {
  //     const message =
  //       error instanceof Error ? error.message : "Failed to search jobs";
  //     setErrors({ submit: message });
  //   } finally {
  //     setIsSearching(false);
  //   }
  // };

  // --- NEW APIFY SEARCH HANDLER ---
  const handleApifySearch = async () => {
    if (!validateInputs()) return;

    setIsSearching(true);
    setSearchMode("apify");

    try {
      const response = await jobsAPI.searchJobsApify(filters);
      setJobs(response.jobs);
      onJobsFound?.(response.jobs);
    } catch (error) {
      const message =
        error instanceof Error
          ? error.message
          : "Failed to search jobs via Apify";
      setErrors({ submit: message });
    } finally {
      setIsSearching(false);
      setSearchMode(null);
    }
  };

  return (
    <Card glow innerGlow className="max-w-2xl mx-auto">
      <div className="mb-6">
        <h2 className="text-2xl font-bold text-white mb-2">Find Jobs</h2>
        <p className="text-slate-400">
          Search for job opportunities on LinkedIn
        </p>
      </div>

      {/* <form onSubmit={handleSearch} className="space-y-5"> */}
      {/* Removed onSubmit from form since buttons now handle their own click events */}
      <form className="space-y-5">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Input
            label="Job Title / Keyword"
            placeholder="e.g., Senior React Developer"
            icon={<Briefcase className="w-4 h-4" />}
            value={filters.keyword}
            onChange={(e) =>
              setFilters({ ...filters, keyword: e.target.value })
            }
            error={errors.keyword}
            required
          />
          <Input
            label="Location"
            placeholder="e.g., San Francisco, CA"
            icon={<MapPin className="w-4 h-4" />}
            value={filters.location}
            onChange={(e) =>
              setFilters({ ...filters, location: e.target.value })
            }
            error={errors.location}
            required
          />
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Select
            label="Number of Jobs"
            value={filters.maxJobs.toString()}
            onChange={(e) =>
              setFilters({ ...filters, maxJobs: parseInt(e.target.value) })
            }
            options={[
              { value: "5", label: "5 Jobs" },
              { value: "10", label: "10 Jobs" },
              { value: "15", label: "15 Jobs" },
              { value: "20", label: "20 Jobs" },
              { value: "30", label: "30 Jobs" },
            ]}
          />
          <Select
            label="Posted Within"
            value={(filters.maxDaysOld || 30).toString()}
            onChange={(e) =>
              setFilters({ ...filters, maxDaysOld: parseInt(e.target.value) })
            }
            options={[
              { value: "1", label: "Last 24 Hours" },
              { value: "3", label: "Last 3 Days" },
              { value: "7", label: "Last Week" },
              { value: "14", label: "Last 2 Weeks" },
              { value: "30", label: "Last Month" },
            ]}
          />
        </div>

        <AnimatePresence mode="wait">
          {errors.submit && (
            <motion.div
              initial={{ opacity: 0, y: -4 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -4 }}
              className="p-4 bg-red-500/10 border border-red-500/30 rounded-lg flex gap-3"
            >
              <AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0" />
              <p className="text-sm text-red-200">{errors.submit}</p>
            </motion.div>
          )}
        </AnimatePresence>

        {/* <Button
          type="submit"
          loading={isSearching}
          fullWidth
          size="lg"
          icon={<SearchIcon className="w-5 h-5" />}
        >
          {isSearching ? "Searching Jobs..." : "Search Jobs"}
        </Button> */}

        {/* Buttons Section - Changed to side-by-side layout */}
        <div className="flex flex-col sm:flex-row gap-4 pt-2">
          {/* <Button
            type="button"
            onClick={handleSearch}
            loading={isSearching && searchMode === "standard"}
            disabled={isSearching && searchMode === "apify"}
            className="flex-1"
            size="lg"
            icon={<SearchIcon className="w-5 h-5" />}
          >
            {isSearching && searchMode === "standard"
              ? "Searching..."
              : "Standard Search"}
          </Button> */}

          <Button
            type="button"
            onClick={handleApifySearch}
            loading={isSearching && searchMode === "apify"}
            disabled={isSearching && searchMode === "standard"}
            className="flex-1 bg-indigo-600 hover:bg-indigo-700 border-indigo-500" // Custom colors to differentiate
            size="lg"
            icon={<Zap className="w-5 h-5" />} // Lightning bolt icon to show it's faster
          >
            {isSearching && searchMode === "apify"
              ? "Searching..."
              : "Fast Apify Search"}
          </Button>
        </div>
      </form>
    </Card>
  );
};

export default JobSearch;