"use client";

import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import {
  Package,
  Calendar,
  MapPin,
  Users,
  Search,
  Filter,
  IndianRupee,
  Eye,
  Clock,
  Sparkles,
  FileText,
  X,
  Hotel,
  Car,
  UserCheck,
} from "lucide-react";
import { cn } from "@/lib/utils";
import Link from "next/link";
import { useToastEnhanced } from "@/hooks/use-toast-enhanced";

const statusTabs = [
  { id: "all", label: "All Bookings" },
  { id: "upcoming", label: "Upcoming" },
  { id: "completed", label: "Completed" },
  { id: "cancelled", label: "Cancelled" },
];

const mockBookings = [
  {
    id: "CP001",
    package: "Custom Maharashtra Tour",
    category: "Heritage Tour",
    destinations: "Mumbai, Pune, Nashik, Shirdi",
    date: "Sep 15, 2024",
    duration: "5 Days, 4 Nights",
    travelers: "4 People",
    status: "completed",
    amount: 35000,
    hotelDetails: {
      hotels: [
        {
          name: "Mumbai Grand",
          location: "Mumbai",
          roomType: "Deluxe",
          nights: 2,
        },
        {
          name: "Pune Residency",
          location: "Pune",
          roomType: "Suite",
          nights: 1,
        },
        {
          name: "Shirdi Palace",
          location: "Shirdi",
          roomType: "Standard",
          nights: 1,
        },
      ],
    },
    vehicleDetails: {
      type: "Toyota Innova Crysta",
      capacity: "7 Seater",
      pickupLocation: "Mumbai Airport",
      dropLocation: "Mumbai Airport",
      includedKm: "1500 km",
    },
    passengerDetails: [
      {
        name: "Rajesh Kumar",
        age: 42,
        gender: "Male",
        idType: "Passport",
        idNumber: "P1234567",
      },
      {
        name: "Anjali Kumar",
        age: 38,
        gender: "Female",
        idType: "Passport",
        idNumber: "P7654321",
      },
      {
        name: "Rohan Kumar",
        age: 15,
        gender: "Male",
        idType: "Aadhaar",
        idNumber: "XXXX-XXXX-1234",
      },
      {
        name: "Riya Kumar",
        age: 12,
        gender: "Female",
        idType: "Aadhaar",
        idNumber: "XXXX-XXXX-5678",
      },
    ],
  },
  {
    id: "CP002",
    package: "Custom Konkan Tour",
    category: "Beach Tour",
    destinations: "Alibaug, Murud, Ganpatipule",
    date: "Dec 28, 2024",
    duration: "3 Days, 2 Nights",
    travelers: "2 People",
    status: "upcoming",
    amount: 18000,
    hotelDetails: {
      hotels: [
        {
          name: "Beach Resort Alibaug",
          location: "Alibaug",
          roomType: "Sea View",
          nights: 1,
        },
        {
          name: "Murud Beach Hotel",
          location: "Murud",
          roomType: "Deluxe",
          nights: 1,
        },
      ],
    },
    vehicleDetails: {
      type: "Sedan",
      capacity: "4 Seater",
      pickupLocation: "Mumbai",
      dropLocation: "Mumbai",
      includedKm: "800 km",
    },
    passengerDetails: [
      {
        name: "Vikram Singh",
        age: 29,
        gender: "Male",
        idType: "Driving License",
        idNumber: "DL-MH-2345",
      },
      {
        name: "Priya Singh",
        age: 27,
        gender: "Female",
        idType: "Aadhaar",
        idNumber: "XXXX-XXXX-9876",
      },
    ],
  },
  {
    id: "CP003",
    package: "Custom Hill Station Tour",
    category: "Nature Tour",
    destinations: "Lonavala, Khandala, Matheran",
    date: "Oct 20, 2024",
    duration: "2 Days, 1 Night",
    travelers: "3 People",
    status: "cancelled",
    amount: 12000,
    hotelDetails: {
      hotels: [
        {
          name: "Lonavala Hills Resort",
          location: "Lonavala",
          roomType: "Family Room",
          nights: 1,
        },
      ],
    },
    vehicleDetails: {
      type: "SUV",
      capacity: "7 Seater",
      pickupLocation: "Pune",
      dropLocation: "Pune",
      includedKm: "400 km",
    },
    passengerDetails: [
      {
        name: "Suresh Patil",
        age: 50,
        gender: "Male",
        idType: "PAN Card",
        idNumber: "XXXXX1234X",
      },
      {
        name: "Sunita Patil",
        age: 47,
        gender: "Female",
        idType: "PAN Card",
        idNumber: "XXXXX5678X",
      },
      {
        name: "Sneha Patil",
        age: 20,
        gender: "Female",
        idType: "College ID",
        idNumber: "COL-2020-456",
      },
    ],
  },
];

