import Link from 'next/link';
import { redirect } from 'next/navigation';
import { ArrowRight, Plus } from 'lucide-react';
import { getApi } from '@/server/caller';

export const metadata = { title: 'Your jobs' };
export const dynamic = 'force-dynamic';

const STATUS_LABEL: Record<string, string> = {
  open: 'Looking for pros',
  matched: 'Pros interested',
  booked: 'Booked',
  completed: 'Done',
  cancelled: 'Cancelled',
};

export default async function JobsPage() {
  const api = await getApi();

  let jobs: Awaited<ReturnType<typeof api.job.mine>>;
  try {
    jobs = await api.job.mine();
  } catch {
    redirect('/sign-in?next=/jobs');
  }

  return (
    <main className="mx-auto max-w-2xl px-6 py-10">
      <div className="flex items-center justify-between gap-4">
        <h1 className="text-2xl font-semibold tracking-tight">Your jobs</h1>
        <Link
          href="/jobs/new"
          className="inline-flex items-center gap-1.5 rounded-xl bg-[var(--color-brand-500)] px-4 py-2.5 text-sm font-medium text-white"
        >
          <Plus className="h-4 w-4" aria-hidden />
          Post a job
        </Link>
      </div>

      {jobs.length === 0 ? (
        <p className="mt-10 rounded-2xl border border-dashed border-[var(--border)] p-8 text-center text-sm text-[var(--muted)]">
          Nothing yet. Post a job and start swiping.
        </p>
      ) : (
        <ul className="mt-6 space-y-2">
          {jobs.map((job) => (
            <li key={job.id}>
              <Link
                href={`/deck/${job.id}`}
                className="group flex items-center justify-between gap-4 rounded-xl border border-[var(--border)] bg-[var(--card)] px-4 py-3 transition hover:border-[var(--color-brand-500)]"
              >
                <span>
                  <span className="block font-medium">{job.title}</span>
                  <span className="block text-sm text-[var(--muted)]">
                    {STATUS_LABEL[job.status] ?? job.status} · {job.addressText}
                  </span>
                </span>
                <ArrowRight
                  className="h-4 w-4 shrink-0 text-[var(--color-brand-500)] transition group-hover:translate-x-0.5"
                  aria-hidden
                />
              </Link>
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}