import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { MapPin, Clock, Building2, ChevronLeft, Briefcase, DollarSign, Lock, CheckCircle, Share2, Bookmark } from "lucide-react";
import { db } from "@/lib/db";
import { auth } from "@/auth";

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

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

  if (!job || !job.isActive) notFound();

  const role = session?.user?.role;
  const modules = session?.user?.modules ?? [];
  const hasJobAccess = role === "admin" || role === "super_admin" || modules.includes("job_seeker");

  const postedAtText = job.postedAt ? new Date(job.postedAt).toLocaleDateString("en-MY", { day: "2-digit", month: "short", year: "numeric" }) : "Recently";

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

        <div className="grid lg:grid-cols-3 gap-8">
          {/* Main */}
          <div className="lg:col-span-2 space-y-6">
            <div className="bg-white rounded-2xl border border-neutral-200 p-7">
              <div className="flex items-start gap-5 mb-6">
                <div className="w-16 h-16 bg-neutral-100 rounded-2xl flex items-center justify-center text-3xl shrink-0">🚗</div>
                <div className="flex-1">
                  <h1 className="text-2xl font-bold text-navy-800">{job.title}</h1>
                  <div className="flex flex-wrap items-center gap-3 mt-2 text-sm text-neutral-500">
                    <span className="flex items-center gap-1"><Building2 size={14} /> {job.company || "Confidential"}</span>
                    <span className="flex items-center gap-1"><MapPin size={14} /> {job.location || "Malaysia"}</span>
                    <span className="flex items-center gap-1"><Clock size={14} /> Posted {postedAtText}</span>
                  </div>
                </div>
                <div className="flex gap-2">
                  <button className="p-2 border border-neutral-200 rounded-lg text-neutral-500 hover:border-navy-300 hover:text-navy-700"><Bookmark size={16} /></button>
                  <button className="p-2 border border-neutral-200 rounded-lg text-neutral-500 hover:border-navy-300 hover:text-navy-700"><Share2 size={16} /></button>
                </div>
              </div>

              <div className="grid grid-cols-3 gap-4 mb-6">
                {[
                  { label: "Job Type", value: job.jobType || "Full-time", icon: Briefcase },
                  { label: "Salary", value: job.salary || "Negotiable", icon: DollarSign },
                  { label: "Location", value: job.location || "Malaysia", icon: MapPin },
                ].map(({ label, value, icon: Icon }) => (
                  <div key={label} className="bg-neutral-50 rounded-xl p-4 border border-neutral-200 text-center">
                    <Icon size={16} className="text-navy-700 mx-auto mb-1.5" />
                    <div className="text-xs text-neutral-400">{label}</div>
                    <div className="text-sm font-semibold text-navy-800 mt-0.5">{value}</div>
                  </div>
                ))}
              </div>

              <div className="flex flex-wrap gap-2 mb-6">
                {["React", "Node.js", "TypeScript", "AWS", "PostgreSQL"].map(tag => (
                  <span key={tag} className="text-xs bg-navy-50 text-navy-700 px-3 py-1 rounded-full font-medium">{tag}</span>
                ))}
              </div>

              <div className="space-y-4 text-neutral-600 leading-relaxed text-sm">
                <h2 className="text-base font-semibold text-navy-800">About the Role</h2>
                <p>{job.description || "Job details will be shared by the employer during the hiring process."}</p>
                <h2 className="text-base font-semibold text-navy-800">Responsibilities</h2>
                <ul className="space-y-2">
                  {["Design and implement scalable backend microservices", "Lead technical design and code reviews", "Collaborate with product managers and designers", "Mentor junior engineers"].map(r => (
                    <li key={r} className="flex items-start gap-2"><CheckCircle size={14} className="text-emerald-500 mt-0.5 shrink-0" />{r}</li>
                  ))}
                </ul>
              </div>
            </div>
          </div>

          {/* Sidebar */}
          <div className="space-y-5">
            <div className="bg-white rounded-2xl border border-neutral-200 p-6">
              <div className="text-lg font-bold text-navy-800 mb-1">{job.salary || "Negotiable"}</div>
              <div className="text-sm text-neutral-500 mb-5">per month</div>

              {!hasJobAccess && (
                <div className="bg-gold-50 border border-gold-200 rounded-xl p-4 mb-5">
                  <div className="flex items-center gap-2 text-gold-700 font-medium text-sm mb-1.5">
                    <Lock size={14} /> Job Seeker plan required
                  </div>
                  <p className="text-xs text-neutral-600">Subscribe at $49/month to apply and track your applications.</p>
                </div>
              )}

              <Link href={hasJobAccess ? `/jobs/${job.id}/apply` : "/register?plan=job_seeker"} 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 text-sm mb-3">
                {hasJobAccess ? "Apply Now" : "Subscribe & Apply"}
              </Link>
              <button className="w-full py-2.5 border-2 border-neutral-200 text-neutral-700 font-medium rounded-xl text-sm hover:border-navy-300 transition-colors">
                Save Job
              </button>
            </div>

            <div className="bg-white rounded-2xl border border-neutral-200 p-6">
              <h3 className="font-semibold text-navy-800 mb-3">About Grab</h3>
              <div className="flex items-center gap-3 mb-3">
                <div className="w-10 h-10 bg-neutral-100 rounded-xl flex items-center justify-center text-xl">🚗</div>
                <div>
                  <div className="font-medium text-navy-800 text-sm">{job.company || "Company"}</div>
                  <div className="text-xs text-neutral-400">Technology · 5,000+ employees</div>
                </div>
              </div>
              <p className="text-xs text-neutral-500 leading-relaxed">Southeast Asia largest super app — providing ride-hailing, food delivery, logistics, and financial services.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}