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

import { useState } from "react";
import { Star, Share2, Bookmark, MapPin, Briefcase, Calendar, Clock, ChevronRight } from "lucide-react";
import { motion } from "framer-motion";
import { Badge } from "../ui/Badge";
import { Button } from "../ui/Button";

export interface Job {
  id: number;
  title: string;
  company: string;
  location: string;
  postedTime: string;
  description: string;
  skills: string[];
  experience: string;
  jobType: string;
  deadline: string;
  verified: boolean;
  // Optional fields for applicants
  matchScore?: number;
  avatarInitials?: string;
  status?: string;
  isApplicant?: boolean;
}

interface JobCardProps {
  job: Job;
  onViewDetails: (jobId: number) => void;
}

export default function JobCard({ job, onViewDetails }: JobCardProps) {
  const [saved, setSaved] = useState(false);

  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      className="group relative bg-white rounded-[2rem] border border-slate-200 hover:border-sky-200 hover:shadow-xl hover:shadow-sky-900/5 transition-all duration-300 p-8"
    >
      <div className="flex flex-col md:flex-row gap-8">
        {/* Profile/Logo Section */}
        <div className="shrink-0">
          {job.avatarInitials ? (
            <div className="w-16 h-16 rounded-2xl bg-sky-900 text-white flex items-center justify-center text-xl font-black shadow-lg shadow-sky-900/20 group-hover:scale-105 transition-transform">
              {job.avatarInitials}
            </div>
          ) : (
            <div className="w-16 h-16 rounded-2xl bg-slate-50 border border-slate-100 flex items-center justify-center text-slate-400 group-hover:bg-sky-50 group-hover:border-sky-100 group-hover:text-sky-500 transition-colors">
              <Briefcase className="w-7 h-7" />
            </div>
          )}
        </div>

        <div className="flex-1 min-w-0">
          {/* Header */}
          <div className="flex items-start justify-between gap-4 mb-3">
            <div>
              <div className="flex items-center gap-3 flex-wrap mb-1.5">
                <h3
                  onClick={() => onViewDetails(job.id)}
                  className="text-xl font-black text-slate-900 group-hover:text-sky-900 transition-colors cursor-pointer leading-tight tracking-tight"
                >
                  {job.title}
                </h3>
                {job.verified && (
                  <span className="inline-flex items-center gap-1 px-2.5 py-1 bg-emerald-50 text-emerald-600 text-[9px] font-black rounded-full border border-emerald-100 uppercase tracking-widest">
                    <Star className="w-3 h-3 fill-emerald-600" />
                    Verified
                  </span>
                )}
                {job.status && (
                  <span className="px-3 py-1 bg-sky-50 text-sky-600 text-[9px] font-black rounded-full border border-sky-100 uppercase tracking-widest">
                    {job.status}
                  </span>
                )}
              </div>
              <div className="flex items-center gap-4 text-sm font-bold text-slate-500">
                <span>{job.company}</span>
                <span className="w-1 h-1 rounded-full bg-slate-200" />
                <span className="flex items-center gap-1.5">
                  <MapPin className="w-3.5 h-3.5" />
                  {job.location}
                </span>
              </div>
            </div>

            {job.matchScore ? (
              <div className="text-right">
                <div className="flex items-center gap-1.5 text-emerald-600 mb-0.5">
                  <Star className="w-5 h-5 fill-emerald-600" />
                  <span className="text-2xl font-black leading-none">{job.matchScore}%</span>
                </div>
                <p className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Match Score</p>
              </div>
            ) : (
              <button
                onClick={(e) => { e.stopPropagation(); setSaved(!saved); }}
                className={`p-3 rounded-xl transition-all duration-300 ${saved ? 'bg-sky-50 text-sky-600 border border-sky-100' : 'text-slate-300 hover:bg-slate-50 border border-transparent hover:border-slate-100'
                  }`}
              >
                <Bookmark className={`w-5 h-5 ${saved ? 'fill-current' : ''}`} />
              </button>
            )}
          </div>

          {/* Description */}
          <p className="text-sm text-slate-500 line-clamp-2 mb-6 leading-relaxed font-medium">
            {job.description}
          </p>

          {/* Metadata */}
          <div className="flex flex-wrap items-center gap-4 mb-6">
            <div className="flex items-center gap-2 text-[10px] font-black text-slate-600 bg-slate-50 px-3 py-2 rounded-xl border border-slate-100 uppercase tracking-tighter">
              <Clock className="w-3.5 h-3.5 text-slate-400" />
              {job.jobType}
            </div>
            <div className="flex items-center gap-2 text-[10px] font-black text-slate-600 bg-slate-50 px-3 py-2 rounded-xl border border-slate-100 uppercase tracking-tighter">
              <Briefcase className="w-3.5 h-3.5 text-slate-400" />
              {job.experience}
            </div>
            {!job.isApplicant && (
              <div className="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-tighter">
                <Calendar className="w-3.5 h-3.5" />
                Expires {job.deadline}
              </div>
            )}
          </div>

          {/* Footer */}
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6 pt-6 border-t border-slate-50">
            <div className="flex flex-wrap gap-2">
              {job.skills.map((skill, idx) => (
                <Badge key={idx} variant="outline" className="px-3 py-1 bg-slate-50/50 text-slate-500 text-[10px] font-bold rounded-lg border-slate-100">
                  {skill}
                </Badge>
              ))}
            </div>
            <div className="flex items-center gap-4">
              <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest whitespace-nowrap">
                {job.isApplicant ? `Applied ${job.postedTime}` : job.postedTime}
              </span>
              <Button
                variant="dark"
                size="sm"
                onClick={() => onViewDetails(job.id)}
                className="rounded-xl px-8 h-11 font-black uppercase text-[10px] tracking-widest"
                rightIcon={<ChevronRight className="w-3.5 h-3.5" />}
              >
                {job.isApplicant ? "Review Application" : "View Details"}
              </Button>
            </div>
          </div>
        </div>
      </div>
    </motion.div>
  );
}