"use client";

import { useState, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Beer, Coffee, Pizza, Candy, Utensils, Droplet } from "lucide-react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import Image from "next/image";
import menu1Data from "./menu1.json";
import menu2Data from "./menu2.json";

// Import Swiper styles
import "swiper/css";
import "swiper/css/autoplay";

//! http://localhost:3000/display/menu?token=menu2_token

const sponsors = [
  { name: "Sponsor 1", image: "https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?w=200&h=100&fit=crop" },
  { name: "Sponsor 2", image: "https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?w=200&h=100&fit=crop" },
  { name: "Sponsor 3", image: "https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?w=200&h=100&fit=crop" }
];

const menuTokens = {
  "menu1_token": menu1Data,
  "menu2_token": menu2Data
};

export default function MenuDisplay() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [currentTime, setCurrentTime] = useState(new Date());
  const [menuData, setMenuData] = useState<any>(null);
  const token = searchParams.get("token");

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  useEffect(() => {
    if (!token || !menuTokens[token as keyof typeof menuTokens]) {
      router.push("/display");
      return;
    }

    setMenuData(menuTokens[token as keyof typeof menuTokens]);
  }, [token, router]);

  const getCategoryIcon = (type: string) => {
    switch (type.toLowerCase()) {
      case 'tap':
        return <Beer className="h-8 w-8" />;
      case 'warmdrinks':
        return <Coffee className="h-8 w-8" />;
      case 'mineralwater':
        return <Droplet className="h-8 w-8" />;
      case 'food':
        return <Pizza className="h-8 w-8" />;
      case 'sweet':
        return <Candy className="h-8 w-8" />;
      default:
        return <Utensils className="h-8 w-8" />;
    }
  };

  if (!menuData) {
    return null;
  }

  return (
    <div className="h-screen bg-black text-white">
      <div className="flex-1 h-[calc(100vh-8rem)] overflow-auto p-8">
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
          {Object.entries(menuData).map(([category, items]: [string, any]) => (
            <Card key={category} className="bg-purple-950/30 border-purple-500/20 overflow-hidden">
              <CardContent className="p-6">
                <div className="flex items-center gap-3 mb-6">
                  {getCategoryIcon(category)}
                  <h2 className="text-2xl font-bold text-purple-300 capitalize">
                    {category.replace(/([A-Z])/g, ' $1').trim()}
                  </h2>
                </div>
                <div className="space-y-4">
                  {Object.entries(items).map(([itemName, details]: [string, any]) => (
                    <div key={itemName} className="flex items-start justify-between border-b border-purple-500/20 pb-4">
                      <div>
                        <h3 className="text-xl font-medium text-white">{itemName}</h3>
                        {Array.isArray(details.size) && (
                          <div className="flex gap-2 mt-2">
                            {details.size.map((size: number, index: number) => (
                              <Badge 
                                key={size}
                                variant="secondary"
                                className="bg-purple-500/10 text-purple-300"
                              >
                                {size}L - {details.price[index]} kr
                              </Badge>
                            ))}
                          </div>
                        )}
                      </div>
                      {!Array.isArray(details.price) && (
                        <div className="text-2xl font-bold text-purple-400">
                          {details.price} kr
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* Bottom Bar */}
      <div className="h-32 bg-gradient-to-r from-violet-950/90 via-purple-950/90 to-fuchsia-950/90 backdrop-blur-xl border-t border-purple-500/20 flex">
        {/* Sponsors */}
        <div className="w-64 border-r border-purple-500/20 p-3">
          <div className="h-full">
            <Swiper
              modules={[Autoplay]}
              direction="vertical"
              spaceBetween={16}
              slidesPerView={1}
              autoplay={{
                delay: 3000,
                disableOnInteraction: false,
              }}
              loop={true}
              className="h-full"
            >
              {sponsors.map((sponsor, index) => (
                <SwiperSlide key={index}>
                  <div className="h-full relative rounded-lg overflow-hidden">
                    <Image
                      src={sponsor.image}
                      alt={sponsor.name}
                      fill
                      className="object-cover"
                    />
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
        </div>

        {/* Current Time */}
        <div className="flex-1 flex items-center justify-center">
          <div className="text-6xl font-bold text-purple-300">
            {currentTime.toLocaleTimeString('en-US', { 
              hour: '2-digit', 
              minute: '2-digit',
              hour12: false 
            })}
          </div>
        </div>

        {/* Logo */}
        <div className="w-64 border-l border-purple-500/20 p-3 flex items-center justify-center">
          <div className="text-2xl font-bold bg-gradient-to-r from-purple-400 via-pink-400 to-purple-400 bg-clip-text text-transparent">
            Gaming Center
          </div>
        </div>
      </div>
    </div>
  );
}