import {notFound, redirect} from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import {auth} from "@/auth";
import {prisma} from "@/lib/db/prisma";
import {getTenantDb} from "@/lib/db/tenant";
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
import {Button} from "@/components/ui/button";
import {ArrowLeft, Car, Pencil, Trash2} from "lucide-react";
import {VehicleStatusControl} from "./vehicle-status-control";

type VehicleDetailPageProps = {
  params: Promise<{tenantSlug: string; vehicleId: string; locale: string}>;
};

const statusColors: Record<string, string> = {
  AVAILABLE: "bg-green-100 text-green-700",
  RESERVED: "bg-yellow-100 text-yellow-700",
  RENTED: "bg-blue-100 text-blue-700",
  MAINTENANCE: "bg-orange-100 text-orange-700",
  INACTIVE: "bg-slate-100 text-slate-600",
  ARCHIVED: "bg-gray-100 text-gray-600"
};

export default async function VehicleDetailPage({params}: VehicleDetailPageProps) {
  const {tenantSlug, vehicleId, locale} = await params;
  const session = await auth();
  if (!session?.user?.id) redirect(`/${locale}/auth/sign-in`);

  const tenant = await prisma.tenant.findUnique({where: {slug: tenantSlug}});
  if (!tenant) notFound();

  const db = getTenantDb(tenant.id);
  const vehicle = await db.vehicle.findFirst({
    where: {id: vehicleId},
    include: {brand: true, model: true, branch: true, images: {orderBy: {sortOrder: "asc"}}}
  });

  if (!vehicle) notFound();

  const recentBookings = await db.booking.findMany({
    where: {vehicleId},
    include: {customerProfile: {include: {user: {select: {firstName: true, lastName: true, email: true}}}}},
    orderBy: {createdAt: "desc"},
    take: 5
  });

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-3">
          <Link href={`/company/${tenantSlug}/fleet`}>
            <Button variant="ghost" size="sm">
              <ArrowLeft className="mr-1 h-4 w-4" />
              Fleet
            </Button>
          </Link>
          <div>
            <h1 className="text-xl font-bold text-slate-900">{vehicle.name}</h1>
            <p className="text-sm text-slate-500">{vehicle.brand.name} · {vehicle.year}</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <span className={`rounded-full px-3 py-1 text-sm font-medium ${statusColors[vehicle.status] ?? "bg-slate-100"}`}>
            {vehicle.status}
          </span>
          <Link href={`/company/${tenantSlug}/fleet/${vehicleId}/edit`}>
            <Button variant="outline" size="sm">
              <Pencil className="mr-1 h-4 w-4" />
              Edit
            </Button>
          </Link>
        </div>
      </div>

      <div className="grid gap-6 lg:grid-cols-3">
        {/* Main Info */}
        <div className="lg:col-span-2 space-y-5">
          {/* Image */}
          <div className="relative h-60 overflow-hidden rounded-2xl border border-slate-200 bg-slate-100">
            {vehicle.primaryImageUrl ? (
              <Image src={vehicle.primaryImageUrl} alt={vehicle.name} fill className="object-cover" unoptimized />
            ) : (
              <div className="flex h-full items-center justify-center">
                <Car className="h-20 w-20 text-slate-300" />
              </div>
            )}
          </div>

          {/* Specs */}
          <Card>
            <CardHeader><CardTitle>Vehicle Specifications</CardTitle></CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 text-sm">
                {[
                  {label: "Plate", value: vehicle.plateNumber},
                  {label: "VIN", value: vehicle.vin},
                  {label: "Category", value: vehicle.category},
                  {label: "Transmission", value: vehicle.transmission},
                  {label: "Fuel", value: vehicle.fuelType},
                  {label: "Seats", value: `${vehicle.seats}`},
                  ...(vehicle.doors ? [{label: "Doors", value: `${vehicle.doors}`}] : []),
                  ...(vehicle.color ? [{label: "Color", value: vehicle.color}] : []),
                  {label: "Branch", value: vehicle.branch.name}
                ].map(({label, value}) => (
                  <div key={label} className="rounded-xl bg-slate-50 p-3">
                    <p className="text-xs text-slate-500">{label}</p>
                    <p className="mt-0.5 font-medium text-slate-900">{value}</p>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* Recent Bookings */}
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle>Recent Bookings</CardTitle>
              <Link href={`/company/${tenantSlug}/bookings`}>
                <Button variant="ghost" size="sm">View All</Button>
              </Link>
            </CardHeader>
            <CardContent>
              {recentBookings.length === 0 ? (
                <p className="py-4 text-center text-sm text-slate-400">No bookings for this vehicle</p>
              ) : (
                <div className="space-y-2">
                  {recentBookings.map((b) => (
                    <Link key={b.id} href={`/company/${tenantSlug}/bookings/${b.id}`}>
                      <div className="flex items-center justify-between rounded-xl border border-slate-100 p-3 transition hover:bg-slate-50 text-sm">
                        <div>
                          <p className="font-mono text-xs text-blue-600">{b.bookingNumber}</p>
                          <p className="text-slate-600">
                            {b.customerProfile.user.firstName ?? b.customerProfile.user.email}
                          </p>
                        </div>
                        <span className="text-xs text-slate-500">{new Date(b.createdAt).toLocaleDateString()}</span>
                      </div>
                    </Link>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </div>

        {/* Pricing Sidebar */}
        <div className="space-y-4">
          <Card>
            <CardHeader><CardTitle>Pricing</CardTitle></CardHeader>
            <CardContent className="space-y-3 text-sm">
              <div className="flex justify-between">
                <span className="text-slate-600">Daily Rate</span>
                <span className="font-bold text-slate-900">${Number(vehicle.dailyRate).toFixed(2)}</span>
              </div>
              {vehicle.weeklyRate && (
                <div className="flex justify-between">
                  <span className="text-slate-600">Weekly Rate</span>
                  <span className="font-semibold">${Number(vehicle.weeklyRate).toFixed(2)}</span>
                </div>
              )}
              {vehicle.monthlyRate && (
                <div className="flex justify-between">
                  <span className="text-slate-600">Monthly Rate</span>
                  <span className="font-semibold">${Number(vehicle.monthlyRate).toFixed(2)}</span>
                </div>
              )}
              <div className="flex justify-between">
                <span className="text-slate-600">Deposit</span>
                <span className="font-semibold">${Number(vehicle.depositAmount).toFixed(2)}</span>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader><CardTitle>Features</CardTitle></CardHeader>
            <CardContent className="space-y-2 text-sm">
              {[
                {label: "Air Conditioning", value: vehicle.airConditioning},
                {label: "GPS", value: vehicle.hasGps},
                {label: "Bluetooth", value: vehicle.hasBluetooth},
                {label: "Insurance", value: vehicle.insuranceIncluded},
                {label: "Public Listing", value: vehicle.isPublic},
                {label: "Featured", value: vehicle.featured}
              ].map(({label, value}) => (
                <div key={label} className="flex items-center justify-between">
                  <span className="text-slate-600">{label}</span>
                  <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${value ? "bg-green-100 text-green-700" : "bg-slate-100 text-slate-500"}`}>
                    {value ? "Yes" : "No"}
                  </span>
                </div>
              ))}
            </CardContent>
          </Card>

          <VehicleStatusControl
            vehicleId={vehicle.id}
            tenantSlug={tenantSlug}
            currentStatus={vehicle.status}
          />
        </div>
      </div>
    </div>
  );
}