'use client';

import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import { Briefcase, LogIn, MapPin, UserPlus } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { JobDetailBody, JobDetailHero } from '@/components/jobs/JobDetailHero';
import { ShareButton } from '@/components/share/ShareButton';
import { api } from '@/lib/api';
import { buildJobSharePayload } from '@/lib/share';

export default function PublicJobPage() {
  const { id } = useParams<{ id: string }>();
  const [job, setJob] = useState<Record<string, unknown> | null>(null);

  useEffect(() => {
    if (!id) return;
    api<{ data: Record<string, unknown> }>(`/jobs/${id}`)
      .then((res) => setJob(res.data))
      .catch(console.error);
  }, [id]);

  if (!job) {
    return (
      <div className="flex items-center justify-center min-h-[50vh] text-muted">
        <div className="loading-spinner" />
      </div>
    );
  }

  const category = job.category as { name: string; slug?: string } | undefined;
  const mapHref = category?.slug ? `/map?filter=jobs&category=${category.slug}` : '/map?filter=jobs';
  const sharePayload = buildJobSharePayload(job);

  return (
    <div>
      <JobDetailHero
        title={job.title as string}
        category={category?.name}
        status={job.status as string}
        location={job.location as string}
        postedAt={job.createdAt as string}
        dateNeeded={(job.dateNeeded as string | null) ?? null}
        budget={job.budget != null ? Number(job.budget) : null}
        backHref="/jobs"
        backLabel="Back to jobs"
        extraActions={<ShareButton payload={sharePayload} variant="heroOutline" />}
        actions={[
          { href: mapHref, label: 'Map view', icon: MapPin, variant: 'heroOutline' },
          { href: `/login?redirect=/worker/jobs/${id}`, label: 'Apply as worker', icon: LogIn, variant: 'accent' },
        ]}
      />

      <JobDetailBody
        description={job.description as string}
        job={{
          id: job.id as string,
          title: job.title as string,
          location: job.location as string,
          latitude: job.latitude as number | null,
          longitude: job.longitude as number | null,
        }}
      >
        <section className="rounded-xl border border-border bg-slate-50 p-6 text-center">
          <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
            <Briefcase className="h-6 w-6" />
          </div>
          <h2 className="font-bold text-slate-900">Interested in this job?</h2>
          <p className="text-sm text-muted mt-2 max-w-sm mx-auto">
            Sign in or register as a worker to submit a quotation.
          </p>
          <div className="flex flex-col sm:flex-row gap-2 justify-center mt-5">
            <Link href={`/login?redirect=/worker/jobs/${id}`}>
              <Button className="gap-2 w-full sm:w-auto">
                <LogIn className="h-4 w-4" />
                Sign in as Worker
              </Button>
            </Link>
            <Link href="/register/worker">
              <Button variant="outline" className="gap-2 w-full sm:w-auto">
                <UserPlus className="h-4 w-4" />
                Register as Worker
              </Button>
            </Link>
          </div>
        </section>
      </JobDetailBody>
    </div>
  );
}