'use client';

import Link from 'next/link';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { fetchPublicJobsPaged, applyToJob, type PublicJob } from '@/lib/careers';

/** Latest open positions shown on the candidate dashboard. */
export default function CandidateLatestJobs() {
  const [jobs, setJobs] = useState<PublicJob[]>([]);
  const [loading, setLoading] = useState(true);
  const [applying, setApplying] = useState<number | null>(null);

  useEffect(() => {
    fetchPublicJobsPaged(1, 6)
      .then((res) => setJobs(res.results || []))
      .catch(() => setJobs([]))
      .finally(() => setLoading(false));
  }, []);

  const onApply = async (job: PublicJob) => {
    setApplying(job.id);
    const res = await applyToJob(job.public_id || job.id);
    setApplying(null);
    if (res.ok) toast.success(res.message);
    else toast.info(res.message);
  };

  return (
    <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none p-5 shadow-sm">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-sm font-bold text-slate-800 dark:text-white">
          <i className="fa-solid fa-briefcase text-[#405189] mr-2" />Latest jobs
        </h3>
        <Link href="/careers/jobs" className="text-xs font-bold text-[#405189] hover:underline">View all →</Link>
      </div>

      {loading ? (
        <p className="text-slate-400 text-sm py-6 text-center">Loading…</p>
      ) : jobs.length === 0 ? (
        <p className="text-slate-400 text-sm py-6 text-center">No open positions right now.</p>
      ) : (
        <div className="divide-y divide-slate-100 dark:divide-slate-800">
          {jobs.map((j) => (
            <div key={j.id} className="py-3 flex items-center gap-3 flex-wrap">
              <div className="flex-1 min-w-0">
                <Link href={`/careers/jobs/${j.public_id || j.id}`} className="font-semibold text-slate-800 dark:text-slate-200 hover:text-[#405189] transition">
                  {j.title}
                </Link>
                <div className="flex flex-wrap gap-x-3 gap-y-0.5 mt-0.5 text-xs text-slate-500 dark:text-slate-400">
                  <span>{j.client_name || 'Indovision'}</span>
                  {j.location && <span><i className="fa-solid fa-location-dot mr-1" />{j.location}</span>}
                  {j.experience_band && <span><i className="fa-solid fa-briefcase mr-1" />{j.experience_band}</span>}
                </div>
              </div>
              <div className="flex items-center gap-2 shrink-0">
                <Link href={`/careers/jobs/${j.public_id || j.id}`} className="text-xs font-bold px-3 py-1.5 border border-[#405189]/30 text-[#405189] hover:bg-[#405189]/5 transition">
                  Details
                </Link>
                <button
                  onClick={() => onApply(j)}
                  disabled={applying === j.id}
                  className="text-xs font-bold px-3 py-1.5 bg-[#405189] text-white hover:bg-[#334267] transition disabled:opacity-50"
                >
                  {applying === j.id ? '…' : 'Apply'}
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}