"use client";
import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
Beer,
Coffee,
Wine,
Utensils,
Gamepad2,
Plus,
Pencil,
Trash2,
AlertCircle
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from "@/components/ui/select";
import menuData from "./menu.json";
interface MenuItem {
id: string;
name: string;
price: number;
description: string;
sizes?: string[];
allergies?: string[];
category?: string;
}
export default function MenuPage() {
const [activeCategory, setActiveCategory] = useState("drinks");
const [activeSubCategory, setActiveSubCategory] = useState("tap");
const [isAddItemOpen, setIsAddItemOpen] = useState(false);
const getCategoryIcon = (category: string) => {
switch (category) {
case "drinks":
return <Beer className="h-5 w-5 text-purple-500" />;
case "food":
return <Utensils className="h-5 w-5 text-pink-500" />;
case "gaming":
return <Gamepad2 className="h-5 w-5 text-blue-500" />;
default:
return null;
}
};
const getSubCategoryIcon = (category: string) => {
switch (category) {
case "tap":
return <Beer className="h-4 w-4" />;
case "warmDrinks":
return <Coffee className="h-4 w-4" />;
case "wine":
return <Wine className="h-4 w-4" />;
default:
return null;
}
};
return (
<div className="min-h-screen bg-gradient-to-b from-violet-50 via-white to-sky-50">
<div className="max-w-[1400px] mx-auto space-y-8 p-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-4xl font-bold tracking-tight bg-gradient-to-r from-purple-600 via-pink-500 to-blue-500 bg-clip-text text-transparent">
Menu Management
</h1>
<p className="mt-2 text-gray-600">
Manage your menu items across all categories
</p>
</div>
<Dialog open={isAddItemOpen} onOpenChange={setIsAddItemOpen}>
<DialogTrigger asChild>
<Button className="bg-purple-600 hover:bg-purple-700 text-white rounded-xl flex items-center gap-2">
<Plus className="h-5 w-5" />
Add Item
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[500px] rounded-2xl">
<DialogHeader>
<DialogTitle>Add Menu Item</DialogTitle>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label>Item Name</Label>
<Input className="rounded-xl border-gray-200 focus:ring-purple-500" placeholder="Enter item name" />
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>Category</Label>
<Select>
<SelectTrigger className="rounded-xl border-gray-200 focus:ring-purple-500">
<SelectValue placeholder="Select category" />
</SelectTrigger>
<SelectContent>
<SelectItem value="drinks">Drinks</SelectItem>
<SelectItem value="food">Food</SelectItem>
<SelectItem value="gaming">Gaming</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label>Price</Label>
<Input type="number" className="rounded-xl border-gray-200 focus:ring-purple-500" placeholder="Enter price" />
</div>
</div>
<div className="space-y-2">
<Label>Description</Label>
<Input className="rounded-xl border-gray-200 focus:ring-purple-500" placeholder="Enter description" />
</div>
<div className="pt-4 flex justify-end gap-2">
<Button
variant="outline"
className="rounded-xl"
onClick={() => setIsAddItemOpen(false)}
>
Cancel
</Button>
<Button className="bg-purple-600 hover:bg-purple-700 text-white rounded-xl">
Add Item
</Button>
</div>
</div>
</DialogContent>
</Dialog>
</div>
<Tabs defaultValue="drinks" className="space-y-6">
<TabsList className="bg-gray-100/50 p-1 rounded-xl">
<TabsTrigger
value="drinks"
className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm"
onClick={() => {
setActiveCategory("drinks");
setActiveSubCategory("tap");
}}
>
<Beer className="h-5 w-5 mr-2" />
Drinks
</TabsTrigger>
<TabsTrigger
value="food"
className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm"
onClick={() => {
setActiveCategory("food");
setActiveSubCategory("burgers");
}}
>
<Utensils className="h-5 w-5 mr-2" />
Food
</TabsTrigger>
<TabsTrigger
value="gaming"
className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm"
onClick={() => {
setActiveCategory("gaming");
setActiveSubCategory("pcGaming");
}}
>
<Gamepad2 className="h-5 w-5 mr-2" />
Gaming
</TabsTrigger>
</TabsList>
{Object.entries(menuData).map(([category, subCategories]) => (
<TabsContent key={category} value={category} className="space-y-6">
<div className="grid grid-cols-12 gap-6">
<div className="col-span-12 lg:col-span-3">
<Card className="rounded-2xl border-2 border-purple-100/50 hover:border-purple-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
{getCategoryIcon(category)}
Categories
</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
{Object.keys(subCategories).map((subCategory) => (
<Button
key={subCategory}
variant="outline"
className={`w-full justify-start rounded-xl border-gray-200 ${
activeSubCategory === subCategory
? "bg-purple-600 text-white hover:bg-purple-700"
: "hover:bg-purple-50 hover:text-purple-600 hover:border-purple-200"
}`}
onClick={() => setActiveSubCategory(subCategory)}
>
{getSubCategoryIcon(subCategory)}
<span className="ml-2 capitalize">
{subCategory.replace(/([A-Z])/g, " $1").trim()}
</span>
</Button>
))}
</CardContent>
</Card>
</div>
<div className="col-span-12 lg:col-span-9">
<Card className="rounded-2xl border-2 border-purple-100/50 hover:border-purple-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center justify-between">
<div className="flex items-center gap-2">
{getCategoryIcon(category)}
<span className="capitalize">
{activeSubCategory.replace(/([A-Z])/g, " $1").trim()}
</span>
</div>
<Button
variant="outline"
className="rounded-xl border-purple-200 hover:bg-purple-50 hover:text-purple-600"
onClick={() => setIsAddItemOpen(true)}
>
<Plus className="h-4 w-4 mr-2" />
Add Item
</Button>
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{(subCategories as any)[activeSubCategory]?.map((item: MenuItem) => (
<Card
key={item.id}
className="rounded-xl border border-gray-100 hover:border-purple-200 transition-all duration-300 overflow-hidden"
>
<CardContent className="p-4">
<div className="flex items-start justify-between">
<div className="space-y-1">
<div className="flex items-center gap-2">
<h3 className="text-lg font-semibold">{item.name}</h3>
<Badge className="bg-purple-500/10 text-purple-600 rounded-full">
{item.price} kr
</Badge>
</div>
<p className="text-sm text-gray-500">{item.description}</p>
{item.sizes && (
<div className="flex items-center gap-2 text-sm">
<span className="text-gray-600">Sizes:</span>
{item.sizes.map((size) => (
<Badge
key={size}
variant="outline"
className="rounded-full border-purple-200 text-purple-600"
>
{size}
</Badge>
))}
</div>
)}
{item.allergies && (
<div className="flex items-center gap-2 text-sm">
<AlertCircle className="h-4 w-4 text-pink-500" />
<span className="text-gray-600">
Allergies: {item.allergies.join(", ")}
</span>
</div>
)}
</div>
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
className="rounded-lg border-purple-200 hover:bg-purple-50 hover:text-purple-600"
>
<Pencil className="h-4 w-4" />
</Button>
<Button
variant="outline"
size="sm"
className="rounded-lg border-red-200 hover:bg-red-50 hover:text-red-600"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</div>
</CardContent>
</Card>
))}
</CardContent>
</Card>
</div>
</div>
</TabsContent>
))}
</Tabs>
</div>
</div>
);
}