"use client"

import { useState } from "react"
import Link from "next/link"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Package, MapPin, Calendar, IndianRupee, Sparkles, Search, Users, Percent } from "lucide-react"
import { fixPackageDataStore } from "@/lib/data/fix-packages"

export default function FixedPackagesPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState<"all" | "active" | "inactive">("active")

  const allPackages = fixPackageDataStore.getAllPackages()
  const activePackages = fixPackageDataStore.getActivePackages()
  const inactivePackages = fixPackageDataStore.getInactivePackages()

  const packages =
    statusFilter === "active" ? activePackages : statusFilter === "inactive" ? inactivePackages : allPackages

  const filteredPackages = packages.filter(
    (pkg) =>
      pkg.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      pkg.locationDetails.toLowerCase().includes(searchQuery.toLowerCase()),
  )

  const calculateDiscount = (original: number, discounted: number) => {
    return Math.round(((original - discounted) / original) * 100)
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 via-white to-blue-50">
      <main className="container mx-auto p-4 md:p-6 lg:p-8">
        {/* Hero Header */}
        <div className="relative mb-8 p-6 md:p-8 rounded-2xl bg-gradient-to-r from-purple-900 via-indigo-900 to-purple-900 overflow-hidden shadow-xl">
          <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0zNiAxOGMzLjMxNCAwIDYgMi42ODYgNiA2cy0yLjY4NiA2LTYgNi02LTIuNjg2LTYtNiAyLjY4Ni02IDYtNiIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHN0cm9rZS13aWR0aD0iMiIvPjwvZz48L3N2Zz4=')] opacity-20" />
          <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
          <div className="relative z-10">
            <div className="flex items-center gap-4 mb-4">
              <div className="p-3 rounded-xl bg-white/10 backdrop-blur-sm border border-white/10">
                <Package className="h-8 w-8 text-white" />
              </div>
              <div>
                <h1 className="text-2xl md:text-4xl font-bold text-white">Fixed Packages</h1>
                <p className="text-gray-200 text-sm md:text-base mt-1">
                  Pre-planned spiritual journeys to India's sacred destinations
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Search and Filter Section */}
        <div className="mb-8 space-y-4">
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
              <Input
                placeholder="Search packages by name or location..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10 h-12 bg-white shadow-sm"
              />
            </div>
            <Tabs value={statusFilter} onValueChange={(v) => setStatusFilter(v as typeof statusFilter)}>
              <TabsList className="h-12 bg-white shadow-sm">
                <TabsTrigger value="active" className="px-6">
                  Active
                </TabsTrigger>
                <TabsTrigger value="inactive" className="px-6">
                  Inactive
                </TabsTrigger>
                <TabsTrigger value="all" className="px-6">
                  All
                </TabsTrigger>
              </TabsList>
            </Tabs>
          </div>

          {/* Package Count */}
          <div className="flex items-center gap-2 text-sm text-gray-600">
            <Package className="h-4 w-4" />
            <span>
              Showing {filteredPackages.length} package{filteredPackages.length !== 1 ? "s" : ""}
            </span>
          </div>
        </div>

        {/* Package Grid - Changed to 4 columns on large screens */}
        {filteredPackages.length === 0 ? (
          <div className="text-center py-16 bg-white rounded-2xl border border-gray-200">
            <Package className="h-16 w-16 text-gray-300 mx-auto mb-4" />
            <h3 className="text-xl font-semibold text-gray-700 mb-2">No packages found</h3>
            <p className="text-gray-500">Try adjusting your search or filter criteria</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {filteredPackages.map((pkg) => {
              const discount = calculateDiscount(pkg.originalPrice, pkg.discountedPrice)

              return (
                <Link key={pkg.id} href={`/fixed-packages/${pkg.id}`} className="group">
                  <Card className="overflow-hidden border-0 shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer h-full">
                    <div className="relative h-48 bg-gradient-to-br from-purple-100 to-blue-100 overflow-hidden">
                      <div className="absolute inset-0 flex items-center justify-center">
                        <Sparkles className="h-20 w-20 text-purple-300 group-hover:scale-110 transition-transform" />
                      </div>
                      {pkg.status === "inactive" && (
                        <Badge className="absolute top-3 right-3 bg-red-500 text-white">Inactive</Badge>
                      )}
                      {discount > 0 && (
                        <Badge className="absolute top-3 left-3 bg-green-600 text-white flex items-center gap-1">
                          <Percent className="h-3 w-3" />
                          {discount}% OFF
                        </Badge>
                      )}
                    </div>

                    <CardContent className="p-5">
                      <h3 className="font-bold text-xl text-gray-900 mb-3 group-hover:text-purple-600 transition-colors line-clamp-2">
                        {pkg.name}
                      </h3>

                      <div className="space-y-2 mb-4">
                        <div className="flex items-start gap-2 text-sm text-gray-600">
                          <MapPin className="h-4 w-4 text-purple-500 mt-0.5 flex-shrink-0" />
                          <span className="line-clamp-2">{pkg.locationDetails}</span>
                        </div>

                        <div className="flex items-center gap-4 text-sm">
                          <div className="flex items-center gap-1.5 text-gray-600">
                            <Calendar className="h-4 w-4 text-purple-500" />
                            <span>
                              {pkg.totalDays} Day{pkg.totalDays > 1 ? "s" : ""}
                            </span>
                          </div>
                          {pkg.vehicles.length > 0 && (
                            <div className="flex items-center gap-1.5 text-gray-600">
                              <Users className="h-4 w-4 text-purple-500" />
                              <span>{pkg.vehicles.length} Vehicle Options</span>
                            </div>
                          )}
                        </div>
                      </div>

                      <div className="pt-4 border-t border-gray-100">
                        <div className="flex items-baseline justify-between">
                          <div>
                            {discount > 0 && (
                              <span className="text-sm text-gray-400 line-through mr-2">
                                ₹{pkg.originalPrice.toLocaleString()}
                              </span>
                            )}
                            <span className="text-2xl font-bold text-purple-600 flex items-center">
                              <IndianRupee className="h-5 w-5" />
                              {pkg.discountedPrice.toLocaleString()}
                            </span>
                            <span className="text-xs text-gray-500 ml-1">per person</span>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </Link>
              )
            })}
          </div>
        )}
      </main>
    </div>
  )
}