'use client';

// Read-only, no-login job view rendered at /jobs (and /jobs/<id>) for anonymous
// visitors. It uses ONLY the public API (via lib/careers) and shows no management
// actions — the authenticated management page is rendered instead once logged in.
import Link from 'next/link';
import { useEffect, useMemo, useState } from 'react';
import CareersHeader from '@/components/careers/CareersHeader';
import CareersFooter from '@/components/careers/CareersFooter';
import { fetchPublicJobsPaged, fetchPublicJob, timeAgo, type PublicJob } from '@/lib/careers';
import { cleanHtmlText } from '@/lib/format';

const PAGE_SIZE = 9;

function Field({ label, value }: { label: string; value?: string | number | null }) {
  if (value === undefined || value === null || value === '') return null;
  const strVal = typeof value === 'string' ? cleanHtmlText(value) : value;
  if (!strVal) return null;
  return (
    <div>
      <p className="text-[10px] font-bold uppercase tracking-wide text-slate-400">{label}</p>
      <p className="text-sm text-slate-800 dark:text-slate-200 whitespace-pre-line">{strVal}</p>
    </div>
  );
}

/** Detail view for /jobs/<id> when logged out. */
function PublicJobDetail({ id }: { id: string }) {
  const [job, setJob] = useState<PublicJob | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    let alive = true;
    setLoading(true);
    fetchPublicJob(id)
      .then((j) => { if (alive) { setJob(j); setError(false); } })
      .catch(() => { if (alive) setError(true); })
      .finally(() => { if (alive) setLoading(false); });
    return () => { alive = false; };
  }, [id]);

  return (
    <div className="min-h-screen flex flex-col bg-[#f3f3f9] dark:bg-slate-950">
      <CareersHeader />
      <main className="flex-1 w-full max-w-4xl mx-auto px-4 py-8">
        <Link href="/jobs" className="text-sm text-[#405189] dark:text-indigo-400 hover:underline">&larr; All jobs</Link>
        {loading ? (
          <p className="text-slate-400 mt-6">Loading…</p>
        ) : error || !job ? (
          <p className="text-slate-500 mt-6">This job is not available.</p>
        ) : (
          <div className="mt-4 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 space-y-5">
            <div>
              <h1 className="text-2xl font-black text-slate-800 dark:text-white">{job.title}</h1>
              <p className="text-sm text-slate-500 mt-1">
                {[job.client_name, job.location, job.experience_band].filter(Boolean).join(' · ')}
                {job.created_at ? ` · Posted ${timeAgo(job.created_at)}` : ''}
              </p>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <Field label="Department" value={job.department} />
              <Field label="Location" value={job.location} />
              <Field label="Experience" value={job.experience_band} />
              <Field label="CTC" value={job.ctc_band} />
              <Field label="Notice period" value={job.notice_period} />
              <Field label="Shift" value={job.shift} />
              <Field label="Working days" value={job.working_days} />
              <Field label="Positions" value={job.num_positions ?? undefined} />
              <Field label="Qualifications" value={job.qualifications} />
              <Field label="Certification" value={job.certification} />
            </div>
            <Field label="Must-have skills" value={job.must_have_skills} />
            <Field label="Good-to-have skills" value={job.good_to_have_skills} />
            <Field label="Job details" value={job.work_details} />
            <div className="pt-2">
              {/* Applying requires a candidate account — send to register carrying the job. */}
              <Link href={`/register?job=${job.public_id || job.id}`}
                className="inline-block bg-[#405189] hover:bg-[#334267] text-white font-bold text-sm px-6 py-2.5 transition">
                Apply for this job
              </Link>
            </div>
          </div>
        )}
      </main>
      <CareersFooter />
    </div>
  );
}

/** List view for /jobs when logged out. */
function PublicJobList() {
  const [jobs, setJobs] = useState<PublicJob[]>([]);
  const [count, setCount] = useState(0);
  const [page, setPage] = useState(1);
  const [q, setQ] = useState('');
  const [term, setTerm] = useState('');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let alive = true;
    setLoading(true);
    fetchPublicJobsPaged(page, PAGE_SIZE, term)
      .then((res) => { if (alive) { setJobs(res.results); setCount(res.count); } })
      .catch(() => { if (alive) { setJobs([]); setCount(0); } })
      .finally(() => { if (alive) setLoading(false); });
    return () => { alive = false; };
  }, [page, term]);

  const totalPages = useMemo(() => Math.max(1, Math.ceil(count / PAGE_SIZE)), [count]);

  return (
    <div className="min-h-screen flex flex-col bg-[#f3f3f9] dark:bg-slate-950">
      <CareersHeader />
      <main className="flex-1 w-full max-w-6xl mx-auto px-4 py-8">
        <h1 className="text-2xl font-black text-slate-800 dark:text-white">Open positions</h1>
        <p className="text-sm text-slate-500 mt-1">Browse our current job openings. No account needed to view.</p>

        <form onSubmit={(e) => { e.preventDefault(); setPage(1); setTerm(q); }} className="mt-4 flex gap-2 max-w-md">
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search title, skill, location…"
            className="flex-1 px-3 py-2.5 text-sm border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 focus:outline-none" />
          <button type="submit" className="bg-[#405189] hover:bg-[#334267] text-white font-bold text-sm px-5 transition">Search</button>
        </form>

        {loading ? (
          <p className="text-slate-400 mt-8">Loading…</p>
        ) : jobs.length === 0 ? (
          <p className="text-slate-500 mt-8">No open positions right now.</p>
        ) : (
          <>
            <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
              {jobs.map((job) => (
                <Link key={job.id} href={`/jobs/${job.public_id || job.id}`}
                  className="block bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 hover:border-[#405189] transition">
                  <h2 className="font-black text-slate-800 dark:text-white">{job.title}</h2>
                  <p className="text-xs text-slate-500 mt-1">{[job.client_name, job.location].filter(Boolean).join(' · ')}</p>
                  <div className="flex flex-wrap gap-1.5 mt-3 text-[10px] font-bold">
                    {job.experience_band && <span className="px-2 py-0.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300">{job.experience_band}</span>}
                    {job.ctc_band && <span className="px-2 py-0.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300">{job.ctc_band}</span>}
                  </div>
                  {job.created_at && <p className="text-[10px] text-slate-400 mt-3">Posted {timeAgo(job.created_at)}</p>}
                </Link>
              ))}
            </div>

            {totalPages > 1 && (
              <div className="flex items-center justify-center gap-2 mt-8 text-sm">
                <button disabled={page <= 1} onClick={() => setPage((p) => p - 1)}
                  className="px-3 py-1.5 border border-slate-200 dark:border-slate-800 disabled:opacity-40">Prev</button>
                <span className="text-slate-500">Page {page} of {totalPages}</span>
                <button disabled={page >= totalPages} onClick={() => setPage((p) => p + 1)}
                  className="px-3 py-1.5 border border-slate-200 dark:border-slate-800 disabled:opacity-40">Next</button>
              </div>
            )}
          </>
        )}
      </main>
      <CareersFooter />
    </div>
  );
}

/** Chooses list vs detail from the current /jobs path. */
export default function PublicJobsView({ pathname }: { pathname: string }) {
  const m = pathname.match(/^\/jobs\/([^/]+)$/);
  if (m) return <PublicJobDetail id={m[1]} />;
  return <PublicJobList />;
}