const statusConfig = {
  all: {
    badgeClass: "bg-gray-50 text-gray-600 border-gray-200",
    label: "All",
  },
  upcoming: {
    badgeClass: "bg-blue-50 text-blue-600 border-blue-200",
    label: "Upcoming",
  },
  completed: {
    badgeClass: "bg-emerald-50 text-emerald-600 border-emerald-200",
    label: "Completed",
  },
  cancelled: {
    badgeClass: "bg-red-50 text-red-600 border-red-200",
    label: "Cancelled",
  },
};

export function CustomPackagesContent() {
  const [activeStatus, setActiveStatus] = useState("all");
  const [searchQuery, setSearchQuery] = useState("");
  const toast = useToastEnhanced();

  const filteredBookings =
    activeStatus === "all"
      ? mockBookings
      : mockBookings.filter((b) => b.status === activeStatus);

  const searchedBookings = filteredBookings.filter(
    (booking) =>
      booking.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
      booking.package.toLowerCase().includes(searchQuery.toLowerCase()) ||
      booking.destinations.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const handleCancellation = (bookingId: string) => {
    toast.success({
      title: "Cancellation Requested",
      description: `Your cancellation request for booking ${bookingId} has been submitted.`,
    });
  };

  return (
    <div className="space-y-6">
      <header>
        <h1 className="text-3xl font-bold text-balance">Custom Packages</h1>
        <p className="text-muted-foreground mt-2">
          View and manage your custom package bookings
        </p>
      </header>

      <div className="flex flex-wrap gap-2">
        {statusTabs.map((status) => {
          const isActive = activeStatus === status.id;
          const count =
            status.id === "all"
              ? mockBookings.length
              : mockBookings.filter((b) => b.status === status.id).length;
          return (
            <button
              key={status.id}
              onClick={() => setActiveStatus(status.id)}
              className={cn(
                "flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all",
                isActive
                  ? "bg-primary text-primary-foreground shadow-md"
                  : "bg-white dark:bg-gray-800 text-muted-foreground hover:text-foreground hover:bg-muted border border-border/50"
              )}
            >
              {status.label}
              <Badge variant="outline" className="ml-1">
                {count}
              </Badge>
            </button>
          );
        })}
      </div>

      <div className="flex items-center gap-2">
        <div className="relative flex-1 max-w-md">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search bookings by ID, package, or destination..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9"
          />
        </div>
        <Button variant="outline" size="icon">
          <Filter className="h-4 w-4" />
        </Button>
      </div>

      <div className="grid gap-4">
        {searchedBookings.length === 0 ? (
          <Card className="shadow-md">
            <CardContent className="flex flex-col items-center justify-center py-16">
              <Package className="h-16 w-16 text-muted-foreground mb-4" />
              <p className="text-lg font-semibold mb-2">No bookings found</p>
              <p className="text-muted-foreground text-center">
                {searchQuery
                  ? "Try adjusting your search"
                  : "You don't have any custom package bookings yet"}
              </p>
            </CardContent>
          </Card>
        ) : (
          searchedBookings.map((booking) => {
            const config =
              statusConfig[booking.status as keyof typeof statusConfig];
            return (
              <Card
                key={booking.id}
                className="shadow-md hover:shadow-lg transition-all border-border/50"
              >
                <CardHeader>
                  <div className="flex items-start justify-between">
                    <div className="flex items-center gap-3">
                      <div className="p-3 rounded-lg bg-gradient-to-br from-rose-500 to-red-600 shadow-sm">
                        <Package
                          className="h-6 w-6 text-white"
                          aria-hidden="true"
                        />
                      </div>
                      <div>
                        <CardTitle className="text-lg">
                          Booking ID: {booking.id}
                        </CardTitle>
                        <p className="text-sm text-muted-foreground mt-1">
                          {booking.package}
                        </p>
                      </div>
                    </div>
                    <Badge
                      variant="outline"
                      className={cn("shadow-sm", config.badgeClass)}
                    >
                      {config.label}
                    </Badge>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div className="flex items-start gap-2">
                      <MapPin
                        className="h-5 w-5 text-muted-foreground mt-0.5 shrink-0"
                        aria-hidden="true"
                      />
                      <div>
                        <p className="text-sm font-medium">Destinations</p>
                        <p className="text-sm text-muted-foreground">
                          {booking.destinations}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-start gap-2">
                      <Calendar
                        className="h-5 w-5 text-muted-foreground mt-0.5 shrink-0"
                        aria-hidden="true"
                      />
                      <div>
                        <p className="text-sm font-medium">Date</p>
                        <p className="text-sm text-muted-foreground">
                          {booking.date}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-start gap-2">
                      <Clock
                        className="h-5 w-5 text-muted-foreground mt-0.5 shrink-0"
                        aria-hidden="true"
                      />
                      <div>
                        <p className="text-sm font-medium">Duration</p>
                        <p className="text-sm text-muted-foreground">
                          {booking.duration}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-start gap-2">
                      <Users
                        className="h-5 w-5 text-muted-foreground mt-0.5 shrink-0"
                        aria-hidden="true"
                      />
                      <div>
                        <p className="text-sm font-medium">Travelers</p>
                        <p className="text-sm text-muted-foreground">
                          {booking.travelers}
                        </p>
                      </div>
                    </div>
                  </div>
                  {booking.category && (
                    <div className="mt-3 flex items-center gap-2">
                      <Sparkles className="h-4 w-4 text-muted-foreground" />
                      <p className="text-sm text-muted-foreground">
                        {booking.category}
                      </p>
                    </div>
                  )}
                  <div className="mt-4 pt-4 border-t border-border/50 flex flex-wrap justify-between items-center gap-3">
                    <div className="flex items-center gap-2">
                      <IndianRupee className="h-5 w-5 text-amber-600" />
                      <p className="text-lg font-bold">
                        ₹{booking.amount.toLocaleString("en-IN")}
                      </p>
                    </div>
                    <div className="flex flex-wrap gap-2">
                      <Button
                        variant="outline"
                        size="sm"
                        asChild
                        className="gap-2 bg-transparent"
                      >
                        <Link href={`/user/invoices/${booking.id}`}>
                          <FileText className="h-4 w-4" />
                          Invoice
                        </Link>
                      </Button>
                      <Dialog>
                        <DialogTrigger asChild>
                          <Button
                            variant="outline"
                            size="sm"
                            className="gap-2 bg-transparent"
                          >
                            <Eye className="h-4 w-4" />
                            View Details
                          </Button>
                        </DialogTrigger>
                        <DialogContent className="max-w-3xl max-h-[85vh] overflow-y-auto">
                          <DialogHeader>
                            <DialogTitle className="text-2xl">
                              Booking Details
                            </DialogTitle>
                            <DialogDescription>
                              Complete information about your custom package
                              booking
                            </DialogDescription>
                          </DialogHeader>
                          <Tabs defaultValue="hotel" className="w-full">
                            <TabsList className="grid w-full grid-cols-3">
                              <TabsTrigger value="hotel">Hotels</TabsTrigger>
                              <TabsTrigger value="vehicle">Vehicle</TabsTrigger>
                              <TabsTrigger value="passengers">
                                Passengers
                              </TabsTrigger>
                            </TabsList>
                            <TabsContent value="hotel" className="space-y-4">
                              <div className="space-y-4">
                                <div className="flex items-center gap-2 text-lg font-semibold">
                                  <Hotel className="h-5 w-5" />
                                  Hotel Information
                                </div>
                                <div className="space-y-3">
                                  {booking.hotelDetails.hotels.map(
                                    (hotel, index) => (
                                      <div
                                        key={index}
                                        className="p-4 border rounded-lg"
                                      >
                                        <p className="font-semibold mb-3">
                                          {hotel.name}
                                        </p>
                                        <div className="grid grid-cols-2 gap-3 text-sm">
                                          <div>
                                            <p className="text-muted-foreground">
                                              Location
                                            </p>
                                            <p className="font-medium">
                                              {hotel.location}
                                            </p>
                                          </div>
                                          <div>
                                            <p className="text-muted-foreground">
                                              Room Type
                                            </p>
                                            <p className="font-medium">
                                              {hotel.roomType}
                                            </p>
                                          </div>
                                          <div>
                                            <p className="text-muted-foreground">
                                              Nights
                                            </p>
                                            <p className="font-medium">
                                              {hotel.nights}
                                            </p>
                                          </div>
                                        </div>
                                      </div>
                                    )
                                  )}
                                </div>
                              </div>
                            </TabsContent>
                            <TabsContent value="vehicle" className="space-y-4">
                              <div className="space-y-4">
                                <div className="flex items-center gap-2 text-lg font-semibold">
                                  <Car className="h-5 w-5" />
                                  Vehicle Information
                                </div>
                                <div className="grid grid-cols-2 gap-4 p-4 border rounded-lg">
                                  <div>
                                    <p className="text-sm text-muted-foreground">
                                      Vehicle Type
                                    </p>
                                    <p className="font-medium">
                                      {booking.vehicleDetails.type}
                                    </p>
                                  </div>
                                  <div>
                                    <p className="text-sm text-muted-foreground">
                                      Capacity
                                    </p>
                                    <p className="font-medium">
                                      {booking.vehicleDetails.capacity}
                                    </p>
                                  </div>
                                  <div>
                                    <p className="text-sm text-muted-foreground">
                                      Pickup Location
                                    </p>
                                    <p className="font-medium">
                                      {booking.vehicleDetails.pickupLocation}
                                    </p>
                                  </div>
                                  <div>
                                    <p className="text-sm text-muted-foreground">
                                      Drop Location
                                    </p>
                                    <p className="font-medium">
                                      {booking.vehicleDetails.dropLocation}
                                    </p>
                                  </div>
                                  <div>
                                    <p className="text-sm text-muted-foreground">
                                      Included Kilometers
                                    </p>
                                    <p className="font-medium">
                                      {booking.vehicleDetails.includedKm}
                                    </p>
                                  </div>
                                </div>
                              </div>
                            </TabsContent>
                            <TabsContent
                              value="passengers"
                              className="space-y-4"
                            >
                              <div className="space-y-4">
                                <div className="flex items-center gap-2 text-lg font-semibold">
                                  <UserCheck className="h-5 w-5" />
                                  Passenger Details
                                </div>
                                <div className="space-y-3">
                                  {booking.passengerDetails.map(
                                    (passenger, index) => (
                                      <div
                                        key={index}
                                        className="p-4 border rounded-lg"
                                      >
                                        <p className="font-semibold mb-3">
                                          Passenger {index + 1}
                                        </p>
                                        <div className="grid grid-cols-2 gap-3 text-sm">
                                          <div>
                                            <p className="text-muted-foreground">
                                              Name
                                            </p>
                                            <p className="font-medium">
                                              {passenger.name}
                                            </p>
                                          </div>
                                          <div>
                                            <p className="text-muted-foreground">
                                              Age
                                            </p>
                                            <p className="font-medium">
                                              {passenger.age}
                                            </p>
                                          </div>
                                          <div>
                                            <p className="text-muted-foreground">
                                              Gender
                                            </p>
                                            <p className="font-medium">
                                              {passenger.gender}
                                            </p>
                                          </div>
                                          <div>
                                            <p className="text-muted-foreground">
                                              ID Type
                                            </p>
                                            <p className="font-medium">
                                              {passenger.idType}
                                            </p>
                                          </div>
                                          <div className="col-span-2">
                                            <p className="text-muted-foreground">
                                              ID Number
                                            </p>
                                            <p className="font-medium">
                                              {passenger.idNumber}
                                            </p>
                                          </div>
                                        </div>
                                      </div>
                                    )
                                  )}
                                </div>
                              </div>
                            </TabsContent>
                          </Tabs>
                        </DialogContent>
                      </Dialog>
                      {booking.status === "upcoming" && (
                        <AlertDialog>
                          <AlertDialogTrigger asChild>
                            <Button
                              variant="outline"
                              size="sm"
                              className="gap-2 bg-transparent text-red-600 hover:text-red-700 hover:bg-red-50"
                            >
                              <X className="h-4 w-4" />
                              Cancel
                            </Button>
                          </AlertDialogTrigger>
                          <AlertDialogContent>
                            <AlertDialogHeader>
                              <AlertDialogTitle>
                                Cancel Booking
                              </AlertDialogTitle>
                              <AlertDialogDescription>
                                Are you sure you want to cancel booking{" "}
                                {booking.id}? This action cannot be undone.
                                Cancellation charges may apply as per the
                                package terms.
                              </AlertDialogDescription>
                            </AlertDialogHeader>
                            <AlertDialogFooter>
                              <AlertDialogCancel>
                                Keep Booking
                              </AlertDialogCancel>
                              <AlertDialogAction
                                onClick={() => handleCancellation(booking.id)}
                                className="bg-red-600 hover:bg-red-700"
                              >
                                Confirm Cancellation
                              </AlertDialogAction>
                            </AlertDialogFooter>
                          </AlertDialogContent>
                        </AlertDialog>
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>
            );
          })
        )}
      </div>
    </div>
  );
}