import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { notFound, redirect } from "next/navigation";
import { MapPin, Clock, Users, Star, CheckCircle, Calendar, Shield, ArrowLeft, Phone } from "lucide-react";
import { db } from "@/lib/db";
import { auth } from "@/auth";

export const metadata: Metadata = { title: "Tour Details" };

export default async function TourDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id: lookup } = await params;
  const [session, tour] = await Promise.all([
    auth(),
    db.tourPackage.findFirst({
      where: {
        isActive: true,
        OR: [{ id: lookup }, { slug: lookup }],
      },
      include: {
        category: true,
        images: { orderBy: { sortOrder: "asc" } },
      },
    }),
  ]);

  if (!tour) notFound();
  const tourId = tour.id;

  const image = tour.images[0]?.url || "https://images.unsplash.com/photo-1537953773345-d172ccf13cf1?w=1200&q=80";
  const itineraryItems = (tour.itinerary || "")
    .split("\n")
    .map((l) => l.trim())
    .filter(Boolean);
  const inclusions = (tour.inclusions || "")
    .split("\n")
    .map((l) => l.trim())
    .filter(Boolean);

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

    const name = String(formData.get("name") || "").trim();
    const email = String(formData.get("email") || "").trim();
    const phone = String(formData.get("phone") || "").trim() || null;
    const paxRaw = String(formData.get("pax") || "").trim();
    const pax = paxRaw ? Number(paxRaw) : null;
    const dateRaw = String(formData.get("date") || "").trim();
    const message = String(formData.get("message") || "").trim() || null;

    if (!name || !email) return;

    const liveSession = await auth();

    await db.tourBooking.create({
      data: {
        packageId: tourId,
        userId: liveSession?.user?.id || null,
        name,
        email,
        phone,
        pax,
        date: dateRaw ? new Date(dateRaw) : null,
        message,
        status: "enquiry",
      },
    });

    redirect(`/tours/${lookup}?booked=1`);
  }

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
      <Link href="/tours" className="inline-flex items-center gap-2 text-sm text-neutral-500 hover:text-navy-700 mb-6">
        <ArrowLeft size={14} /> Back to Tours
      </Link>

      <div className="grid lg:grid-cols-3 gap-8">
        <div className="lg:col-span-2 space-y-8">
          <div className="relative rounded-2xl h-72 overflow-hidden">
            <Image src={image} alt={tour.title} fill className="object-cover" unoptimized />
          </div>

          <div>
            <div className="flex flex-wrap items-center gap-3 mb-3">
              <span className="px-3 py-1 bg-navy-50 text-navy-700 text-xs font-semibold rounded-full">{tour.category?.name || "Tours"}</span>
              <span className="flex items-center gap-1 text-sm text-neutral-500"><MapPin size={13} /> {tour.destination || "Destination"}</span>
              <span className="flex items-center gap-1 text-sm text-gold-600"><Star size={13} className="fill-gold-500" /> 4.9 (verified)</span>
            </div>
            <h1 className="text-3xl font-bold text-neutral-900">{tour.title}</h1>
            <p className="text-neutral-500 mt-2 leading-relaxed">
              {tour.description || "Curated travel package managed by KC Systems Tours."}
            </p>
          </div>

          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
            {[
              { label: "Duration", value: tour.duration || "Flexible", icon: Clock },
              { label: "Group Size", value: `Min ${tour.minPax}${tour.maxPax ? ` · Max ${tour.maxPax}` : "+"} pax`, icon: Users },
              { label: "Departure", value: "Flexible dates", icon: Calendar },
              { label: "Destination", value: tour.destination || "Worldwide", icon: MapPin },
            ].map(({ label, value, icon: Icon }) => (
              <div key={label} className="bg-neutral-50 rounded-xl p-4 text-center">
                <Icon size={18} className="text-navy-600 mx-auto mb-2" />
                <div className="text-xs text-neutral-500">{label}</div>
                <div className="text-sm font-semibold text-neutral-900 mt-0.5">{value}</div>
              </div>
            ))}
          </div>

          <div>
            <h2 className="text-lg font-bold text-neutral-900 mb-4">Itinerary</h2>
            <div className="space-y-3">
              {(itineraryItems.length ? itineraryItems : ["Detailed itinerary is available upon enquiry."]).map((item, index) => (
                <div key={`${index}-${item}`} className="flex gap-4 p-4 bg-white border border-neutral-200 rounded-xl">
                  <div className="w-16 shrink-0 text-xs font-bold text-navy-700 bg-navy-50 rounded-lg flex items-center justify-center py-1">Day {index + 1}</div>
                  <div>
                    <div className="font-medium text-neutral-900 text-sm">Activity</div>
                    <div className="text-xs text-neutral-500 mt-0.5">{item}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <h2 className="text-lg font-bold text-neutral-900 mb-4">What's Included</h2>
            <div className="grid sm:grid-cols-2 gap-2">
              {(inclusions.length ? inclusions : ["Accommodation and itinerary details provided on confirmation", "Add-ons available upon request"]).map((item) => (
                <div key={item} className="flex items-center gap-2 text-sm text-neutral-700">
                  <CheckCircle size={15} className="text-emerald-500 shrink-0" /> {item}
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="space-y-5">
          <div className="bg-white border border-neutral-200 rounded-2xl p-6 sticky top-24">
            <div className="mb-4">
              <div className="text-3xl font-bold text-navy-900">${Number(tour.pricePerPax).toLocaleString()}</div>
              <div className="text-sm text-neutral-500">per person</div>
            </div>

            <form action={submitBooking} className="space-y-3 mb-5">
              <div>
                <label className="text-xs font-medium text-neutral-700 mb-1 block">Full Name</label>
                <input name="name" type="text" required className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-navy-500" defaultValue={session?.user?.name || ""} />
              </div>
              <div>
                <label className="text-xs font-medium text-neutral-700 mb-1 block">Email</label>
                <input name="email" type="email" required className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-navy-500" defaultValue={session?.user?.email || ""} />
              </div>
              <div>
                <label className="text-xs font-medium text-neutral-700 mb-1 block">Phone</label>
                <input name="phone" type="tel" className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-navy-500" />
              </div>
              <div>
                <label className="text-xs font-medium text-neutral-700 mb-1 block">Departure Date</label>
                <input name="date" type="date" className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-navy-500" />
              </div>
              <div>
                <label className="text-xs font-medium text-neutral-700 mb-1 block">Travellers</label>
                <input name="pax" type="number" min={tour.minPax} max={tour.maxPax || 99} defaultValue={tour.minPax} className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-navy-500" />
              </div>
              <div>
                <label className="text-xs font-medium text-neutral-700 mb-1 block">Message</label>
                <textarea name="message" rows={3} className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-navy-500" placeholder="Special requests, room preferences, etc." />
              </div>
              <button type="submit" className="w-full py-3 bg-gold-500 text-white font-semibold rounded-xl hover:bg-gold-400 transition-colors">
                Send Booking Enquiry
              </button>
            </form>

            <Link href={`https://wa.me/60123456789?text=${encodeURIComponent(`Hi, I want to enquire about ${tour.title}`)}`} target="_blank" className="block text-center w-full py-3 border border-navy-700 text-navy-700 font-medium rounded-xl hover:bg-navy-50 transition-colors text-sm">
              Enquire via WhatsApp
            </Link>

            <div className="mt-5 pt-5 border-t border-neutral-200 space-y-2">
              <div className="flex items-center gap-2 text-xs text-neutral-500"><Shield size={13} className="text-emerald-500" /> Free cancellation up to 30 days</div>
              <div className="flex items-center gap-2 text-xs text-neutral-500"><Phone size={13} className="text-navy-500" /> 24/7 travel support</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}