import Link from "next/link";
import { notFound } from "next/navigation";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { applyJobAction, updateApplicantStatusAction } from "@/server/actions/jobs";

export default async function JobDetailPage({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ error?: string; ok?: string }>;
}) {
  const { id } = await params;
  const sp = await searchParams;
  const session = await auth();
  const job = await prisma.job.findUnique({
    where: { id: Number(id) },
    include: { applicants: { orderBy: { at: "desc" } } },
  });
  if (!job) notFound();
  const isPoster = session?.user?.email === job.posterEmail;

  return (
    <div className="mx-auto max-w-2xl">
      <Link href="/empleos" className="text-sm text-[var(--lime)]">
        ← Empleos
      </Link>
      <div className="card mt-4">
        <div className="flex flex-wrap items-center gap-2">
          <h1 className="text-2xl font-semibold">{job.title}</h1>
          <span className="badge">{job.type.replace("_", " ")}</span>
        </div>
        <p className="mt-1 text-white/60">
          {job.company} · {job.city} · {job.salary}
        </p>
        <p className="mt-4 text-white/80">{job.description}</p>
        {job.requirements && (
          <p className="mt-3 text-sm text-white/60">
            <strong>Requisitos:</strong> {job.requirements}
          </p>
        )}
      </div>

      {sp.ok && (
        <p className="mt-3 text-sm text-[var(--lime)]">Aplicacion enviada.</p>
      )}
      {sp.error && <p className="mt-3 text-sm text-red-300">{sp.error}</p>}

      {session && !isPoster && (
        <form action={applyJobAction} className="card mt-4 space-y-3">
          <h2 className="font-semibold">Aplicar</h2>
          <input type="hidden" name="jobId" value={job.id} />
          <input className="input" name="phone" placeholder="Telefono" />
          <input className="input" name="city" placeholder="Ciudad" defaultValue={session.user.city || ""} />
          <textarea className="input" name="experience" placeholder="Experiencia" />
          <input className="input" name="availability" placeholder="Disponibilidad" />
          <input className="input" name="education" placeholder="Educacion" />
          <input className="input" name="link" placeholder="Portfolio / LinkedIn" />
          <textarea className="input" name="message" placeholder="Mensaje" />
          <div>
            <label className="label">Resume (requerido)</label>
            <input className="input" name="resume" type="file" accept=".pdf,.doc,.docx,image/*" required />
          </div>
          <button className="btn-primary" type="submit">
            Enviar aplicacion
          </button>
        </form>
      )}

      {!session && (
        <Link href="/login" className="btn-primary mt-4 inline-flex">
          Inicia sesion para aplicar
        </Link>
      )}

      {isPoster && (
        <div className="card mt-4">
          <h2 className="font-semibold">Aplicantes ({job.applicants.length})</h2>
          <div className="mt-3 space-y-3">
            {job.applicants.map((a) => (
              <div key={a.id} className="rounded-xl border border-white/10 p-3">
                <p className="font-medium">
                  {a.name} · {a.email}
                </p>
                <p className="text-sm text-white/60">
                  {a.city} · {a.availability} · {a.status}
                </p>
                <p className="mt-1 text-sm text-white/70">{a.message}</p>
                {a.resumePath && (
                  <a className="text-sm text-[var(--lime)]" href={a.resumePath} target="_blank">
                    Ver resume
                  </a>
                )}
                <form action={updateApplicantStatusAction} className="mt-2 flex gap-2">
                  <input type="hidden" name="appId" value={a.id} />
                  <select className="input" name="status" defaultValue={a.status}>
                    <option value="new">new</option>
                    <option value="reviewed">reviewed</option>
                    <option value="interview">interview</option>
                    <option value="hired">hired</option>
                    <option value="rejected">rejected</option>
                  </select>
                  <button className="btn-ghost" type="submit">
                    Actualizar
                  </button>
                </form>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}