'use client';

import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { Suspense, useEffect, useState } from 'react';
import Cookies from 'js-cookie';
import { toast } from 'react-toastify';
import CareersHeader from '@/components/careers/CareersHeader';
import CareersFooter from '@/components/careers/CareersFooter';
import {
  fetchPublicJobsPaged, applyToJob, timeAgo,
  getTrackingToken, getLegacySource, type PublicJob,
} from '@/lib/careers';
import { api } from '@/lib/api';

function JobsInner() {
  const router = useRouter();
  const params = useSearchParams();
  const initialQ = params.get('q') || '';
  const [jobs, setJobs] = useState<PublicJob[]>([]);
  const [loading, setLoading] = useState(true);
  const [q, setQ] = useState(initialQ);
  const [applying, setApplying] = useState<number | null>(null);
  const [myApplications, setMyApplications] = useState<any[]>([]);
  const [page, setPage] = useState(1);
  const [count, setCount] = useState(0);
  const PAGE_SIZE = 12;
  const totalPages = Math.max(1, Math.ceil(count / PAGE_SIZE));

  const load = async (query = '', pageNum = 1) => {
    setLoading(true);
    try {
      const paged = await fetchPublicJobsPaged(pageNum, PAGE_SIZE, query);
      setJobs(paged.results);
      setCount(paged.count);
      setPage(pageNum);

      // Applications are per-candidate — only fetch when logged in. Calling the
      // `api` helper while anonymous triggers its 401 handler, which redirects to
      // /login and breaks this PUBLIC page (a try/catch can't stop that redirect).
      if (Cookies.get('access_token')) {
        try {
          const appsRes: any = await api.get('/public/my-applications/');
          setMyApplications(appsRes.data || []);
        } catch {
          setMyApplications([]);
        }
      } else {
        setMyApplications([]);
      }
    } catch {
      setJobs([]);
      setMyApplications([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { load(initialQ); }, [initialQ]);

  const onApply = async (job: PublicJob) => {
    setApplying(job.id);
    // A visitor who landed on a published link (?t=...) and browsed to the list
    // keeps their attribution — the token was stored on arrival.
    const trackingToken = getTrackingToken(params.get('t'));
    const res = await applyToJob(job.public_id || job.id, getLegacySource() || undefined, trackingToken);
    setApplying(null);
    if (res.message === 'not-authenticated') {
      // Send to register, carrying the job so we apply right after signup.
      const trackQs = trackingToken ? `&t=${encodeURIComponent(trackingToken)}` : '';
      router.push(`/register?job=${job.public_id || job.id}${trackQs}`);
      return;
    }
    if (res.ok) {
      toast.success(res.message);
      // Reload applications after apply
      try {
        const appsRes: any = await api.get('/public/my-applications/');
        setMyApplications(appsRes.data || []);
      } catch {
        setMyApplications([]);
      }
    } else {
      toast.info(res.message);
    }
  };

  const getAppliedDate = (jobId: number) => {
    const app = myApplications.find((a: any) => a.job_id === jobId);
    if (!app || !app.applied_at) return null;
    return new Date(app.applied_at).toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' });
  };

  const hasApplied = (jobId: number) => {
    return myApplications.some((a: any) => a.job_id === jobId);
  };

  return (
    <div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950">
      <CareersHeader />

      {/* Hero + search */}
      <section className="bg-gradient-to-br from-[#405189] to-[#2b3a63] text-white">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-14 text-center">
          <h1 className="text-3xl sm:text-4xl font-black tracking-tight">Find your next opportunity</h1>
          <p className="mt-3 text-sm sm:text-base text-indigo-100 max-w-2xl mx-auto">
            Explore open roles at Indovision. No account needed to browse — apply in a click.
          </p>
          <form
            onSubmit={(e) => { e.preventDefault(); load(q); router.replace(`/careers/jobs?q=${encodeURIComponent(q)}`); }}
            className="mt-7 flex bg-white rounded-none shadow-lg max-w-xl mx-auto overflow-hidden"
          >
            <span className="hidden sm:flex pl-4 items-center text-slate-400"><i className="fa-solid fa-magnifying-glass" /></span>
            <input
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder="Search by title, skill or location…"
              className="flex-1 min-w-0 px-4 sm:px-3 py-3 text-sm text-slate-800 focus:outline-none"
            />
            <button type="submit" aria-label="Search" className="shrink-0 px-4 sm:px-6 py-3 bg-[#0ab39c] text-white font-bold text-sm hover:bg-[#099783] transition">
              <i className="fa-solid fa-magnifying-glass sm:hidden" />
              <span className="hidden sm:inline">Search</span>
            </button>
          </form>
        </div>
      </section>

      <div className="flex-1 w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
        <div className="flex items-center justify-between mb-5">
          <h2 className="text-lg font-black text-slate-800 dark:text-white">Open positions</h2>
          <p className="text-sm text-slate-500">{loading ? 'Loading…' : `${count} role${count === 1 ? '' : 's'}`}</p>
        </div>

        {loading ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {Array.from({ length: 6 }).map((_, i) => (
              <div key={i} className="h-44 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 animate-pulse" />
            ))}
          </div>
        ) : jobs.length === 0 ? (
          <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-12 text-center">
            <i className="fa-solid fa-briefcase text-3xl text-slate-300 dark:text-slate-700" />
            <p className="mt-3 text-slate-500">No roles match your search right now.</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {jobs.map((j) => {
              const appliedDate = getAppliedDate(j.id);
              const applied = hasApplied(j.id);
              const company = j.client_name || 'Indovision';
              return (
                <div key={j.id} className="group flex flex-col bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 hover:border-[#405189] hover:shadow-lg transition p-5">
                  <div className="flex items-start gap-3">
                    <div className="w-10 h-10 shrink-0 grid place-items-center bg-[#405189]/10 text-[#405189] dark:text-indigo-300 font-black text-sm">
                      {company.charAt(0).toUpperCase()}
                    </div>
                    <div className="min-w-0">
                      <Link href={`/careers/jobs/${j.public_id || j.id}`} className="font-bold text-slate-800 dark:text-white hover:text-[#405189] transition line-clamp-2">
                        {j.title}
                      </Link>
                      <p className="text-xs text-slate-500 mt-0.5 truncate">{company}{j.department ? ` · ${j.department}` : ''}</p>
                    </div>
                  </div>

                  <div className="flex flex-wrap gap-x-3 gap-y-1 mt-3 text-xs text-slate-600 dark:text-slate-400">
                    {j.location && <span><i className="fa-solid fa-location-dot text-[#405189] mr-1" />{j.location}</span>}
                    {j.experience_band && <span><i className="fa-solid fa-briefcase text-[#405189] mr-1" />{j.experience_band}</span>}
                    {j.ctc_band && <span><i className="fa-solid fa-indian-rupee-sign text-[#405189] mr-1" />{j.ctc_band}</span>}
                  </div>

                  {j.must_have_skills && (
                    <div className="flex flex-wrap gap-1.5 mt-3">
                      {j.must_have_skills.split(',').slice(0, 4).map((s, i) => s.trim() && (
                        <span key={i} className="text-[10px] px-2 py-0.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300">{s.trim()}</span>
                      ))}
                    </div>
                  )}

                  <div className="mt-auto pt-4 flex items-center justify-between gap-2">
                    <span className="text-[11px] text-slate-400">
                      {appliedDate ? <span className="text-emerald-600 font-semibold">Applied {appliedDate}</span> : (j.created_at ? `Posted ${timeAgo(j.created_at)}` : '')}
                    </span>
                    {applied ? (
                      <span className="text-xs font-bold px-3 py-1.5 bg-emerald-100 text-emerald-700 border border-emerald-200 dark:bg-emerald-950/40 dark:text-emerald-300">Applied</span>
                    ) : (
                      <button
                        onClick={() => onApply(j)}
                        disabled={applying === j.id}
                        className="text-xs font-bold px-4 py-1.5 bg-[#405189] text-white hover:bg-[#334267] transition disabled:opacity-50"
                      >
                        {applying === j.id ? 'Applying…' : 'Apply'}
                      </button>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {!loading && count > PAGE_SIZE && (
          <div className="flex items-center justify-center gap-3 mt-8 text-sm">
            <button disabled={page <= 1} onClick={() => load(q, page - 1)}
              className="px-4 py-2 border border-slate-200 dark:border-slate-800 font-bold disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-100 dark:hover:bg-slate-800 transition">Prev</button>
            <span className="text-slate-500">Page {page} of {totalPages}</span>
            <button disabled={page >= totalPages} onClick={() => load(q, page + 1)}
              className="px-4 py-2 border border-slate-200 dark:border-slate-800 font-bold disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-100 dark:hover:bg-slate-800 transition">Next</button>
          </div>
        )}
      </div>
      <CareersFooter />
    </div>
  );
}

export default function CareersJobsPage() {
  return (
    <Suspense fallback={<div className="min-h-screen bg-slate-50"><CareersHeader /></div>}>
      <JobsInner />
    </Suspense>
  );
}