import type { Metadata } from "next";
import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { ChevronLeft, Upload, FileText, Send, Lock } from "lucide-react";
import { mkdir, writeFile } from "node:fs/promises";
import path from "node:path";
import { randomUUID } from "node:crypto";
import { db } from "@/lib/db";
import { auth } from "@/auth";

export const metadata: Metadata = { title: "Apply for Job" };

async function saveResumeFile(file: File): Promise<string> {
  const ext = path.extname(file.name || "").toLowerCase() || ".pdf";
  const safeExt = ext.replace(/[^.a-z0-9]/g, "") || ".pdf";
  const fileName = `${Date.now()}-${randomUUID()}${safeExt}`;
  const dir = path.join(process.cwd(), "public", "uploads", "resumes");
  await mkdir(dir, { recursive: true });
  const bytes = Buffer.from(await file.arrayBuffer());
  await writeFile(path.join(dir, fileName), bytes);
  return `/uploads/resumes/${fileName}`;
}

export default async function ApplyJobPage({ params }: { params: { id: string } }) {
  const jobId = params.id;
  const [session, job] = await Promise.all([
    auth(),
    db.job.findUnique({ where: { id: jobId } }),
  ]);

  if (!job || !job.isActive) notFound();
  if (!session?.user?.id) redirect(`/login?next=${encodeURIComponent(`/jobs/${params.id}/apply`)}`);

  const role = session.user.role;
  const modules = session.user.modules ?? [];
  const hasJobAccess = role === "admin" || role === "super_admin" || modules.includes("job_seeker");
  if (!hasJobAccess) redirect(`/subscribe?required=job_seeker`);

  async function submitApplication(formData: FormData) {
    "use server";

    const liveSession = await auth();
    if (!liveSession?.user?.id) redirect(`/login?next=${encodeURIComponent(`/jobs/${params.id}/apply`)}`);

    const liveJob = await db.job.findUnique({ where: { id: jobId }, select: { id: true, isActive: true } });
    if (!liveJob || !liveJob.isActive) notFound();

    const coverLetter = String(formData.get("coverLetter") || "").trim() || null;
    const resumeFile = formData.get("resumeFile") as File | null;

    let resumeUrl: string | null = null;
    if (resumeFile && resumeFile.size > 0) {
      resumeUrl = await saveResumeFile(resumeFile);
    }

    await db.jobApplication.upsert({
      where: {
        jobId_userId: {
          jobId,
          userId: liveSession.user.id,
        },
      },
      update: {
        coverLetter,
        ...(resumeUrl ? { resumeUrl } : {}),
        status: "submitted",
      },
      create: {
        jobId,
        userId: liveSession.user.id,
        coverLetter,
        resumeUrl,
        status: "submitted",
      },
    });

    redirect("/dashboard?applied=1");
  }

  return (
    <div className="min-h-screen bg-neutral-50">
      <div className="max-w-2xl mx-auto px-4 sm:px-6 py-10">
        <Link href={`/jobs/${params.id}`} className="flex items-center gap-1.5 text-sm text-neutral-500 hover:text-navy-700 mb-8">
          <ChevronLeft size={15} /> Back to Job
        </Link>

        <div className="bg-white rounded-2xl border border-neutral-200 p-8">
          <div className="mb-8">
            <h1 className="text-2xl font-bold text-navy-800">Apply for Position</h1>
            <p className="text-neutral-500 mt-1">{job.title} at {job.company || "Company"}</p>
          </div>

          <form action={submitApplication} className="space-y-6">
            <div className="grid md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-neutral-700 mb-1.5">Full Name</label>
                <input type="text" className="w-full px-3 py-2.5 border border-neutral-300 rounded-lg text-sm focus:outline-none focus:border-navy-500" required />
              </div>
              <div>
                <label className="block text-sm font-medium text-neutral-700 mb-1.5">Email</label>
                <input type="email" className="w-full px-3 py-2.5 border border-neutral-300 rounded-lg text-sm focus:outline-none focus:border-navy-500" required />
              </div>
              <div>
                <label className="block text-sm font-medium text-neutral-700 mb-1.5">Phone</label>
                <input type="tel" className="w-full px-3 py-2.5 border border-neutral-300 rounded-lg text-sm focus:outline-none focus:border-navy-500" />
              </div>
              <div>
                <label className="block text-sm font-medium text-neutral-700 mb-1.5">Years of Experience</label>
                <select className="w-full px-3 py-2.5 border border-neutral-300 rounded-lg text-sm focus:outline-none">
                  <option>1-2 years</option>
                  <option>3-5 years</option>
                  <option>5-8 years</option>
                  <option>8+ years</option>
                </select>
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-neutral-700 mb-1.5">Resume / CV</label>
              <label className="border-2 border-dashed border-neutral-300 rounded-xl p-8 text-center hover:border-navy-400 transition-colors cursor-pointer block">
                <Upload size={28} className="text-neutral-400 mx-auto mb-2" />
                <p className="text-sm text-neutral-600 font-medium">Drop your resume here</p>
                <p className="text-xs text-neutral-400 mt-1">PDF, DOC, DOCX up to 5MB</p>
                <span className="mt-3 inline-block px-4 py-1.5 border border-neutral-300 rounded-lg text-xs font-medium text-neutral-700 hover:border-navy-400">
                  Browse Files
                </span>
                <input name="resumeFile" type="file" accept=".pdf,.doc,.docx" className="hidden" />
              </label>
            </div>

            <div>
              <label className="block text-sm font-medium text-neutral-700 mb-1.5">Cover Letter <span className="text-neutral-400">(optional)</span></label>
              <textarea
                name="coverLetter"
                rows={5}
                placeholder="Tell the employer why you are a great fit for this role..."
                className="w-full px-3 py-2.5 border border-neutral-300 rounded-lg text-sm focus:outline-none focus:border-navy-500 resize-none"
              />
            </div>

            <div className="flex items-center gap-2 p-3 bg-emerald-50 border border-emerald-200 rounded-lg text-xs text-emerald-700">
              <Lock size={13} className="shrink-0" />
              Your details are securely stored and only shared with this employer.
            </div>

            <button type="submit" className="w-full flex items-center justify-center gap-2 py-3 bg-navy-700 text-white font-semibold rounded-xl hover:bg-navy-800 transition-colors">
              <Send size={16} /> Submit Application
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}