frontend/src/components/sections/JobFitAnalyzer.tsx

import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  BrainCircuit,
  CheckCircle2,
  XCircle,
  AlertCircle,
  ChevronDown,
  ChevronUp,
} from "lucide-react";
import { Button } from "@/components/common";
import { jobsAPI } from "@/utils/api";

interface JobFitAnalyzerProps {
  jobId: string;
}

interface FitResult {
  match_score: number;
  matched_skills: string[];
  missing_skills: string[];
}

export const JobFitAnalyzer: React.FC<JobFitAnalyzerProps> = ({ jobId }) => {
  const [isAnalyzing, setIsAnalyzing] = useState(false);
  const [result, setResult] = useState<FitResult | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [showDetails, setShowDetails] = useState(false);

  const handleAnalyze = async () => {
    setIsAnalyzing(true);
    setError(null);
    try {
      const data = await jobsAPI.evaluateJobFit(jobId);
      if (data.success && data.match_score !== undefined) {
        setResult({
          match_score: data.match_score,
          matched_skills: data.matched_skills || [],
          missing_skills: data.missing_skills || [],
        });
        setShowDetails(true); // Auto-expand the first time it finishes
      } else {
        setError(data.error || "Failed to analyze fit.");
      }
    } catch (err: any) {
      setError(err.message || "An error occurred during analysis.");
    } finally {
      setIsAnalyzing(false);
    }
  };

  const getScoreColor = (score: number) => {
    if (score >= 75) return "text-emerald-400";
    if (score >= 50) return "text-amber-400";
    return "text-rose-400";
  };

  const getStrokeColor = (score: number) => {
    if (score >= 75) return "#34d399"; // emerald-400
    if (score >= 50) return "#fbbf24"; // amber-400
    return "#fb7185"; // rose-400
  };

  return (
    <div className="flex flex-col w-full">
      {/* --- TOP ROW: The Button or the Score Badge --- */}
      <div className="flex items-center">
        {!result && !isAnalyzing && (
          <Button
            variant="outline"
            size="sm"
            onClick={handleAnalyze}
            icon={<BrainCircuit className="w-4 h-4" />}
          >
            Analyze AI Fit
          </Button>
        )}

        {isAnalyzing && (
          <div className="flex items-center gap-2 px-3 py-1.5 bg-slate-800/50 rounded-full border border-slate-700 animate-pulse">
            <BrainCircuit className="w-4 h-4 text-emerald-400" />
            <span className="text-xs font-medium text-slate-300">
              Scanning Semantic Fit...
            </span>
          </div>
        )}

        {error && (
          <div className="flex items-center gap-2 text-xs text-rose-400 bg-rose-500/10 px-3 py-1.5 rounded-full">
            <AlertCircle className="w-4 h-4" />
            <span>{error}</span>
          </div>
        )}

        {result && (
          <motion.button
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            onClick={() => setShowDetails(!showDetails)}
            className="flex items-center gap-3 bg-slate-800/40 hover:bg-slate-700/60 border border-slate-700 rounded-full pr-4 p-1 transition-all"
          >
            {/* Tiny Inline Score Ring */}
            <div className="relative w-8 h-8 flex items-center justify-center bg-slate-900 rounded-full shadow-inner">
              <span
                className={`text-[10px] font-bold ${getScoreColor(
                  result.match_score
                )}`}
              >
                {result.match_score}%
              </span>
              <svg className="absolute inset-0 w-full h-full -rotate-90">
                <circle
                  cx="16"
                  cy="16"
                  r="15"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  className="text-slate-800"
                />
                <circle
                  cx="16"
                  cy="16"
                  r="15"
                  fill="none"
                  stroke={getStrokeColor(result.match_score)}
                  strokeWidth="2"
                  strokeDasharray={`${(result.match_score / 100) * 94.2} 94.2`}
                  className="transition-all duration-1000 ease-out"
                />
              </svg>
            </div>
            <span className="text-sm font-medium text-slate-200">
              Fit Score
            </span>
            {showDetails ? (
              <ChevronUp className="w-4 h-4 text-slate-400" />
            ) : (
              <ChevronDown className="w-4 h-4 text-slate-400" />
            )}
          </motion.button>
        )}
      </div>

      {/* --- BOTTOM ROW: The Collapsible Skill Drawer --- */}
      <AnimatePresence>
        {showDetails && result && (
          <motion.div
            initial={{ opacity: 0, height: 0, marginTop: 0 }}
            animate={{ opacity: 1, height: "auto", marginTop: 16 }}
            exit={{ opacity: 0, height: 0, marginTop: 0 }}
            className="overflow-hidden w-full"
          >
            <div className="p-4 bg-slate-900/50 border border-slate-700/50 rounded-xl grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Matched Skills Column */}
              <div>
                <div className="flex items-center gap-2 text-sm font-semibold text-emerald-400 mb-3">
                  <CheckCircle2 className="w-4 h-4" />
                  Existing Strengths ({result.matched_skills.length})
                </div>
                <div className="flex flex-wrap gap-2">
                  {result.matched_skills.map((skill, idx) => (
                    <span
                      key={idx}
                      className="px-2.5 py-1 text-xs font-medium bg-emerald-500/10 border border-emerald-500/20 text-emerald-300 rounded-md"
                    >
                      {skill}
                    </span>
                  ))}
                  {result.matched_skills.length === 0 && (
                    <span className="text-xs text-slate-500">
                      No strict matches found.
                    </span>
                  )}
                </div>
              </div>

              {/* Missing Skills Column */}
              <div>
                <div className="flex items-center gap-2 text-sm font-semibold text-rose-400 mb-3">
                  <XCircle className="w-4 h-4" />
                  Gaps to Tailor ({result.missing_skills.length})
                </div>
                <div className="flex flex-wrap gap-2">
                  {result.missing_skills.map((skill, idx) => (
                    <span
                      key={idx}
                      className="px-2.5 py-1 text-xs font-medium bg-rose-500/10 border border-rose-500/20 text-rose-300 rounded-md"
                    >
                      {skill}
                    </span>
                  ))}
                  {result.missing_skills.length === 0 && (
                    <span className="text-xs text-slate-500">
                      Perfect match! No gaps.
                    </span>
                  )}
                </div>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};