[V0_FILE]sql:file="scripts/001_create_tables.sql" isMerged="true" -- Create profiles table for user data CREATE TABLE IF NOT EXISTS public.profiles ( id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE, display_name TEXT NOT NULL, role TEXT NOT NULL DEFAULT 'member' CHECK (role IN ('member', 'area_manager', 'formand', 'admin')), created_at TIMESTAMPTZ DEFAULT NOW(), updated_at TIMESTAMPTZ DEFAULT NOW() ); -- Create events table CREATE TABLE IF NOT EXISTS public.events ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), name TEXT NOT NULL, date DATE NOT NULL, start_time TIME NOT NULL, end_time TIME NOT NULL, location TEXT, status TEXT NOT NULL DEFAULT 'open' CHECK (status IN ('draft', 'open', 'published')), created_by UUID REFERENCES public.profiles(id), created_at TIMESTAMPTZ DEFAULT NOW(), published_at TIMESTAMPTZ ); -- Create areas table (subcollection of events) CREATE TABLE IF NOT EXISTS public.areas ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), event_id UUID NOT NULL REFERENCES public.events(id) ON DELETE CASCADE, name TEXT NOT NULL, responsible_text TEXT, created_by UUID REFERENCES public.profiles(id), created_at TIMESTAMPTZ DEFAULT NOW() ); -- Create shifts table (subcollection of areas) CREATE TABLE IF NOT EXISTS public.shifts ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), area_id UUID NOT NULL REFERENCES public.areas(id) ON DELETE CASCADE, start_time TIMESTAMPTZ NOT NULL, end_time TIMESTAMPTZ NOT NULL, needed INTEGER NOT NULL DEFAULT 1, created_by UUID REFERENCES public.profiles(id), created_at TIMESTAMPTZ DEFAULT NOW() ); -- Create shift_assignments table (who is assigned to which shift) CREATE TABLE IF NOT EXISTS public.shift_assignments ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), shift_id UUID NOT NULL REFERENCES public.shifts(id) ON DELETE CASCADE, user_id UUID NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE, created_at TIMESTAMPTZ DEFAULT NOW(), UNIQUE(shift_id, user_id) ); -- Create bids table (for users to bid on areas before schedule is published) CREATE TABLE IF NOT EXISTS public.bids ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), event_id UUID NOT NULL REFERENCES public.events(id) ON DELETE CASCADE, area_id UUID NOT NULL REFERENCES public.areas(id) ON DELETE CASCADE, user_id UUID NOT NULL REFERENCES public.profiles(id) ON DELETE CASCADE, created_at TIMESTAMPTZ DEFAULT NOW(), UNIQUE(event_id, area_id, user_id) ); -- Create invites table CREATE TABLE IF NOT EXISTS public.invites ( code TEXT PRIMARY KEY, role TEXT NOT NULL DEFAULT 'member' CHECK (role IN ('member', 'area_manager', 'formand', 'admin')), used_by UUID REFERENCES public.profiles(id), created_by UUID REFERENCES public.profiles(id), created_at TIMESTAMPTZ DEFAULT NOW() ); -- Enable RLS on all tables ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY; ALTER TABLE public.events ENABLE ROW LEVEL SECURITY; ALTER TABLE public.areas ENABLE ROW LEVEL SECURITY; ALTER TABLE public.shifts ENABLE ROW LEVEL SECURITY; ALTER TABLE public.shift_assignments ENABLE ROW LEVEL SECURITY; ALTER TABLE public.bids ENABLE ROW LEVEL SECURITY; ALTER TABLE public.invites ENABLE ROW LEVEL SECURITY; -- Profiles policies CREATE POLICY "Anyone can view profiles" ON public.profiles FOR SELECT USING (true); CREATE POLICY "Users can update own profile" ON public.profiles FOR UPDATE USING (auth.uid() = id); CREATE POLICY "Users can insert own profile" ON public.profiles FOR INSERT WITH CHECK (auth.uid() = id); -- Events policies CREATE POLICY "Anyone can view events" ON public.events FOR SELECT USING (true); CREATE POLICY "Admin/formand can insert events" ON public.events FOR INSERT WITH CHECK (EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND role IN ('admin', 'formand'))); CREATE POLICY "Admin/formand can update events" ON public.events FOR UPDATE USING (EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND role IN ('admin', 'formand'))); CREATE POLICY "Admin/formand can delete events" ON public.events FOR DELETE USING (EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND role IN ('admin', 'formand'))); -- Areas policies CREATE POLICY "Anyone can view areas" ON public.areas FOR SELECT USING (true); CREATE POLICY "Admin/formand can manage areas" ON public.areas FOR ALL USING (EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND role IN ('admin', 'formand'))); -- Shifts policies CREATE POLICY "Anyone can view shifts" ON public.shifts FOR SELECT USING (true); CREATE POLICY "Admin/formand can manage shifts" ON public.shifts FOR ALL USING (EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND role IN ('admin', 'formand'))); -- Shift assignments policies CREATE POLICY "Anyone can view assignments" ON public.shift_assignments FOR SELECT USING (true); CREATE POLICY "Admin/formand can manage assignments" ON public.shift_assignments FOR ALL USING (EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND role IN ('admin', 'formand'))); -- Bids policies CREATE POLICY "Users can view own bids" ON public.bids FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Admin can view all bids" ON public.bids FOR SELECT USING (EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND role IN ('admin', 'formand'))); CREATE POLICY "Users can insert own bids" ON public.bids FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can delete own bids" ON public.bids FOR DELETE USING (auth.uid() = user_id); -- Invites policies CREATE POLICY "Anyone can view unused invites for signup" ON public.invites FOR SELECT USING (used_by IS NULL); CREATE POLICY "Admin can view all invites" ON public.invites FOR SELECT USING (EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND role IN ('admin', 'formand'))); CREATE POLICY "Admin can create invites" ON public.invites FOR INSERT WITH CHECK (EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND role IN ('admin', 'formand'))); CREATE POLICY "Admin can update invites" ON public.invites FOR UPDATE USING (EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND role IN ('admin', 'formand'))); [V0_FILE]typescript:file="lib/supabase/middleware.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { NextResponse, type NextRequest } from "next/server" export async function updateSession(request: NextRequest) { let supabaseResponse = NextResponse.next({ request, }) const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return request.cookies.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value)) supabaseResponse = NextResponse.next({ request, }) cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options)) }, }, }, ) const { data: { user }, } = await supabase.auth.getUser() // Allow public routes const publicRoutes = ["/", "/auth/login", "/auth/sign-up", "/auth/sign-up-success", "/auth/error"] const isPublicRoute = publicRoutes.some((route) => request.nextUrl.pathname === route) if (!user && !isPublicRoute) { const url = request.nextUrl.clone() url.pathname = "/auth/login" return NextResponse.redirect(url) } return supabaseResponse } [V0_FILE]typescript:file="middleware.ts" isMerged="true" import { updateSession } from "@/lib/supabase/middleware" import type { NextRequest } from "next/server" export async function middleware(request: NextRequest) { return await updateSession(request) } export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"], } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" export default async function Home() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (user) { redirect("/dashboard") } else { redirect("/auth/login") } } [V0_FILE]typescriptreact:file="app/auth/sign-up-success/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Mail } from "lucide-react" export default function SignUpSuccessPage() { return (

Bekræft din email Vi har sendt dig en email med et bekræftelseslink

Tjek din indbakke og klik på linket for at aktivere din konto. Derefter kan du logge ind.

) } [V0_FILE]typescriptreact:file="app/auth/error/page.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { AlertTriangle } from "lucide-react" export default async function AuthErrorPage({ searchParams, }: { searchParams: Promise<{ error: string }> }) { const params = await searchParams return (

Der opstod en fejl

{params?.error || "Der opstod en ukendt fejl. Prøv igen."}

) } [V0_FILE]typescriptreact:file="app/auth/callback/route.ts" isMerged="true" import { createClient } from "@/lib/supabase/server" import { NextResponse } from "next/server" export async function GET(request: Request) { const requestUrl = new URL(request.url) const code = requestUrl.searchParams.get("code") const origin = requestUrl.origin if (code) { const supabase = await createClient() const { data: { user }, error, } = await supabase.auth.exchangeCodeForSession(code) if (!error && user) { // Check if profile exists, if not create it const { data: profile } = await supabase.from("profiles").select("*").eq("id", user.id).single() if (!profile) { const metadata = user.user_metadata // Create profile await supabase.from("profiles").insert({ id: user.id, display_name: metadata.display_name || user.email?.split("@")[0] || "Bruger", role: metadata.role || "member", }) // Mark invite as used if (metadata.invite_code) { await supabase.from("invites").update({ used_by: user.id }).eq("code", metadata.invite_code) } } } } return NextResponse.redirect(`${origin}/dashboard`) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { Navbar } from "@/components/navbar" import { DashboardContent } from "@/components/dashboard-content" import type { Profile } from "@/lib/types" export default async function DashboardPage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } const { data: profile } = await supabase .from("profiles") .select("*") .eq("id", user.id) .single() return (

) } [V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { Navbar } from "@/components/navbar" import { AdminContent } from "@/components/admin-content" import type { Profile } from "@/lib/types" export default async function AdminPage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } const { data: profile } = await supabase .from("profiles") .select("*") .eq("id", user.id) .single() // For now, use legacy role field until we fix RLS recursion if (!profile || !['admin', 'formand'].includes(profile.role)) { redirect("/dashboard") } return (

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "@supabase/ssr": "0.7.0", "swr": "2.3.6", "@react-three/fiber": "9.4.2", "@react-three/drei": "10.7.7", "three": "0.181.2", "jszip": "3.10.1", "crypto": "1.0.1", "jsonwebtoken": "9.0.2", "@yudiel/react-qr-scanner": "2.5.0", "qrcode.react": "4.2.0", "jspdf": "3.0.4", "html2canvas": "1.4.1" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true" 'use client' import * as React from 'react' import * as DialogPrimitive from '@radix-ui/react-dialog' import { XIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Dialog({ ...props }: React.ComponentProps) { return } function DialogTrigger({ ...props }: React.ComponentProps) { return } function DialogPortal({ ...props }: React.ComponentProps) { return } function DialogClose({ ...props }: React.ComponentProps) { return } function DialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } function DialogContent({ className, children, showCloseButton = true, ...props }: React.ComponentProps & { showCloseButton?: boolean }) { return ( {children} {showCloseButton && ( Close )} ) } function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function DialogTitle({ className, ...props }: React.ComponentProps) { return ( ) } function DialogDescription({ className, ...props }: React.ComponentProps) { return ( ) } export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } [V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true" 'use client' import * as React from 'react' import * as SwitchPrimitive from '@radix-ui/react-switch' import { cn } from '@/lib/utils' function Switch({ className, ...props }: React.ComponentProps) { return ( ) } export { Switch } [V0_FILE]sql:file="scripts/002_update_schema.sql" isEdit="true" isMerged="true" -- Add is_over_18 column to profiles ALTER TABLE public.profiles ADD COLUMN IF NOT EXISTS is_over_18 BOOLEAN DEFAULT false; -- Add requires_18 column to areas ALTER TABLE public.areas ADD COLUMN IF NOT EXISTS requires_18 BOOLEAN DEFAULT false; -- Add 'completed' status to events ALTER TABLE public.events DROP CONSTRAINT IF EXISTS events_status_check; ALTER TABLE public.events ADD CONSTRAINT events_status_check CHECK (status IN ('draft', 'open', 'published', 'completed')); -- Update RLS policies for profiles to allow admin/formand to update any profile DROP POLICY IF EXISTS "Users can update own profile" ON public.profiles; CREATE POLICY "Users can update own profile" ON public.profiles FOR UPDATE USING (auth.uid() = id OR EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND role IN ('admin', 'formand'))); -- Allow admin/formand to delete profiles DROP POLICY IF EXISTS "Admin can delete profiles" ON public.profiles; CREATE POLICY "Admin can delete profiles" ON public.profiles FOR DELETE USING (EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND role IN ('admin', 'formand'))); -- Update areas policy to allow delete DROP POLICY IF EXISTS "Admin/formand can manage areas" ON public.areas; CREATE POLICY "Admin/formand can insert areas" ON public.areas FOR INSERT WITH CHECK (EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND role IN ('admin', 'formand'))); CREATE POLICY "Admin/formand can update areas" ON public.areas FOR UPDATE USING (EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND role IN ('admin', 'formand'))); CREATE POLICY "Admin/formand can delete areas" ON public.areas FOR DELETE USING (EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND role IN ('admin', 'formand'))); [V0_FILE]typescriptreact:file="components/confirm-dialog.tsx" isEdit="true" isMerged="true" "use client" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { AlertTriangle } from "lucide-react" interface ConfirmDialogProps { open: boolean onOpenChange: (open: boolean) => void title: string description: string confirmText?: string cancelText?: string variant?: "default" | "destructive" | "warning" onConfirm: () => void } export function ConfirmDialog({ open, onOpenChange, title, description, confirmText = "Bekræft", cancelText = "Annuller", variant = "default", onConfirm, }: ConfirmDialogProps) { return ( ) } [V0_FILE]sql:file="scripts/003_add_profile_fields.sql" isMerged="true" -- Add new columns to profiles for avatar, class, etc. ALTER TABLE profiles ADD COLUMN IF NOT EXISTS avatar_url text; ALTER TABLE profiles ADD COLUMN IF NOT EXISTS class_name text; ALTER TABLE profiles ADD COLUMN IF NOT EXISTS phone text; ALTER TABLE profiles ADD COLUMN IF NOT EXISTS bio text; -- Add area_responsibles junction table for multiple responsible users per area CREATE TABLE IF NOT EXISTS area_responsibles ( id uuid PRIMARY KEY DEFAULT gen_random_uuid(), area_id uuid REFERENCES areas(id) ON DELETE CASCADE NOT NULL, user_id uuid REFERENCES profiles(id) ON DELETE CASCADE NOT NULL, created_at timestamptz DEFAULT now(), UNIQUE(area_id, user_id) ); -- Enable RLS for area_responsibles ALTER TABLE area_responsibles ENABLE ROW LEVEL SECURITY; -- RLS policies for area_responsibles CREATE POLICY "Anyone can view area responsibles" ON area_responsibles FOR SELECT USING (true); CREATE POLICY "Admin/formand can manage area responsibles" ON area_responsibles FOR ALL USING ( EXISTS ( SELECT 1 FROM profiles WHERE profiles.id = auth.uid() AND profiles.role IN ('admin', 'formand') ) ); -- Update RLS policy for profiles to allow admin to update any profile DROP POLICY IF EXISTS "Users can update own profile" ON profiles; CREATE POLICY "Users can update own profile or admin can update any" ON profiles FOR UPDATE USING ( id = auth.uid() OR EXISTS ( SELECT 1 FROM profiles p WHERE p.id = auth.uid() AND p.role IN ('admin', 'formand') ) ); [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ThemeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Lys setTheme("dark")}>Mørk setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata, Viewport } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { ThemeProvider } from "@/components/theme-provider" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Tietgen Festudvalg - Vagtplan", description: "Moderne vagtplanlægning for Tietgen Festudvalg", } export const viewport: Viewport = { themeColor: [ { media: "(prefers-color-scheme: light)", color: "#ffffff" }, { media: "(prefers-color-scheme: dark)", color: "#1a1a2e" }, ], } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/auth/sign-up/page.tsx" isMerged="true" "use client" import type React from "react" import { createClient } from "@/lib/supabase/client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import Link from "next/link" import { useRouter } from "next/navigation" import { useState } from "react" export default function SignUpPage() { const [name, setName] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [inviteCode, setInviteCode] = useState("") const [className, setClassName] = useState("") const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleSignUp = async (e: React.FormEvent) => { e.preventDefault() const supabase = createClient() setIsLoading(true) setError(null) try { // Check invite code first const { data: invite, error: inviteError } = await supabase .from("invites") .select("*") .eq("code", inviteCode) .is("used_by", null) .single() if (inviteError || !invite) { throw new Error("Ugyldig eller allerede brugt invite-kode") } const { data: authData, error: signUpError } = await supabase.auth.signUp({ email, password, options: { data: { display_name: name, role: invite.role, invite_code: inviteCode, }, }, }) if (signUpError) throw signUpError if (authData.user) { // Create profile directly const { error: profileError } = await supabase.from("profiles").insert({ id: authData.user.id, display_name: name, role: invite.role, is_over_18: false, class_name: className || null, }) if (profileError) { console.error("Profile creation error:", profileError) } // Add user to group if invite has a group assigned if (invite.group_id) { const { error: groupError } = await supabase.from("user_groups").insert({ user_id: authData.user.id, group_id: invite.group_id, }) if (groupError) { console.error("Group assignment error:", groupError) } } const { error: updateError } = await supabase .from("invites") .update({ used_by: authData.user.id }) .eq("code", inviteCode) if (updateError) { console.error("Invite update error:", updateError) } router.push("/dashboard") } } catch (error: unknown) { setError(error instanceof Error ? error.message : "Der opstod en fejl") } finally { setIsLoading(false) } } return (

Tietgen Festudvalg

Vagtplanlægning

Opret bruger Du skal have en invite-kode fra en admin for at oprette en bruger

Navn setName(e.target.value)} className="bg-secondary border-border" />

Email setEmail(e.target.value)} className="bg-secondary border-border" />

Adgangskode setPassword(e.target.value)} className="bg-secondary border-border" />

Klasse (valgfrit) setClassName(e.target.value)} className="bg-secondary border-border" />

Invite-kode setInviteCode(e.target.value)} className="bg-secondary border-border font-mono" />

{error &&

{error}

}

Har du allerede en konto?{" "} Log ind

) } [V0_FILE]sql:file="scripts/004_create_avatars_bucket.sql" isMerged="true" -- Create avatars storage bucket INSERT INTO storage.buckets (id, name, public) VALUES ('avatars', 'avatars', true) ON CONFLICT (id) DO NOTHING; -- Allow authenticated users to upload their own avatar CREATE POLICY "Users can upload own avatar" ON storage.objects FOR INSERT TO authenticated WITH CHECK ( bucket_id = 'avatars' AND (storage.foldername(name))[1] = auth.uid()::text ); -- Allow authenticated users to update their own avatar CREATE POLICY "Users can update own avatar" ON storage.objects FOR UPDATE TO authenticated USING ( bucket_id = 'avatars' AND (storage.foldername(name))[1] = auth.uid()::text ); -- Allow public read access to avatars CREATE POLICY "Anyone can view avatars" ON storage.objects FOR SELECT TO public USING (bucket_id = 'avatars'); -- Allow users to delete their own avatar CREATE POLICY "Users can delete own avatar" ON storage.objects FOR DELETE TO authenticated USING ( bucket_id = 'avatars' AND (storage.foldername(name))[1] = auth.uid()::text ); [V0_FILE]typescriptreact:file="components/profile-content.tsx" isMerged="true" "use client" import type React from "react" import { createClient } from "@/lib/supabase/client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import type { Profile } from "@/lib/types" import { Camera, Save, Calendar, Download, Loader2, Ghost, Pencil, X } from "lucide-react" import { useState } from "react" import useSWR from "swr" import { IDCard3D } from "./id-card-3d" interface ProfileContentProps { profile: Profile userId: string userEmail: string } export function ProfileContent({ profile: initialProfile, userId, userEmail }: ProfileContentProps) { const supabase = createClient() const [isEditing, setIsEditing] = useState(false) const [isSaving, setIsSaving] = useState(false) const [isUploadingAvatar, setIsUploadingAvatar] = useState(false) const [displayName, setDisplayName] = useState(initialProfile.display_name) const [className, setClassName] = useState(initialProfile.class_name || "") const [snapchat, setSnapchat] = useState(initialProfile.snapchat || "") const [bio, setBio] = useState(initialProfile.bio || "") const [avatarUrl, setAvatarUrl] = useState(initialProfile.avatar_url || "") const { data: profile, mutate } = useSWR( `profile-${userId}`, async () => { const { data } = await supabase.from("profiles").select("*").eq("id", userId).single() return data }, { fallbackData: initialProfile }, ) // Fetch user's groups const { data: userGroups } = useSWR("user-groups", async () => { const { data } = await supabase.from("user_groups").select("*, group:groups(*)").eq("user_id", userId) return data || [] }) const { data: myShifts } = useSWR("my-shifts-for-calendar", async () => { const { data: assignments } = await supabase.from("shift_assignments").select("shift_id").eq("user_id", userId) if (!assignments?.length) return [] const shiftIds = assignments.map((a) => a.shift_id) const { data: shifts } = await supabase .from("shifts") .select("*, areas!inner(*, events!inner(*))") .in("id", shiftIds) if (!shifts) return [] return shifts .filter((s: any) => s.areas?.events?.status === "published") .map((s: any) => ({ shift: s, area: s.areas, event: s.areas.events, })) }) const handleSave = async () => { setIsSaving(true) const { error } = await supabase .from("profiles") .update({ display_name: displayName, class_name: className || null, snapchat: snapchat || null, bio: bio || null, avatar_url: avatarUrl || null, }) .eq("id", userId) if (!error) { mutate() setIsEditing(false) } setIsSaving(false) } const handleAvatarUpload = async (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (!file) return setIsUploadingAvatar(true) try { const fileExt = file.name.split(".").pop() const fileName = `${userId}/${Date.now()}.${fileExt}` const { error: uploadError, data } = await supabase.storage.from("avatars").upload(fileName, file, { upsert: true, cacheControl: "3600", }) if (uploadError) { console.error("Upload error:", uploadError.message) return } if (data) { const { data: urlData } = supabase.storage.from("avatars").getPublicUrl(fileName) const newUrl = urlData.publicUrl setAvatarUrl(newUrl) await supabase.from("profiles").update({ avatar_url: newUrl }).eq("id", userId) mutate() } } catch (err) { console.error("Avatar upload failed:", err) } finally { setIsUploadingAvatar(false) } } const exportToCalendar = () => { if (!myShifts?.length) return const formatDateForICS = (date: string, time: string) => { const d = new Date(`${date}T${time}`) return d.toISOString().replace(/[-:]/g, "").split(".")[0] + "Z" } let icsContent = `BEGIN:VCALENDAR VERSION:2.0 PRODID:-//Tietgen Festudvalg//Vagtplan//DA CALSCALE:GREGORIAN METHOD:PUBLISH ` myShifts.forEach((item: any) => { const eventDate = item.event.date const startTime = item.shift.start_time.includes("T") ? item.shift.start_time.split("T")[1].slice(0, 5) : item.shift.start_time const endTime = item.shift.end_time.includes("T") ? item.shift.end_time.split("T")[1].slice(0, 5) : item.shift.end_time icsContent += `BEGIN:VEVENT DTSTART:${formatDateForICS(eventDate, startTime)} DTEND:${formatDateForICS(eventDate, endTime)} SUMMARY:Vagt: ${item.event.name} - ${item.area.name} DESCRIPTION:Vagt i ${item.area.name} til ${item.event.name} LOCATION:${item.event.location || "Tietgen"} END:VEVENT ` }) icsContent += "END:VCALENDAR" const blob = new Blob([icsContent], { type: "text/calendar" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = "mine-vagter.ics" a.click() URL.revokeObjectURL(url) } const getRoleLabel = (role: string) => { switch (role) { case "admin": return "Admin" case "formand": return "Formand" case "area_manager": return "Områdeansvarlig" default: return "Medlem" } } const getRoleBadgeColor = (role: string) => { switch (role) { case "admin": return "bg-red-500/20 text-red-500 dark:text-red-400" case "formand": return "bg-purple-500/20 text-purple-500 dark:text-purple-400" case "area_manager": return "bg-blue-500/20 text-blue-500 dark:text-blue-400" default: return "bg-muted text-muted-foreground" } } return (

Min profil

Administrer dine profilindstillinger

{profile && ( Dit medlemskort Interaktivt 3D ID-kort - hold musen over for at rotere )}

Profiloplysninger Opdater dit navn, klasse og andre oplysninger

{!isEditing ? ( ) : (

)}

{/* Avatar */}

{profile?.display_name?.charAt(0).toUpperCase()} {isUploadingAvatar ? : }

{profile?.display_name}

{userEmail}

{getRoleLabel(profile?.role || "member")} {profile?.is_over_18 && ( 18+ )}

{userGroups && userGroups.length > 0 && (

{userGroups.map((ug: any) => ( {ug.group?.display_name || ug.group?.name} ))}

)}

{/* Form fields */}

Navn {isEditing ? ( setDisplayName(e.target.value)} className="bg-background border-border" /> ) : (

{displayName || "-"}

)}

Klasse {isEditing ? ( setClassName(e.target.value)} placeholder="Fx 3.A" className="bg-background border-border" /> ) : (

{className || "-"}

)}

Snapchat {isEditing ? ( setSnapchat(e.target.value)} placeholder="Dit brugernavn" className="bg-background border-border" /> ) : (

{snapchat ? `@${snapchat}` : "-"}

)}

Om mig {isEditing ? (

setBio(e.target.value)}
                    placeholder="Skriv lidt om dig selv..."
                    className="bg-background border-border min-h-[80px]"
                  />
                ) : (
                  <div className="px-3 py-2 rounded-md bg-secondary border border-border text-foreground min-h-[80px]">
                    {bio || "-"}
                  </div>
                )}
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

<Card className="border-border bg-card">
        <CardHeader className="border-b border-border">
          <CardTitle className="flex items-center gap-2 text-foreground">
            <Calendar className="h-5 w-5 text-primary" />
            Kalender
          </CardTitle>
          <CardDescription>Eksporter dine vagter til din kalender</CardDescription>
        </CardHeader>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between rounded-lg border border-border bg-secondary/50 p-4">
            <div>
              <p className="font-medium text-foreground">Eksporter vagter</p>
              <p className="text-sm text-muted-foreground">Download en .ics fil med alle dine kommende vagter</p>
            </div>
            <Button onClick={exportToCalendar} disabled={!myShifts?.length} variant="outline">
              <Download className="mr-2 h-4 w-4" />
              Download
            </Button>
          </div>
          {myShifts && myShifts.length > 0 && (
            <p className="mt-2 text-xs text-muted-foreground">
              {myShifts.length} vagt{myShifts.length !== 1 ? "er" : ""} klar til eksport
            </p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/id-card-3d.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useRef, useEffect } from "react"
import type { Profile } from "@/lib/types"
import { Ghost } from "lucide-react"

interface IDCard3DProps {
  profile: Profile
}

export function IDCard3D({ profile }: IDCard3DProps) {
  const [rotation, setRotation] = useState({ x: 0, y: 0 })
  const [isHovered, setIsHovered] = useState(false)
  const [isDragging, setIsDragging] = useState(false)
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
  const [baseRotation, setBaseRotation] = useState({ x: 0, y: 0 })
  const [autoRotationAngle, setAutoRotationAngle] = useState(0)
  const cardRef = useRef<HTMLDivElement>(null)
  const animationRef = useRef<number | null>(null)

useEffect(() => {
    const animate = () => {
      if (!isDragging && !isHovered) {
        setAutoRotationAngle((prev) => prev + 0.3)
      }
      animationRef.current = requestAnimationFrame(animate)
    }

animationRef.current = requestAnimationFrame(animate)

return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current)
      }
    }
  }, [isDragging, isHovered])

const getFinalRotation = () => {
    if (isDragging || isHovered) {
      return rotation
    }
    return {
      x: Math.sin(autoRotationAngle * 0.015) * 10,
      y: autoRotationAngle % 360,
    }
  }

const finalRotation = getFinalRotation()

const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!cardRef.current) return

if (isDragging) {
      const deltaX = e.clientX - dragStart.x
      const deltaY = e.clientY - dragStart.y
      setRotation({
        x: baseRotation.x - deltaY * 0.5,
        y: baseRotation.y + deltaX * 0.5,
      })
      return
    }

const rect = cardRef.current.getBoundingClientRect()
    const centerX = rect.left + rect.width / 2
    const centerY = rect.top + rect.height / 2
    const rotateY = ((e.clientX - centerX) / (rect.width / 2)) * 20
    const rotateX = -((e.clientY - centerY) / (rect.height / 2)) * 20
    setRotation({ x: rotateX, y: rotateY })
  }

const handleMouseLeave = () => {
    if (!isDragging) {
      setRotation({ x: 0, y: 0 })
      setBaseRotation({ x: 0, y: 0 })
    }
    setIsHovered(false)
  }

const handleMouseEnter = () => {
    setIsHovered(true)
  }

const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
    setIsDragging(true)
    setDragStart({ x: e.clientX, y: e.clientY })
    setBaseRotation(rotation)
  }

const handleMouseUp = () => {
    setIsDragging(false)
  }

const handleGlobalMouseUp = () => {
    if (isDragging) {
      setIsDragging(false)
    }
  }

const getRoleColor = (role: string) => {
    switch (role) {
      case "admin":
        return { gradient: "from-red-500 to-red-600", accent: "#ef4444" }
      case "formand":
        return { gradient: "from-purple-500 to-purple-600", accent: "#a855f7" }
      case "area_manager":
        return { gradient: "from-blue-500 to-blue-600", accent: "#3b82f6" }
      default:
        return { gradient: "from-orange-500 to-orange-600", accent: "#f97316" }
    }
  }

const getRoleLabel = (role: string) => {
    switch (role) {
      case "admin":
        return "ADMIN"
      case "formand":
        return "FORMAND"
      case "area_manager":
        return "OMRÅDEANSVARLIG"
      default:
        return "MEDLEM"
    }
  }

const roleStyle = getRoleColor(profile.role)

return (
    <div className="flex justify-center py-4">
      <div style={{ perspective: "1200px" }} onMouseUp={handleGlobalMouseUp} onMouseLeave={handleGlobalMouseUp}>
        <div
          ref={cardRef}
          className={`relative w-[340px] h-[210px] select-none ${isDragging ? "cursor-grabbing" : "cursor-grab"}`}
          style={{
            transformStyle: "preserve-3d",
            transform: `rotateX(${finalRotation.x}deg) rotateY(${finalRotation.y}deg)`,
            transition: isDragging ? "none" : "transform 0.1s ease-out",
          }}
          onMouseMove={handleMouseMove}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
          onMouseDown={handleMouseDown}
          onMouseUp={handleMouseUp}
        >
          {/* Front side */}
          <div
            className="absolute inset-0 rounded-xl overflow-hidden select-none"
            style={{
              backfaceVisibility: "hidden",
              background: "linear-gradient(145deg, #1f1f1f 0%, #0a0a0a 100%)",
              boxShadow: "0 20px 50px -15px rgba(0, 0, 0, 0.7)",
              border: "1px solid rgba(255, 255, 255, 0.1)",
            }}
          >
            <div className={`h-2 w-full bg-gradient-to-r ${roleStyle.gradient}`} />
            <div
              className="absolute inset-0 opacity-30 pointer-events-none"
              style={{
                background: `linear-gradient(
                  ${105 + finalRotation.y * 2}deg,
                  transparent 40%,
                  rgba(255, 255, 255, 0.15) 45%,
                  rgba(255, 255, 255, 0.25) 50%,
                  rgba(255, 255, 255, 0.15) 55%,
                  transparent 60%
                )`,
              }}
            />
            <div className="p-5 h-full flex flex-col pointer-events-none">
              <div className="text-center mb-2">
                <p className="text-[10px] tracking-[0.3em] text-zinc-500 font-medium select-none">TIETGEN FESTUDVALG</p>
              </div>
              <div className="text-center mb-3">
                <h2 className="text-xl font-bold text-white tracking-wide select-none">
                  {profile.display_name.toUpperCase()}
                </h2>
              </div>
              <div className="flex justify-center mb-3">
                <span
                  className={`px-4 py-1 rounded-full text-xs font-bold text-white bg-gradient-to-r ${roleStyle.gradient} select-none`}
                >
                  {getRoleLabel(profile.role)}
                </span>
              </div>
              <div className="flex justify-between items-center mt-auto">
                <div className="text-left">
                  {profile.class_name && (
                    <p className="text-xs text-zinc-500 select-none">
                      Klasse: <span className="text-zinc-300">{profile.class_name}</span>
                    </p>
                  )}
                </div>
                {profile.is_over_18 && (
                  <span className="px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-400 text-xs font-bold select-none">
                    18+
                  </span>
                )}
              </div>
              {profile.snapchat && (
                <div className="flex items-center justify-center gap-1.5 mt-2">
                  <Ghost className="h-3.5 w-3.5 text-[#fffc00]" />
                  <span className="text-sm text-[#fffc00] font-medium select-none">@{profile.snapchat}</span>
                </div>
              )}
            </div>
            <div className={`absolute top-2 left-0 w-0.5 h-6 bg-gradient-to-b ${roleStyle.gradient} opacity-60`} />
            <div className={`absolute top-2 right-0 w-0.5 h-6 bg-gradient-to-b ${roleStyle.gradient} opacity-60`} />
            <div className={`absolute bottom-2 left-0 w-0.5 h-6 bg-gradient-to-t ${roleStyle.gradient} opacity-60`} />
            <div className={`absolute bottom-2 right-0 w-0.5 h-6 bg-gradient-to-t ${roleStyle.gradient} opacity-60`} />
          </div>

{/* Back side */}
          <div
            className="absolute inset-0 rounded-xl overflow-hidden select-none"
            style={{
              backfaceVisibility: "hidden",
              transform: "rotateY(180deg)",
              background: "linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 100%)",
              boxShadow: "0 20px 50px -15px rgba(0, 0, 0, 0.7)",
              border: "1px solid rgba(255, 255, 255, 0.1)",
            }}
          >
            <div className={`absolute bottom-0 h-2 w-full bg-gradient-to-r ${roleStyle.gradient}`} />
            <div
              className="absolute inset-0 opacity-20 pointer-events-none"
              style={{
                background: `linear-gradient(
                  ${105 - finalRotation.y * 2}deg,
                  transparent 40%,
                  rgba(255, 255, 255, 0.1) 45%,
                  rgba(255, 255, 255, 0.2) 50%,
                  rgba(255, 255, 255, 0.1) 55%,
                  transparent 60%
                )`,
              }}
            />
            <div className="p-5 h-full flex flex-col pointer-events-none">
              <div className="text-center mb-4">
                <div
                  className="inline-flex items-center justify-center w-12 h-12 rounded-full mb-2"
                  style={{ background: `linear-gradient(135deg, ${roleStyle.accent}40, ${roleStyle.accent}20)` }}
                >
                  <span className="text-2xl font-black select-none" style={{ color: roleStyle.accent }}>
                    TF
                  </span>
                </div>
                <p className="text-[10px] tracking-[0.2em] text-zinc-500 select-none">MEDLEMSKORT</p>
              </div>
              <div className="space-y-2 text-center flex-1 flex flex-col justify-center">
                <div>
                  <p className="text-[10px] text-zinc-600 uppercase tracking-wider select-none">Medlem siden</p>
                  <p className="text-sm text-zinc-300 font-medium select-none">
                    {new Date(profile.created_at).toLocaleDateString("da-DK", {
                      year: "numeric",
                      month: "long",
                    })}
                  </p>
                </div>
                {profile.bio && (
                  <div className="mt-2">
                    <p className="text-[10px] text-zinc-600 uppercase tracking-wider select-none">Bio</p>
                    <p className="text-xs text-zinc-400 line-clamp-2 select-none">{profile.bio}</p>
                  </div>
                )}
              </div>
              <div className="flex justify-center mt-auto">
                <div className="w-16 h-16 bg-white rounded-md p-1">
                  <div className="w-full h-full grid grid-cols-5 gap-0.5">
                    {Array.from({ length: 25 }).map((_, i) => (
                      <div key={i} className={`${Math.random() > 0.5 ? "bg-black" : "bg-white"}`} />
                    ))}
                  </div>
                </div>
              </div>
            </div>
            <div className={`absolute top-2 left-0 w-0.5 h-6 bg-gradient-to-b ${roleStyle.gradient} opacity-60`} />
            <div className={`absolute top-2 right-0 w-0.5 h-6 bg-gradient-to-b ${roleStyle.gradient} opacity-60`} />
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/005_vouchers_and_permissions.sql" isMerged="true"
-- Create vouchers table for gift vouchers
CREATE TABLE IF NOT EXISTS vouchers (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  code TEXT UNIQUE NOT NULL,
  type TEXT NOT NULL, -- 'drink', 'food', 'merchandise', 'custom'
  title TEXT NOT NULL,
  description TEXT,
  quantity INTEGER NOT NULL DEFAULT 1,
  redeemed_count INTEGER NOT NULL DEFAULT 0,
  created_by UUID REFERENCES auth.users(id) ON DELETE SET NULL,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  expires_at TIMESTAMPTZ,
  is_active BOOLEAN DEFAULT true
);

-- Create voucher redemptions table
CREATE TABLE IF NOT EXISTS voucher_redemptions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  voucher_id UUID REFERENCES vouchers(id) ON DELETE CASCADE,
  redeemed_by UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  redeemed_at TIMESTAMPTZ DEFAULT NOW()
);

-- Create permissions table
CREATE TABLE IF NOT EXISTS permissions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT UNIQUE NOT NULL,
  description TEXT,
  category TEXT NOT NULL, -- 'events', 'users', 'vouchers', 'system'
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Create role_permissions junction table
CREATE TABLE IF NOT EXISTS role_permissions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  role TEXT NOT NULL,
  permission_id UUID REFERENCES permissions(id) ON DELETE CASCADE,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  UNIQUE(role, permission_id)
);

-- Insert default permissions
INSERT INTO permissions (name, description, category) VALUES
  ('create_events', 'Opret arrangementer', 'events'),
  ('edit_events', 'Rediger arrangementer', 'events'),
  ('delete_events', 'Slet arrangementer', 'events'),
  ('manage_shifts', 'Administrer vagter', 'events'),
  ('create_invites', 'Opret invitationer', 'users'),
  ('manage_users', 'Administrer brugere', 'users'),
  ('create_vouchers', 'Opret vouchers', 'vouchers'),
  ('redeem_vouchers', 'Indløs vouchers', 'vouchers'),
  ('manage_vouchers', 'Administrer vouchers', 'vouchers'),
  ('manage_permissions', 'Administrer tilladelser', 'system'),
  ('view_admin_panel', 'Se admin panel', 'system')
ON CONFLICT (name) DO NOTHING;

-- Assign default permissions to roles
INSERT INTO role_permissions (role, permission_id)
SELECT 'admin', id FROM permissions
ON CONFLICT DO NOTHING;

INSERT INTO role_permissions (role, permission_id)
SELECT 'formand', id FROM permissions WHERE category IN ('events', 'vouchers') OR name = 'view_admin_panel'
ON CONFLICT DO NOTHING;

INSERT INTO role_permissions (role, permission_id)
SELECT 'area_manager', id FROM permissions WHERE name IN ('view_admin_panel', 'manage_shifts')
ON CONFLICT DO NOTHING;

INSERT INTO role_permissions (role, permission_id)
SELECT 'member', id FROM permissions WHERE name = 'redeem_vouchers'
ON CONFLICT DO NOTHING;

-- Enable RLS
ALTER TABLE vouchers ENABLE ROW LEVEL SECURITY;
ALTER TABLE voucher_redemptions ENABLE ROW LEVEL SECURITY;
ALTER TABLE permissions ENABLE ROW LEVEL SECURITY;
ALTER TABLE role_permissions ENABLE ROW LEVEL SECURITY;

-- Vouchers policies
CREATE POLICY "Users can view active vouchers" ON vouchers FOR SELECT USING (is_active = true);
CREATE POLICY "Admins and formand can create vouchers" ON vouchers FOR INSERT WITH CHECK (
  EXISTS (
    SELECT 1 FROM profiles WHERE id = auth.uid() AND role IN ('admin', 'formand')
  )
);
CREATE POLICY "Admins and formand can update vouchers" ON vouchers FOR UPDATE USING (
  EXISTS (
    SELECT 1 FROM profiles WHERE id = auth.uid() AND role IN ('admin', 'formand')
  )
);
CREATE POLICY "Admins can delete vouchers" ON vouchers FOR DELETE USING (
  EXISTS (
    SELECT 1 FROM profiles WHERE id = auth.uid() AND role = 'admin'
  )
);

-- Voucher redemptions policies
CREATE POLICY "Users can view their redemptions" ON voucher_redemptions FOR SELECT USING (redeemed_by = auth.uid());
CREATE POLICY "Users can redeem vouchers" ON voucher_redemptions FOR INSERT WITH CHECK (redeemed_by = auth.uid());
CREATE POLICY "Admins can view all redemptions" ON voucher_redemptions FOR SELECT USING (
  EXISTS (
    SELECT 1 FROM profiles WHERE id = auth.uid() AND role IN ('admin', 'formand')
  )
);

-- Permissions policies
CREATE POLICY "Everyone can view permissions" ON permissions FOR SELECT USING (true);
CREATE POLICY "Admins can manage permissions" ON permissions FOR ALL USING (
  EXISTS (
    SELECT 1 FROM profiles WHERE id = auth.uid() AND role = 'admin'
  )
);

-- Role permissions policies
CREATE POLICY "Everyone can view role permissions" ON role_permissions FOR SELECT USING (true);
CREATE POLICY "Admins can manage role permissions" ON role_permissions FOR ALL USING (
  EXISTS (
    SELECT 1 FROM profiles WHERE id = auth.uid() AND role = 'admin'
  )
);

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS idx_vouchers_code ON vouchers(code);
CREATE INDEX IF NOT EXISTS idx_vouchers_active ON vouchers(is_active);
CREATE INDEX IF NOT EXISTS idx_voucher_redemptions_voucher ON voucher_redemptions(voucher_id);
CREATE INDEX IF NOT EXISTS idx_voucher_redemptions_user ON voucher_redemptions(redeemed_by);
CREATE INDEX IF NOT EXISTS idx_role_permissions_role ON role_permissions(role);
[V0_FILE]typescriptreact:file="components/voucher-scanner.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Scanner } from "@yudiel/react-qr-scanner"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import { CheckCircle2, XCircle, Scan, Loader2 } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"
import type { Voucher } from "@/lib/types"

export function VoucherScanner() {
  const [scanning, setScanning] = useState(false)
  const [loading, setLoading] = useState(false)
  const [result, setResult] = useState<{ success: boolean; message: string; voucher?: Voucher } | null>(null)
  const supabase = createBrowserClient()

const handleScan = async (detectedCodes: any[]) => {
    if (loading || !detectedCodes.length) return

const code = detectedCodes[0].rawValue
    setLoading(true)
    setScanning(false)

try {
      // Fetch voucher
      const { data: voucher, error: voucherError } = await supabase
        .from("vouchers")
        .select("*")
        .eq("code", code)
        .eq("is_active", true)
        .single()

if (voucherError || !voucher) {
        setResult({ success: false, message: "Ugyldig voucher kode" })
        return
      }

// Check if already fully redeemed
      if (voucher.redeemed_count >= voucher.quantity) {
        setResult({ success: false, message: "Denne voucher er allerede fuldt indløst", voucher })
        return
      }

// Check expiry
      if (voucher.expires_at && new Date(voucher.expires_at) < new Date()) {
        setResult({ success: false, message: "Denne voucher er udløbet", voucher })
        return
      }

// Get current user
      const {
        data: { user },
      } = await supabase.auth.getUser()
      if (!user) {
        setResult({ success: false, message: "Du skal være logget ind for at indløse vouchers" })
        return
      }

// Check if user already redeemed this voucher
      const { data: existingRedemption } = await supabase
        .from("voucher_redemptions")
        .select("id")
        .eq("voucher_id", voucher.id)
        .eq("redeemed_by", user.id)
        .single()

if (existingRedemption) {
        setResult({ success: false, message: "Du har allerede indløst denne voucher", voucher })
        return
      }

// Redeem voucher
      const { error: redemptionError } = await supabase
        .from("voucher_redemptions")
        .insert({ voucher_id: voucher.id, redeemed_by: user.id })

if (redemptionError) {
        setResult({ success: false, message: "Fejl ved indløsning af voucher" })
        return
      }

// Update redeemed count
      await supabase
        .from("vouchers")
        .update({ redeemed_count: voucher.redeemed_count + 1 })
        .eq("id", voucher.id)

setResult({ success: true, message: "Voucher indløst succesfuldt!", voucher })
    } catch (error) {
      setResult({ success: false, message: "Der opstod en fejl" })
    } finally {
      setLoading(false)
    }
  }

return (
    <Card className="border-border bg-card">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Scan className="h-5 w-5" />
          Scan Voucher
        </CardTitle>
        <CardDescription>Scan QR-koden på din voucher for at indløse den</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {!scanning && !result && (
          <Button onClick={() => setScanning(true)} className="w-full" size="lg">
            <Scan className="mr-2 h-4 w-4" />
            Start Scanner
          </Button>
        )}

{scanning && (
          <div className="space-y-4">
            <div className="relative aspect-square w-full overflow-hidden rounded-lg border-2 border-primary">
              <Scanner
                onScan={handleScan}
                styles={{
                  container: { width: "100%", height: "100%" },
                }}
              />
            </div>
            <Button onClick={() => setScanning(false)} variant="outline" className="w-full">
              Annuller
            </Button>
          </div>
        )}

{loading && (
          <div className="flex items-center justify-center py-8">
            <Loader2 className="h-8 w-8 animate-spin text-primary" />
          </div>
        )}

{result && (
          <div className="space-y-4">
            <Alert variant={result.success ? "default" : "destructive"}>
              {result.success ? <CheckCircle2 className="h-4 w-4" /> : <XCircle className="h-4 w-4" />}
              <AlertDescription>{result.message}</AlertDescription>
            </Alert>

{result.voucher && (
              <Card className="border-border">
                <CardHeader>
                  <CardTitle className="text-lg">{result.voucher.title}</CardTitle>
                  {result.voucher.description && <CardDescription>{result.voucher.description}</CardDescription>}
                </CardHeader>
                <CardContent>
                  <div className="flex items-center gap-2">
                    <Badge variant="secondary">
                      {result.voucher.type === "drink" && "🍺 Drinks"}
                      {result.voucher.type === "food" && "🍕 Mad"}
                      {result.voucher.type === "merchandise" && "🎁 Merchandise"}
                      {result.voucher.type === "custom" && "✨ Andet"}
                    </Badge>
                    <Badge variant="outline">
                      {result.voucher.redeemed_count + (result.success ? 1 : 0)}/{result.voucher.quantity} indløst
                    </Badge>
                  </div>
                </CardContent>
              </Card>
            )}

<Button
              onClick={() => {
                setResult(null)
                setScanning(true)
              }}
              className="w-full"
            >
              Scan Næste Voucher
            </Button>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/scan/page.tsx" isMerged="true"
import { createServerClient } from "@/lib/supabase/server"
import { redirect } from "next/navigation"
import { VoucherScanner } from "@/components/voucher-scanner"

export default async function ScanPage() {
  const supabase = await createServerClient()
  const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

return (
    <div className="container max-w-2xl py-8">
      <VoucherScanner />
    </div>
  )
}
[V0_FILE]typescript:file="lib/supabase/client.ts" isEdit="true" isMerged="true"
import { createBrowserClient as createSupabaseBrowserClient } from "@supabase/ssr"

export function createClient() {
  return createSupabaseBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
}

export function createBrowserClient() {
  return createClient()
}
[V0_FILE]typescript:file="lib/supabase/server.ts" isEdit="true" isMerged="true"
import { createServerClient as createSupabaseServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"

export async function createClient() {
  const cookieStore = await cookies()

return createSupabaseServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
    cookies: {
      getAll() {
        return cookieStore.getAll()
      },
      setAll(cookiesToSet) {
        try {
          cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
        } catch {
          // The "setAll" method was called from a Server Component.
        }
      },
    },
  })
}

export async function createServerClient() {
  return await createClient()
}
[V0_FILE]sql:file="scripts/006_add_voucher_design.sql" isMerged="true"
-- Add design columns to vouchers table
ALTER TABLE vouchers 
ADD COLUMN IF NOT EXISTS background_color TEXT DEFAULT '#ffffff',
ADD COLUMN IF NOT EXISTS text_color TEXT DEFAULT '#000000',
ADD COLUMN IF NOT EXISTS border_color TEXT DEFAULT '#000000',
ADD COLUMN IF NOT EXISTS font_size TEXT DEFAULT '24',
ADD COLUMN IF NOT EXISTS logo_url TEXT,
ADD COLUMN IF NOT EXISTS custom_css TEXT;
[V0_FILE]sql:file="scripts/007_voucher_templates.sql" isMerged="true"
-- Create voucher_templates table
CREATE TABLE IF NOT EXISTS voucher_templates (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  background_color TEXT DEFAULT '#ffffff',
  text_color TEXT DEFAULT '#000000',
  border_color TEXT DEFAULT '#000000',
  font_size TEXT DEFAULT '24',
  logo_url TEXT,
  custom_css TEXT,
  created_by UUID REFERENCES profiles(id) ON DELETE SET NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- RLS policies
ALTER TABLE voucher_templates ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Admins and formands can create templates"
  ON voucher_templates FOR INSERT
  WITH CHECK (
    EXISTS (
      SELECT 1 FROM profiles
      WHERE profiles.id = auth.uid()
      AND profiles.role IN ('admin', 'formand')
    )
  );

CREATE POLICY "Everyone can view templates"
  ON voucher_templates FOR SELECT
  USING (true);

CREATE POLICY "Admins and formands can update templates"
  ON voucher_templates FOR UPDATE
  USING (
    EXISTS (
      SELECT 1 FROM profiles
      WHERE profiles.id = auth.uid()
      AND profiles.role IN ('admin', 'formand')
    )
  );

CREATE POLICY "Admins and formands can delete templates"
  ON voucher_templates FOR DELETE
  USING (
    EXISTS (
      SELECT 1 FROM profiles
      WHERE profiles.id = auth.uid()
      AND profiles.role IN ('admin', 'formand')
    )
  );
[V0_FILE]typescriptreact:file="components/voucher-print.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { QRCodeSVG } from "qrcode.react"
import type { Voucher } from "@/lib/types"
import { Button } from "@/components/ui/button"
import { Printer, Scissors } from "lucide-react"

interface VoucherPrintProps {
  vouchers: Voucher[]
  layout: "full" | "mini" | "cutout" | "quad"
  onClose: () => void
}

export function VoucherPrint({ vouchers, layout, onClose }: VoucherPrintProps) {
  const handlePrint = () => {
    window.print()
  }

const handleDownloadPDF = () => {
    // Open print dialog - user can choose "Save as PDF"
    window.print()
  }

const parseCustomCSS = (css: string): React.CSSProperties => {
    const style: React.CSSProperties = {}
    try {
      const rules = css.split(";").filter((rule) => rule.trim())
      for (const rule of rules) {
        const [property, value] = rule.split(":").map((s) => s.trim())
        if (property && value) {
          const camelProperty = property.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
          style[camelProperty as any] = value
        }
      }
    } catch (e) {
      console.error("Failed to parse custom CSS:", e)
    }
    return style
  }

return (
    <div className="fixed inset-0 z-50 bg-white overflow-auto">
      <div className="print-controls print:hidden sticky top-0 z-10 flex gap-2 border-b bg-white p-4 shadow-sm">
        <Button onClick={handlePrint}>
          <Printer className="mr-2 h-4 w-4" />
          Print / Gem PDF
        </Button>
        <Button variant="outline" onClick={onClose}>
          Luk
        </Button>
      </div>

<div id="voucher-print-container" className="p-0">
        {layout === "full" ? (
          <>
            {vouchers.map((voucher, index) => (
              <div
                key={voucher.id}
                id={`voucher-${index}`}
                className={`flex min-h-screen flex-col items-center justify-center ${index > 0 ? "page-break-before" : ""}`}
                style={{
                  backgroundColor: voucher.background_color || "#ffffff",
                  color: voucher.text_color || "#000000",
                }}
              >
                <div
                  className="w-full max-w-2xl space-y-8 rounded-lg p-12 text-center"
                  style={{
                    border: `4px solid ${voucher.border_color || "#000000"}`,
                    ...parseCustomCSS(voucher.custom_css || ""),
                  }}
                >
                  {/* Logo */}
                  {voucher.logo_url && (
                    <img
                      src={voucher.logo_url || "/placeholder.svg"}
                      alt="Logo"
                      className="mx-auto h-20 object-contain"
                    />
                  )}

<div className="space-y-2">
                    <h1 className="text-4xl font-bold">Tietgen Festudvalg</h1>
                    <p className="text-xl opacity-60">Gavevoucher</p>
                  </div>

<div className="space-y-4 border-y-2 border-dashed py-8" style={{ borderColor: "currentColor" }}>
                    <h2 className="font-bold" style={{ fontSize: `${voucher.font_size || 24}px` }}>
                      {voucher.title}
                    </h2>
                    {voucher.description && <p className="text-lg opacity-60">{voucher.description}</p>}
                    <div className="flex items-center justify-center gap-4 text-sm opacity-60">
                      <span>
                        {voucher.type === "drink" && "🍺 Drinks"}
                        {voucher.type === "food" && "🍕 Mad"}
                        {voucher.type === "merchandise" && "🎁 Merchandise"}
                        {voucher.type === "custom" && "✨ Andet"}
                      </span>
                      <span>•</span>
                      <span>{voucher.quantity} stk.</span>
                    </div>
                  </div>

<div className="flex flex-col items-center gap-4">
                    <div className="rounded-lg bg-white p-4 shadow-lg">
                      <QRCodeSVG value={voucher.code} size={256} level="H" />
                    </div>
                    <p className="font-mono text-lg font-semibold tracking-wider">{voucher.code}</p>
                  </div>

{voucher.expires_at && (
                    <p className="text-sm opacity-60">
                      Udløber: {new Date(voucher.expires_at).toLocaleDateString("da-DK")}
                    </p>
                  )}

<p className="text-xs opacity-40">Scan QR-koden i TFM appen for at indløse voucher</p>
                </div>
              </div>
            ))}
          </>
        ) : layout === "quad" ? (
          <>
            {Array.from({ length: Math.ceil(vouchers.length / 4) }).map((_, pageIndex) => (
              <div
                key={pageIndex}
                className={`relative grid grid-cols-2 grid-rows-2 gap-0 ${pageIndex > 0 ? "page-break-before" : ""}`}
                style={{ minHeight: "297mm", width: "210mm", margin: "0 auto" }}
              >
                {/* Vertical cut line */}
                <div className="absolute left-1/2 top-0 bottom-0 w-px border-l-2 border-dashed border-gray-300 print:border-gray-400" />
                {/* Horizontal cut line */}
                <div className="absolute top-1/2 left-0 right-0 h-px border-t-2 border-dashed border-gray-300 print:border-gray-400" />

{/* Scissors icons */}
                <div className="absolute left-1/2 top-2 -translate-x-1/2 text-gray-400">
                  <Scissors className="h-4 w-4" />
                </div>
                <div className="absolute left-1/2 bottom-2 -translate-x-1/2 text-gray-400">
                  <Scissors className="h-4 w-4" />
                </div>
                <div className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400 rotate-90">
                  <Scissors className="h-4 w-4" />
                </div>
                <div className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 rotate-90">
                  <Scissors className="h-4 w-4" />
                </div>

{vouchers.slice(pageIndex * 4, (pageIndex + 1) * 4).map((voucher, voucherIndex) => (
                  <div
                    key={voucher.id}
                    className="flex items-center justify-center p-8"
                    style={{
                      backgroundColor: voucher.background_color || "#ffffff",
                      color: voucher.text_color || "#000000",
                    }}
                  >
                    <div
                      className="w-full max-w-sm space-y-4 rounded-lg p-6 text-center"
                      style={{
                        border: `3px solid ${voucher.border_color || "#000000"}`,
                        ...parseCustomCSS(voucher.custom_css || ""),
                      }}
                    >
                      {voucher.logo_url && (
                        <img
                          src={voucher.logo_url || "/placeholder.svg"}
                          alt="Logo"
                          className="mx-auto h-16 object-contain"
                        />
                      )}

<div className="space-y-1">
                        <h3 className="text-xl font-bold">Tietgen Festudvalg</h3>
                        <p className="text-sm opacity-60">Gavevoucher</p>
                      </div>

<div className="space-y-2 border-y-2 border-dashed py-4" style={{ borderColor: "currentColor" }}>
                        <h4
                          className="font-bold"
                          style={{ fontSize: `${Math.max(16, Number.parseInt(voucher.font_size || "24") / 1.5)}px` }}
                        >
                          {voucher.title}
                        </h4>
                        {voucher.description && (
                          <p className="text-sm opacity-60 line-clamp-2">{voucher.description}</p>
                        )}
                        <div className="flex items-center justify-center gap-3 text-xs opacity-60">
                          <span>
                            {voucher.type === "drink" && "🍺 Drinks"}
                            {voucher.type === "food" && "🍕 Mad"}
                            {voucher.type === "merchandise" && "🎁 Merchandise"}
                            {voucher.type === "custom" && "✨ Andet"}
                          </span>
                          <span>•</span>
                          <span>{voucher.quantity} stk.</span>
                        </div>
                      </div>

<div className="flex flex-col items-center gap-2">
                        <div className="rounded bg-white p-3 shadow">
                          <QRCodeSVG value={voucher.code} size={140} level="H" />
                        </div>
                        <p className="font-mono text-sm font-semibold tracking-wider">{voucher.code}</p>
                      </div>

{voucher.expires_at && (
                        <p className="text-xs opacity-60">
                          Udløber: {new Date(voucher.expires_at).toLocaleDateString("da-DK")}
                        </p>
                      )}

<p className="text-[10px] opacity-40"></p>
                    </div>
                  </div>
                ))}
              </div>
            ))}
          </>
        ) : layout === "mini" ? (
          <>
            {Array.from({ length: Math.ceil(vouchers.length / 4) }).map((_, pageIndex) => (
              <div
                key={pageIndex}
                className={`grid grid-cols-2 gap-4 ${pageIndex > 0 ? "page-break-before" : ""} min-h-screen p-4`}
              >
                {vouchers.slice(pageIndex * 4, (pageIndex + 1) * 4).map((voucher, voucherIndex) => (
                  <div
                    key={voucher.id}
                    id={`voucher-${pageIndex * 4 + voucherIndex}`}
                    className="flex flex-col items-center justify-center border-2 border-dashed p-6 rounded-lg"
                    style={{
                      backgroundColor: voucher.background_color || "#ffffff",
                      color: voucher.text_color || "#000000",
                      borderColor: voucher.border_color || "#000000",
                      minHeight: "48vh",
                      ...parseCustomCSS(voucher.custom_css || ""),
                    }}
                  >
                    <div className="space-y-3 text-center w-full">
                      {voucher.logo_url && (
                        <img
                          src={voucher.logo_url || "/placeholder.svg"}
                          alt="Logo"
                          className="mx-auto h-12 object-contain"
                        />
                      )}

<div className="space-y-1">
                        <h3 className="text-lg font-bold">TFM</h3>
                        <p className="text-xs opacity-60">Gavevoucher</p>
                      </div>

<div className="space-y-2 border-y py-3" style={{ borderColor: "currentColor" }}>
                        <h4
                          className="font-bold"
                          style={{ fontSize: `${Math.max(12, Number.parseInt(voucher.font_size || "24") / 2)}px` }}
                        >
                          {voucher.title}
                        </h4>
                        {voucher.description && (
                          <p className="text-xs opacity-60 line-clamp-2">{voucher.description}</p>
                        )}
                        <div className="text-xs opacity-60">
                          {voucher.type === "drink" && "🍺"}
                          {voucher.type === "food" && "🍕"}
                          {voucher.type === "merchandise" && "🎁"}
                          {voucher.type === "custom" && "✨"}
                          <span className="ml-1">{voucher.quantity} stk.</span>
                        </div>
                      </div>

<div className="flex flex-col items-center gap-2">
                        <div className="rounded bg-white p-2 shadow">
                          <QRCodeSVG value={voucher.code} size={120} level="H" />
                        </div>
                        <p className="font-mono text-xs font-semibold">{voucher.code}</p>
                      </div>

{voucher.expires_at && (
                        <p className="text-[10px] opacity-60">
                          Udløber: {new Date(voucher.expires_at).toLocaleDateString("da-DK")}
                        </p>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            ))}
          </>
        ) : layout === "cutout" ? (
          <>
            {Array.from({ length: Math.ceil(vouchers.length / 6) }).map((_, pageIndex) => (
              <div
                key={pageIndex}
                className={`grid grid-cols-2 gap-0 ${pageIndex > 0 ? "page-break-before" : ""} min-h-screen`}
              >
                {vouchers.slice(pageIndex * 6, (pageIndex + 1) * 6).map((voucher, voucherIndex) => (
                  <div
                    key={voucher.id}
                    id={`voucher-${pageIndex * 6 + voucherIndex}`}
                    className="relative border-2 border-dashed border-gray-400 p-4"
                    style={{
                      backgroundColor: voucher.background_color || "#ffffff",
                      color: voucher.text_color || "#000000",
                      minHeight: "32vh",
                    }}
                  >
                    {/* Scissors icon in corner */}
                    <div className="absolute right-2 top-2 text-gray-400">
                      <Scissors className="h-4 w-4" />
                    </div>

<div
                      className="flex h-full flex-col items-center justify-center space-y-2 text-center"
                      style={{
                        border: `2px solid ${voucher.border_color || "#000000"}`,
                        borderRadius: "8px",
                        padding: "16px",
                        ...parseCustomCSS(voucher.custom_css || ""),
                      }}
                    >
                      {voucher.logo_url && (
                        <img
                          src={voucher.logo_url || "/placeholder.svg"}
                          alt="Logo"
                          className="mx-auto h-10 object-contain"
                        />
                      )}

<div className="space-y-1">
                        <h3 className="text-base font-bold">TFM Gavevoucher</h3>
                      </div>

<div className="space-y-1 border-y py-2" style={{ borderColor: "currentColor" }}>
                        <h4
                          className="font-bold"
                          style={{ fontSize: `${Math.max(10, Number.parseInt(voucher.font_size || "24") / 2.5)}px` }}
                        >
                          {voucher.title}
                        </h4>
                        <div className="text-xs opacity-70">
                          {voucher.type === "drink" && "🍺"}
                          {voucher.type === "food" && "🍕"}
                          {voucher.type === "merchandise" && "🎁"}
                          {voucher.type === "custom" && "✨"}
                          <span className="ml-1">{voucher.quantity} stk.</span>
                        </div>
                      </div>

<div className="flex flex-col items-center gap-1">
                        <div className="rounded bg-white p-1.5 shadow">
                          <QRCodeSVG value={voucher.code} size={90} level="H" />
                        </div>
                        <p className="font-mono text-[10px] font-semibold">{voucher.code}</p>
                      </div>

{voucher.expires_at && (
                        <p className="text-[9px] opacity-60">
                          Udløber: {new Date(voucher.expires_at).toLocaleDateString("da-DK")}
                        </p>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            ))}
          </>
        ) : (
          <></>
        )}
      </div>

export interface Group {
  id: string
  name: string
  display_name: string
  description: string | null
  color: string
  created_at: string
}

export interface UserGroup {
  id: string
  user_id: string
  group_id: string
  created_at: string
  group?: Group
}

export interface Profile {
  id: string
  display_name: string
  role: string // Legacy field - kept for backwards compatibility
  role_id: string
  role_data?: Role
  is_over_18: boolean
  avatar_url: string | null
  class_name: string | null
  snapchat: string | null
  bio: string | null
  created_at: string
  updated_at: string
  groups?: UserGroup[]
}

export interface Event {
  id: string
  name: string
  date: string
  start_time: string
  end_time: string
  location: string | null
  status: "draft" | "open" | "published" | "completed"
  created_by: string | null
  created_at: string
  published_at: string | null
  group_id: string | null
  visible_to_all: boolean
  group?: Group
}

export interface Area {
  id: string
  event_id: string
  name: string
  responsible_text: string | null
  requires_18: boolean
  created_by: string | null
  created_at: string
  group_id: string | null
  group?: Group
  responsibles?: AreaResponsible[]
}

export interface AreaResponsible {
  id: string
  area_id: string
  user_id: string
  profile?: Profile
  created_at: string
}

export interface Shift {
  id: string
  area_id: string
  start_time: string
  end_time: string
  needed: number
  created_by: string | null
  created_at: string
}

export interface ShiftAssignment {
  id: string
  shift_id: string
  user_id: string
  created_at: string
  profile?: Profile
}

export interface Bid {
  id: string
  event_id: string
  area_id: string
  user_id: string
  created_at: string
}

export interface Invite {
  code: string
  role: string // Legacy - now uses role_id
  role_id: string
  role_data?: Role
  used_by: string | null
  created_by: string | null
  created_at: string
}

export interface Voucher {
  id: string
  code: string
  type: "drink" | "food" | "merchandise" | "custom"
  title: string
  description: string | null
  quantity: number
  redeemed_count: number
  redeemed_at: string | null
  created_by: string | null
  created_at: string
  expires_at: string | null
  is_active: boolean
  background_color?: string
  text_color?: string
  border_color?: string
  font_size?: string
  logo_url?: string
  custom_css?: string
  expiresAt?: string
}

export interface VoucherTemplate {
  id: string
  name: string
  background_color: string
  text_color: string
  border_color: string
  font_size: string
  logo_url: string | null
  custom_css: string | null
  created_by: string | null
  created_at: string
}

export interface VoucherRedemption {
  id: string
  voucher_id: string
  redeemed_by: string
  redeemed_at: string
  profile?: Profile
  voucher?: Voucher
}

export interface Permission {
  id: string
  name: string
  description: string | null
  category: "events" | "users" | "vouchers" | "system"
  created_at: string
}

export interface RolePermission {
  id: string
  role: string // Legacy
  role_id: string
  permission_id: string
  permission?: Permission
  created_at: string
}

// Declare UserRole here if it's not imported from another module
type UserRole = string;
[V0_FILE]typescriptreact:file="components/permissions-tab.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"

import useSWR from "swr"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Shield, Lock, Plus, Trash2 } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"
import type { Profile, Permission, RolePermission } from "@/lib/types"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { ConfirmDialog } from "./confirm-dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

interface PermissionsTabProps {
  currentUser: Profile
}

export function PermissionsTab({ currentUser }: PermissionsTabProps) {
  const supabase = createBrowserClient()

const { data: permissions } = useSWR<Permission[]>("permissions", async () => {
    const { data } = await supabase.from("permissions").select("*").order("category", { ascending: true })
    return data || []
  })

const { data: rolePermissions, mutate: mutateRolePermissions } = useSWR<RolePermission[]>(
    "role_permissions",
    async () => {
      const { data } = await supabase.from("role_permissions").select("*, permission:permissions(*)")
      return data || []
    },
  )

const hasPermission = (role: string, permissionId: string) => {
    return rolePermissions?.some((rp) => rp.role === role && rp.permission_id === permissionId)
  }

const togglePermission = async (role: string, permissionId: string) => {
    const existing = rolePermissions?.find((rp) => rp.role === role && rp.permission_id === permissionId)

if (existing) {
      await supabase.from("role_permissions").delete().eq("id", existing.id)
    } else {
      await supabase.from("role_permissions").insert({ role, permission_id: permissionId })
    }

mutateRolePermissions()
  }

const [showNewRoleDialog, setShowNewRoleDialog] = useState(false)
  const [newRole, setNewRole] = useState({ value: "", label: "", color: "bg-gray-500" })

const { data: customRolesData, mutate: mutateCustomRoles } = useSWR<any[]>("custom_roles", async () => {
    const { data } = await supabase.from("profiles").select("role").neq("role", null)
    // Extract unique custom roles
    const uniqueRoles = Array.from(new Set(data?.map((p) => p.role) || []))
    return uniqueRoles
      .filter((role) => !["admin", "formand", "area_manager", "member"].includes(role))
      .map((role) => ({
        value: role,
        label: role.charAt(0).toUpperCase() + role.slice(1),
        color: "bg-teal-500",
        isDefault: false,
      }))
  })

const handleDeleteRole = async (roleValue: string) => {
    // Remove all permissions for this role
    const permissionsToDelete = rolePermissions?.filter((rp) => rp.role === roleValue) || []
    for (const perm of permissionsToDelete) {
      await supabase.from("role_permissions").delete().eq("id", perm.id)
    }

// Update all users with this role to 'member'
    await supabase.from("profiles").update({ role: "member" }).eq("role", roleValue)

mutateRolePermissions()
    mutateCustomRoles()
  }

const roles = [
    { value: "admin", label: "Administrator", color: "bg-red-500", isDefault: true },
    { value: "formand", label: "Formand", color: "bg-purple-500", isDefault: true },
    { value: "area_manager", label: "Områdeansvarlig", color: "bg-blue-500", isDefault: true },
    { value: "member", label: "Medlem", color: "bg-orange-500", isDefault: true },
    ...(customRolesData || []),
  ]

const groupedPermissions = permissions?.reduce(
    (acc, permission) => {
      if (!acc[permission.category]) {
        acc[permission.category] = []
      }
      acc[permission.category].push(permission)
      return acc
    },
    {} as Record<string, Permission[]>,
  )

const handleCreateRole = async () => {
    if (!newRole.value || !newRole.label) return

if (permissions && permissions.length > 0) {
      await supabase.from("role_permissions").insert({
        role: newRole.value,
        permission_id: permissions[0].id,
      })
    }

setShowNewRoleDialog(false)
    setNewRole({ value: "", label: "", color: "bg-gray-500" })
    mutateCustomRoles()
    mutateRolePermissions()
  }

if (currentUser.role !== "admin") {
    return (
      <Card className="border-border bg-card">
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-foreground">
            <Lock className="h-5 w-5" />
            Ingen adgang
          </CardTitle>
          <CardDescription>Kun administratorer kan administrere tilladelser</CardDescription>
        </CardHeader>
      </Card>
    )
  }

return (
    <div className="space-y-6">
      <Card className="border-border bg-card">
        <CardHeader className="border-b border-border">
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2 text-foreground">
                <Shield className="h-5 w-5" />
                Roller & Tilladelser
              </CardTitle>
              <CardDescription>Administrer hvilke roller der har adgang til forskellige funktioner</CardDescription>
            </div>
            <Dialog open={showNewRoleDialog} onOpenChange={setShowNewRoleDialog}>
              <DialogTrigger asChild>
                <Button size="sm">
                  <Plus className="mr-2 h-4 w-4" />
                  Ny Rolle
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Opret Ny Rolle</DialogTitle>
                </DialogHeader>
                <div className="space-y-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium">Rolle ID (kun små bogstaver, underscore)</label>
                    <Input
                      value={newRole.value}
                      onChange={(e) =>
                        setNewRole({ ...newRole, value: e.target.value.toLowerCase().replace(/[^a-z_]/g, "") })
                      }
                      placeholder="f.eks. bartender"
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">Rolle Navn</label>
                    <Input
                      value={newRole.label}
                      onChange={(e) => setNewRole({ ...newRole, label: e.target.value })}
                      placeholder="F.eks. Bartender"
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">Farve</label>
                    <Select value={newRole.color} onValueChange={(color) => setNewRole({ ...newRole, color })}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="bg-red-500">🔴 Rød</SelectItem>
                        <SelectItem value="bg-blue-500">🔵 Blå</SelectItem>
                        <SelectItem value="bg-green-500">🟢 Grøn</SelectItem>
                        <SelectItem value="bg-yellow-500">🟡 Gul</SelectItem>
                        <SelectItem value="bg-purple-500">🟣 Lilla</SelectItem>
                        <SelectItem value="bg-pink-500">🩷 Pink</SelectItem>
                        <SelectItem value="bg-orange-500">🟠 Orange</SelectItem>
                        <SelectItem value="bg-gray-500">⚪ Grå</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <Button onClick={handleCreateRole} disabled={!newRole.value || !newRole.label} className="w-full">
                    Opret Rolle
                  </Button>
                </div>
              </DialogContent>
            </Dialog>
          </div>
        </CardHeader>
        <CardContent className="pt-6">
          <div className="mb-6 flex flex-wrap gap-3">
            {roles.map((role) => (
              <div key={role.value} className="flex items-center gap-2">
                <Badge className={`${role.color} text-white`}>{role.label}</Badge>
                {!role.isDefault && (
                  <ConfirmDialog
                    title="Slet rolle?"
                    description={`Dette vil fjerne alle tilladelser for denne rolle og ændre alle brugere med denne rolle til "Medlem".`}
                    onConfirm={() => handleDeleteRole(role.value)}
                  >
                    <Button variant="ghost" size="sm" className="h-6 w-6 p-0 hover:bg-destructive/10">
                      <Trash2 className="h-3 w-3 text-destructive" />
                    </Button>
                  </ConfirmDialog>
                )}
              </div>
            ))}
          </div>

<div className="space-y-6">
            {Object.entries(groupedPermissions || {}).map(([category, perms]) => (
              <div key={category} className="space-y-3">
                <h3 className="text-sm font-semibold uppercase text-muted-foreground">
                  {category === "events" && "📅 Arrangementer"}
                  {category === "users" && "👥 Brugere"}
                  {category === "vouchers" && "🎁 Vouchers"}
                  {category === "system" && "⚙️ System"}
                </h3>
                <div className="space-y-2">
                  {perms.map((permission) => (
                    <Card key={permission.id} className="border-border">
                      <CardContent className="flex items-center justify-between p-4">
                        <div>
                          <p className="font-medium">{permission.description || permission.name}</p>
                          <p className="text-xs text-muted-foreground">{permission.name}</p>
                        </div>
                        <div className="flex gap-4">
                          {roles.map((role) => (
                            <div key={role.value} className="flex items-center gap-2">
                              <Switch
                                checked={hasPermission(role.value, permission.id)}
                                onCheckedChange={() => togglePermission(role.value, permission.id)}
                              />
                              <span className="text-xs text-muted-foreground">{role.label}</span>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]sql:file="scripts/008_auto_delete_old_vouchers.sql" isMerged="true"
-- Function to delete vouchers that have been fully redeemed more than 6 months ago
CREATE OR REPLACE FUNCTION delete_old_redeemed_vouchers()
RETURNS void AS $$
BEGIN
  DELETE FROM vouchers
  WHERE id IN (
    SELECT DISTINCT v.id
    FROM vouchers v
    INNER JOIN voucher_redemptions vr ON v.id = vr.voucher_id
    WHERE v.redeemed_count >= v.quantity
    AND vr.redeemed_at < NOW() - INTERVAL '6 months'
  );
END;
$$ LANGUAGE plpgsql;

-- Create a scheduled job to run daily (requires pg_cron extension)
-- Note: If pg_cron is not available, you can call this function manually or via a cron job
-- SELECT cron.schedule('delete-old-vouchers', '0 3 * * *', 'SELECT delete_old_redeemed_vouchers()');

-- Alternative: Create a trigger that checks on each redemption
CREATE OR REPLACE FUNCTION check_and_delete_old_vouchers()
RETURNS trigger AS $$
BEGIN
  -- Delete vouchers that were fully redeemed more than 6 months ago
  DELETE FROM vouchers
  WHERE id IN (
    SELECT DISTINCT v.id
    FROM vouchers v
    INNER JOIN voucher_redemptions vr ON v.id = vr.voucher_id
    WHERE v.redeemed_count >= v.quantity
    AND vr.redeemed_at < NOW() - INTERVAL '6 months'
  );
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Trigger that runs after each redemption to clean up old vouchers
DROP TRIGGER IF EXISTS trigger_cleanup_old_vouchers ON voucher_redemptions;
CREATE TRIGGER trigger_cleanup_old_vouchers
AFTER INSERT ON voucher_redemptions
FOR EACH STATEMENT
EXECUTE FUNCTION check_and_delete_old_vouchers();
[V0_FILE]sql:file="scripts/009_fix_voucher_rls.sql" isMerged="true"
-- Fix voucher RLS policies to allow admins/formand to see all vouchers (not just active)

-- Drop existing policies
DROP POLICY IF EXISTS "Users can view active vouchers" ON vouchers;
DROP POLICY IF EXISTS "Admins and formand can create vouchers" ON vouchers;
DROP POLICY IF EXISTS "Admins and formand can update vouchers" ON vouchers;
DROP POLICY IF EXISTS "Admins can delete vouchers" ON vouchers;

-- Create new policies

-- Allow everyone to view active vouchers, but admins/formand can see all
CREATE POLICY "Users can view vouchers" ON vouchers FOR SELECT USING (
  is_active = true 
  OR EXISTS (
    SELECT 1 FROM profiles WHERE id = auth.uid() AND role IN ('admin', 'formand')
  )
);

-- Admins and formand can create vouchers
CREATE POLICY "Admins and formand can create vouchers" ON vouchers FOR INSERT WITH CHECK (
  EXISTS (
    SELECT 1 FROM profiles WHERE id = auth.uid() AND role IN ('admin', 'formand')
  )
);

-- Admins and formand can update vouchers
CREATE POLICY "Admins and formand can update vouchers" ON vouchers FOR UPDATE USING (
  EXISTS (
    SELECT 1 FROM profiles WHERE id = auth.uid() AND role IN ('admin', 'formand')
  )
) WITH CHECK (
  EXISTS (
    SELECT 1 FROM profiles WHERE id = auth.uid() AND role IN ('admin', 'formand')
  )
);

-- Admins and formand can delete vouchers
CREATE POLICY "Admins and formand can delete vouchers" ON vouchers FOR DELETE USING (
  EXISTS (
    SELECT 1 FROM profiles WHERE id = auth.uid() AND role IN ('admin', 'formand')
  )
);
[V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useState } from "react"

export default function LoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    const supabase = createClient()
    setIsLoading(true)
    setError(null)

try {
      const { data, error } = await supabase.auth.signInWithPassword({
        email,
        password,
      })
      if (error) throw error
      
      // Wait a moment for session to be established
      if (data.session) {
        // Session is ready, navigate
        router.push("/dashboard")
      } else {
        throw new Error("Ingen session oprettet")
      }
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "Der opstod en fejl ved login")
      setIsLoading(false)
    }
  }

return (
    <div className="flex min-h-svh w-full items-center justify-center p-6">
      <div className="w-full max-w-md">
        <div className="mb-8 text-center">
          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-primary to-accent">
            <span className="text-lg font-bold text-primary-foreground">TC</span>
          </div>
          <h1 className="text-2xl font-bold text-foreground">Tietgen Cooperation</h1>
          <p className="text-sm text-muted-foreground"></p>
        </div>

<Card className="border-border bg-card">
          <CardHeader>
            <CardTitle className="text-xl text-foreground">Log ind</CardTitle>
            <CardDescription>Log ind med din email og adgangskode</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleLogin}>
              <div className="flex flex-col gap-4">
                <div className="grid gap-2">
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="din@email.dk"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="bg-secondary border-border"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="password">Adgangskode</Label>
                  <Input
                    id="password"
                    type="password"
                    placeholder="••••••••"
                    required
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="bg-secondary border-border"
                  />
                </div>
                {error && <p className="text-sm text-destructive">{error}</p>}
                <Button
                  type="submit"
                  className="w-full bg-gradient-to-r from-primary to-accent text-primary-foreground hover:opacity-90"
                  disabled={isLoading}
                >
                  {isLoading ? "Logger ind..." : "Log ind"}
                </Button>
              </div>
              <div className="mt-4 text-center text-sm text-muted-foreground">
                Har du ikke en konto?{" "}
                <Link href="/auth/sign-up" className="text-primary underline underline-offset-4">
                  Opret bruger
                </Link>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/voucher-designer.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Slider } from "@/components/ui/slider"
import { QRCodeSVG } from "qrcode.react"
import type { Voucher } from "@/lib/types"
import { Palette, Type, ImageIcon, Download } from "lucide-react"
import jsPDF from "jspdf"

interface VoucherDesignerProps {
  voucher: Partial<Voucher>
  onChange: (voucher: Partial<Voucher>) => void
  showCode?: boolean
}

export function VoucherDesigner({ voucher, onChange, showCode = true }: VoucherDesignerProps) {
  const [activeTab, setActiveTab] = useState<"colors" | "text" | "layout">("colors")

const handleDownloadPDF = () => {
    // For now, use the browser's built-in print-to-PDF functionality
    // This is more reliable than html2canvas
    window.print()
  }

return (
    <div className="grid gap-6 lg:grid-cols-2">
      {/* Design Controls */}
      <Card className="border-border">
        <CardContent className="space-y-6 pt-6">
          {/* Tab Navigation */}
          <div className="flex gap-2 border-b">
            <button
              onClick={() => setActiveTab("colors")}
              className={`flex items-center gap-2 px-4 py-2 border-b-2 transition-colors ${
                activeTab === "colors"
                  ? "border-primary text-primary"
                  : "border-transparent text-muted-foreground hover:text-foreground"
              }`}
            >
              <Palette className="h-4 w-4" />
              Farver
            </button>
            <button
              onClick={() => setActiveTab("text")}
              className={`flex items-center gap-2 px-4 py-2 border-b-2 transition-colors ${
                activeTab === "text"
                  ? "border-primary text-primary"
                  : "border-transparent text-muted-foreground hover:text-foreground"
              }`}
            >
              <Type className="h-4 w-4" />
              Tekst
            </button>
            <button
              onClick={() => setActiveTab("layout")}
              className={`flex items-center gap-2 px-4 py-2 border-b-2 transition-colors ${
                activeTab === "layout"
                  ? "border-primary text-primary"
                  : "border-transparent text-muted-foreground hover:text-foreground"
              }`}
            >
              <ImageIcon className="h-4 w-4" />
              Layout
            </button>
          </div>

{/* Colors Tab */}
          {activeTab === "colors" && (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label>Baggrundsfarve</Label>
                <div className="flex gap-2">
                  <Input
                    type="color"
                    value={voucher.background_color ?? "#ffffff"}
                    onChange={(e) => onChange({ ...voucher, background_color: e.target.value })}
                    className="h-12 w-20"
                  />
                  <Input
                    type="text"
                    value={voucher.background_color ?? "#ffffff"}
                    onChange={(e) => onChange({ ...voucher, background_color: e.target.value })}
                    placeholder="#ffffff"
                    className="flex-1"
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label>Tekstfarve</Label>
                <div className="flex gap-2">
                  <Input
                    type="color"
                    value={voucher.text_color ?? "#000000"}
                    onChange={(e) => onChange({ ...voucher, text_color: e.target.value })}
                    className="h-12 w-20"
                  />
                  <Input
                    type="text"
                    value={voucher.text_color ?? "#000000"}
                    onChange={(e) => onChange({ ...voucher, text_color: e.target.value })}
                    placeholder="#000000"
                    className="flex-1"
                  />
                </div>
              </div>

<div className="space-y-2">
                <Label>Kantfarve</Label>
                <div className="flex gap-2">
                  <Input
                    type="color"
                    value={voucher.border_color ?? "#000000"}
                    onChange={(e) => onChange({ ...voucher, border_color: e.target.value })}
                    className="h-12 w-20"
                  />
                  <Input
                    type="text"
                    value={voucher.border_color ?? "#000000"}
                    onChange={(e) => onChange({ ...voucher, border_color: e.target.value })}
                    placeholder="#000000"
                    className="flex-1"
                  />
                </div>
              </div>
            </div>
          )}

{/* Text Tab */}
          {activeTab === "text" && (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label>Skriftstørrelse: {voucher.font_size ?? 24}px</Label>
                <Slider
                  value={[Number.parseInt(voucher.font_size ?? "24")]}
                  onValueChange={([value]) => onChange({ ...voucher, font_size: value.toString() })}
                  min={16}
                  max={72}
                  step={2}
                  className="w-full"
                />
              </div>

<div className="space-y-2">
                <Label>Titel</Label>
                <Input
                  value={voucher.title ?? ""}
                  onChange={(e) => onChange({ ...voucher, title: e.target.value })}
                  placeholder="Voucher titel..."
                />
              </div>

<div className="space-y-2">
                <Label>Beskrivelse</Label>
                <Textarea
                  value={voucher.description ?? ""}
                  onChange={(e) => onChange({ ...voucher, description: e.target.value })}
                  placeholder="Voucher beskrivelse..."
                  rows={4}
                />
              </div>
            </div>
          )}

{/* Layout Tab */}
          {activeTab === "layout" && (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label>Logo URL (valgfri)</Label>
                <Input
                  type="url"
                  value={voucher.logo_url ?? ""}
                  onChange={(e) => onChange({ ...voucher, logo_url: e.target.value })}
                  placeholder="https://..."
                />
              </div>

<div className="space-y-2">
                <Label>Custom CSS (avanceret)</Label>
                <Textarea
                  value={voucher.custom_css ?? ""}
                  onChange={(e) => onChange({ ...voucher, custom_css: e.target.value })}
                  placeholder="border-radius: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);"
                  rows={6}
                  className="font-mono text-xs"
                />
              </div>
            </div>
          )}

<Button onClick={handleDownloadPDF} variant="outline" className="w-full bg-transparent">
            <Download className="mr-2 h-4 w-4" />
            Download PDF
          </Button>
        </CardContent>
      </Card>

{/* Live Preview */}
      <div className="space-y-4">
        <Label className="text-base font-semibold">Forhåndsvisning</Label>
        <div id="voucher-preview" className="w-full aspect-[210/297] border border-border rounded-lg p-8 bg-muted">
          <div
            className="w-full h-full flex flex-col items-center justify-center p-8 relative"
            style={{
              backgroundColor: voucher.background_color || "#ffffff",
              color: voucher.text_color || "#000000",
              border: `4px solid ${voucher.border_color || "#000000"}`,
              ...parseCustomCSS(voucher.custom_css || ""),
            }}
          >
            {/* Logo */}
            {voucher.logo_url && (
              <img src={voucher.logo_url || "/placeholder.svg"} alt="Logo" className="h-16 mb-6 object-contain" />
            )}

{/* Title */}
            <h1
              className="font-bold text-center mb-4"
              style={{
                fontSize: `${voucher.font_size || 24}px`,
                color: voucher.text_color || "#000000",
              }}
            >
              {voucher.title || "Din Voucher"}
            </h1>

{/* Description */}
            {voucher.description && (
              <p className="text-center mb-8 max-w-md" style={{ fontSize: "16px" }}>
                {voucher.description}
              </p>
            )}

{/* QR Code */}
            {showCode && voucher.code && (
              <div className="bg-white p-4 rounded-lg shadow-lg">
                <QRCodeSVG value={voucher.code} size={200} level="H" />
              </div>
            )}

{/* Code Text */}
            {showCode && voucher.code && <p className="mt-4 font-mono text-sm tracking-wider">{voucher.code}</p>}

{/* Metadata */}
            <div className="absolute bottom-8 left-8 right-8 flex justify-between text-xs opacity-60">
              <span>{voucher.quantity ? `Antal: ${voucher.quantity}` : ""}</span>
              {voucher.expires_at && <span>Udløber: {new Date(voucher.expires_at).toLocaleDateString("da-DK")}</span>}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

function parseCustomCSS(css: string): React.CSSProperties {
  const style: React.CSSProperties = {}
  try {
    const rules = css.split(";").filter((rule) => rule.trim())
    for (const rule of rules) {
      const [property, value] = rule.split(":").map((s) => s.trim())
      if (property && value) {
        const camelProperty = property.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
        style[camelProperty as any] = value
      }
    }
  } catch (e) {
    console.error("Failed to parse custom CSS:", e)
  }
  return style
}
[V0_FILE]sql:file="scripts/010_flexible_roles_and_groups.sql" isMerged="true"
-- Create flexible role and group system
-- This replaces hardcoded roles with database-driven roles and adds group/committee support

-- 1. Create roles table
CREATE TABLE IF NOT EXISTS roles (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT UNIQUE NOT NULL,
  display_name TEXT NOT NULL,
  color TEXT DEFAULT '#3b82f6',
  priority INTEGER DEFAULT 0, -- Higher priority = more permissions
  can_manage_users BOOLEAN DEFAULT false,
  can_manage_events BOOLEAN DEFAULT false,
  can_manage_vouchers BOOLEAN DEFAULT false,
  can_manage_roles BOOLEAN DEFAULT false,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- 2. Create groups/committees table
CREATE TABLE IF NOT EXISTS groups (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT UNIQUE NOT NULL,
  display_name TEXT NOT NULL,
  description TEXT,
  color TEXT DEFAULT '#6366f1',
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- 3. Create user_groups junction table (many-to-many)
CREATE TABLE IF NOT EXISTS user_groups (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES profiles(id) ON DELETE CASCADE,
  group_id UUID REFERENCES groups(id) ON DELETE CASCADE,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  UNIQUE(user_id, group_id)
);

-- 4. Add role_id to profiles (keep old role column temporarily for migration)
ALTER TABLE profiles ADD COLUMN IF NOT EXISTS role_id UUID REFERENCES roles(id);

-- 5. Add group filtering to events
ALTER TABLE events ADD COLUMN IF NOT EXISTS group_id UUID REFERENCES groups(id);
ALTER TABLE events ADD COLUMN IF NOT EXISTS visible_to_all BOOLEAN DEFAULT true;

-- 6. Add group filtering to areas
ALTER TABLE areas ADD COLUMN IF NOT EXISTS group_id UUID REFERENCES groups(id);

-- Insert default roles
INSERT INTO roles (name, display_name, color, priority, can_manage_users, can_manage_events, can_manage_vouchers, can_manage_roles)
VALUES 
  ('admin', 'Administrator', '#ef4444', 100, true, true, true, true),
  ('formand', 'Formand', '#a855f7', 80, true, true, true, false),
  ('area_manager', 'Områdeansvarlig', '#3b82f6', 50, false, true, false, false),
  ('member', 'Medlem', '#10b981', 10, false, false, false, false)
ON CONFLICT (name) DO UPDATE SET
  display_name = EXCLUDED.display_name,
  color = EXCLUDED.color,
  priority = EXCLUDED.priority,
  can_manage_users = EXCLUDED.can_manage_users,
  can_manage_events = EXCLUDED.can_manage_events,
  can_manage_vouchers = EXCLUDED.can_manage_vouchers,
  can_manage_roles = EXCLUDED.can_manage_roles;

-- Insert default groups
INSERT INTO groups (name, display_name, description, color)
VALUES 
  ('festudvalg', 'Festudvalget', 'Står for fester og arrangementer', '#f59e0b'),
  ('aktivitetsudvalg', 'Aktivitetsudvalget', 'Står for aktiviteter og events', '#3b82f6')
ON CONFLICT (name) DO NOTHING;

-- Migrate existing role data to role_id
DO $$
DECLARE
  admin_role_id UUID;
  formand_role_id UUID;
  area_manager_role_id UUID;
  member_role_id UUID;
BEGIN
  SELECT id INTO admin_role_id FROM roles WHERE name = 'admin';
  SELECT id INTO formand_role_id FROM roles WHERE name = 'formand';
  SELECT id INTO area_manager_role_id FROM roles WHERE name = 'area_manager';
  SELECT id INTO member_role_id FROM roles WHERE name = 'member';

UPDATE profiles SET role_id = admin_role_id WHERE role = 'admin' AND role_id IS NULL;
  UPDATE profiles SET role_id = formand_role_id WHERE role = 'formand' AND role_id IS NULL;
  UPDATE profiles SET role_id = area_manager_role_id WHERE role = 'area_manager' AND role_id IS NULL;
  UPDATE profiles SET role_id = member_role_id WHERE role IN ('member', 'medlem') AND role_id IS NULL;
  
  -- Set default for any remaining users
  UPDATE profiles SET role_id = member_role_id WHERE role_id IS NULL;
END $$;

-- Create indexes
CREATE INDEX IF NOT EXISTS idx_profiles_role_id ON profiles(role_id);
CREATE INDEX IF NOT EXISTS idx_user_groups_user_id ON user_groups(user_id);
CREATE INDEX IF NOT EXISTS idx_user_groups_group_id ON user_groups(group_id);
CREATE INDEX IF NOT EXISTS idx_events_group_id ON events(group_id);
CREATE INDEX IF NOT EXISTS idx_areas_group_id ON areas(group_id);

-- Enable RLS
ALTER TABLE roles ENABLE ROW LEVEL SECURITY;
ALTER TABLE groups ENABLE ROW LEVEL SECURITY;
ALTER TABLE user_groups ENABLE ROW LEVEL SECURITY;

-- RLS Policies for roles
CREATE POLICY "Everyone can view roles" ON roles FOR SELECT USING (true);
CREATE POLICY "Admins can manage roles" ON roles FOR ALL USING (
  EXISTS (
    SELECT 1 FROM profiles p 
    JOIN roles r ON p.role_id = r.id 
    WHERE p.id = auth.uid() AND r.can_manage_roles = true
  )
);

-- RLS Policies for groups
CREATE POLICY "Everyone can view groups" ON groups FOR SELECT USING (true);
CREATE POLICY "Admins and formand can manage groups" ON groups FOR ALL USING (
  EXISTS (
    SELECT 1 FROM profiles p 
    JOIN roles r ON p.role_id = r.id 
    WHERE p.id = auth.uid() AND (r.can_manage_users = true OR r.can_manage_roles = true)
  )
);

-- RLS Policies for user_groups
CREATE POLICY "Users can view their own groups" ON user_groups FOR SELECT USING (
  user_id = auth.uid() OR
  EXISTS (
    SELECT 1 FROM profiles p 
    JOIN roles r ON p.role_id = r.id 
    WHERE p.id = auth.uid() AND r.can_manage_users = true
  )
);

CREATE POLICY "Admins can manage user groups" ON user_groups FOR ALL USING (
  EXISTS (
    SELECT 1 FROM profiles p 
    JOIN roles r ON p.role_id = r.id 
    WHERE p.id = auth.uid() AND r.can_manage_users = true
  )
);

-- Function to check if user has permission
CREATE OR REPLACE FUNCTION user_has_permission(user_uuid UUID, permission_type TEXT)
RETURNS BOOLEAN AS $$
DECLARE
  has_perm BOOLEAN;
BEGIN
  SELECT CASE permission_type
    WHEN 'manage_users' THEN r.can_manage_users
    WHEN 'manage_events' THEN r.can_manage_events
    WHEN 'manage_vouchers' THEN r.can_manage_vouchers
    WHEN 'manage_roles' THEN r.can_manage_roles
    ELSE false
  END INTO has_perm
  FROM profiles p
  JOIN roles r ON p.role_id = r.id
  WHERE p.id = user_uuid;
  
  RETURN COALESCE(has_perm, false);
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- Function to check if user is in group
CREATE OR REPLACE FUNCTION user_in_group(user_uuid UUID, group_uuid UUID)
RETURNS BOOLEAN AS $$
BEGIN
  RETURN EXISTS (
    SELECT 1 FROM user_groups 
    WHERE user_id = user_uuid AND group_id = group_uuid
  );
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;
[V0_FILE]typescript:file="lib/permissions.ts" isMerged="true"
import type { Profile, Role } from "./types"

export async function checkPermission(
  profile: Profile,
  permission: keyof Role
): Promise<boolean> {
  // If profile has role_data loaded, use that
  if (profile.role_data) {
    return Boolean(profile.role_data[permission])
  }
  
  // Fallback: Fetch role data if not loaded
  const { createBrowserClient } = await import("@/lib/supabase/client")
  const supabase = createBrowserClient()
  
  const { data: role } = await supabase
    .from("roles")
    .select("*")
    .eq("id", profile.role_id)
    .single()
  
  if (!role) return false
  return Boolean(role[permission])
}

export function hasPermission(
  profile: Profile | null | undefined,
  permission: keyof Role
): boolean {
  if (!profile?.role_data) return false
  return Boolean(profile.role_data[permission])
}

// Helper to check if user can access admin panel
export function canAccessAdmin(profile: Profile | null | undefined): boolean {
  if (!profile?.role_data) return false
  return (
    profile.role_data.can_manage_users ||
    profile.role_data.can_manage_events ||
    profile.role_data.can_manage_vouchers ||
    profile.role_data.can_manage_roles
  )
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Navbar } from "@/components/navbar"
import { ProfileContent } from "@/components/profile-content"
import type { Profile } from "@/lib/types"

export default async function ProfilePage() {
  const supabase = await createClient()
  const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

const { data: profile } = await supabase
    .from("profiles")
    .select("*")
    .eq("id", user.id)
    .single()

return (
    <div className="min-h-screen bg-background">
      <Navbar profile={profile as Profile | null} />
      <main className="mx-auto max-w-2xl px-4 py-6">
        <ProfileContent profile={profile as Profile} userId={user.id} userEmail={user.email || ""} />
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/navbar.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { ThemeToggle } from "@/components/theme-toggle"
import { cn } from "@/lib/utils"
import type { Profile } from "@/lib/types"
import { Calendar, Home, Settings, LogOut, Menu, X, Scan, Users } from "lucide-react"
import { useState } from "react"
interface NavbarProps {
  profile: Profile | null
}

export function Navbar({ profile }: NavbarProps) {
  const pathname = usePathname()
  const router = useRouter()
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

const handleLogout = async () => {
    const supabase = createClient()
    await supabase.auth.signOut()
    router.push("/auth/login")
  }

// Use legacy role field for now
  const isAdmin = profile && ['admin', 'formand'].includes(profile.role)

const navItems = [
    { href: "/dashboard", label: "Forside", icon: Home },
    { href: "/schedule", label: "Vagtplan", icon: Calendar },
    { href: "/scan", label: "Scan", icon: Scan },
    ...(isAdmin ? [
      { href: "/admin-brugere", label: "Brugere", icon: Users },
      { href: "/admin", label: "Admin", icon: Settings }
    ] : []),
  ]

return (
    <header className="sticky top-0 z-50 w-full border-b border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/60">
      <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4">
        <div className="flex items-center gap-6">
          <Link href="/dashboard" className="flex items-center gap-3">
            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-primary to-accent">
              <span className="text-sm font-bold text-primary-foreground">TC</span>
            </div>
            <div className="hidden sm:block">
              <p className="text-sm font-semibold text-foreground">Tietgen Cooperation</p>
              <p className="text-xs text-muted-foreground">Aktivitets- og festudvalg</p>
            </div>
          </Link>

<nav className="hidden items-center gap-1 md:flex">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                  pathname === item.href
                    ? "bg-secondary text-foreground"
                    : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground",
                )}
              >
                <item.icon className="h-4 w-4" />
                {item.label}
              </Link>
            ))}
          </nav>
        </div>

<div className="flex items-center gap-2">
          <ThemeToggle />
          {profile && (
            <Link
              href="/profile"
              className="hidden items-center gap-2 rounded-full border border-border bg-secondary/50 px-3 py-1.5 sm:flex hover:bg-secondary transition-colors"
            >
              {profile.avatar_url ? (
                <img
                  src={profile.avatar_url || "/placeholder.svg"}
                  alt=""
                  className="h-5 w-5 rounded-full object-cover"
                />
              ) : (
                <div className="h-5 w-5 rounded-full bg-primary/20 flex items-center justify-center">
                  <span className="text-[10px] font-medium text-primary">
                    {profile.display_name.charAt(0).toUpperCase()}
                  </span>
                </div>
              )}
              <span className="text-sm font-medium">{profile.display_name}</span>
              {profile.class_name && <span className="text-xs text-muted-foreground">({profile.class_name})</span>}
            </Link>
          )}
          <Button variant="ghost" size="sm" onClick={handleLogout} className="hidden gap-2 sm:flex">
            <LogOut className="h-4 w-4" />
            Log ud
          </Button>

<Button variant="ghost" size="icon" className="md:hidden" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
            {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
          </Button>
        </div>
      </div>

{mobileMenuOpen && (
        <div className="border-t border-border bg-card p-4 md:hidden">
          <nav className="flex flex-col gap-2">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                onClick={() => setMobileMenuOpen(false)}
                className={cn(
                  "flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                  pathname === item.href
                    ? "bg-secondary text-foreground"
                    : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground",
                )}
              >
                <item.icon className="h-4 w-4" />
                {item.label}
              </Link>
            ))}
          </nav>
          <div className="mt-4 flex items-center justify-between border-t border-border pt-4">
            {profile && (
              <div className="flex items-center gap-2">
                <div className="h-6 w-6 rounded-full bg-primary/20 flex items-center justify-center">
                  <span className="text-xs font-medium text-primary">
                    {profile.display_name.charAt(0).toUpperCase()}
                  </span>
                </div>
                <span className="text-sm font-medium">{profile.display_name}</span>
              </div>
            )}
            <Button variant="ghost" size="sm" onClick={handleLogout} className="gap-2">
              <LogOut className="h-4 w-4" />
              Log ud
            </Button>
          </div>
        </div>
      )}
    </header>
  )
}
[V0_FILE]sql:file="scripts/011_add_group_to_invites.sql" isMerged="true"
-- Add group_id to invites table so invites can assign users to groups on signup

-- Add group_id column if it doesn't exist
ALTER TABLE invites ADD COLUMN IF NOT EXISTS group_id UUID REFERENCES groups(id) ON DELETE SET NULL;

-- Create index for faster lookups
CREATE INDEX IF NOT EXISTS idx_invites_group_id ON invites(group_id);
[V0_FILE]typescriptreact:file="app/admin-brugere/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Navbar } from "@/components/navbar"
import { AdminUsersContent } from "@/components/admin-users-content"
import type { Profile } from "@/lib/types"

export default async function AdminUsersPage() {
  const supabase = await createClient()
  const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

const { data: profile } = await supabase
    .from("profiles")
    .select("*")
    .eq("id", user.id)
    .single()

// Check if user is admin or formand
  if (!profile || !['admin', 'formand'].includes(profile.role)) {
    redirect("/dashboard")
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-background via-background to-secondary/20">
      <Navbar profile={profile} />
      <AdminUsersContent userId={user.id} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin-users-content.tsx" isMerged="true"
"use client"

import { useState } from "react"
import useSWR from "swr"
import { createBrowserClient } from "@/lib/supabase/client"
import type { Profile, Role, Group, UserRole } from "@/lib/types"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Edit, Trash2, Search, Users, X, Plus, Copy, Check, UserPlus } from "lucide-react"

interface AdminUsersContentProps {
  userId: string
}

export function AdminUsersContent({ userId }: AdminUsersContentProps) {
  const supabase = createBrowserClient()
  const [searchQuery, setSearchQuery] = useState("")
  const [filterGroupId, setFilterGroupId] = useState<string>("all")

// Fetch all data upfront
  const { data: profiles, mutate: mutateProfiles } = useSWR<Profile[]>("all-profiles", async () => {
    const { data } = await supabase.from("profiles").select("*").order("display_name")
    return data || []
  })

const { data: roles } = useSWR<Role[]>("all-roles", async () => {
    const { data } = await supabase.from("roles").select("*").order("priority", { ascending: false })
    return data || []
  })

const { data: groups } = useSWR<Group[]>("all-groups", async () => {
    const { data } = await supabase.from("groups").select("*").order("name")
    return data || []
  })

// Fetch user groups for filtering
  const { data: allUserGroups } = useSWR("all-user-groups", async () => {
    const { data } = await supabase.from("user_groups").select("*")
    return data || []
  })

// Edit user state
  const [editingUser, setEditingUser] = useState<Profile | null>(null)
  const [editUserName, setEditUserName] = useState("")
  const [editUserRole, setEditUserRole] = useState<UserRole>("member")
  const [editUserIs18, setEditUserIs18] = useState(false)
  const [editUserClass, setEditUserClass] = useState("")
  const [editUserGroupIds, setEditUserGroupIds] = useState<string[]>([])

// Open edit dialog and fetch user's groups
  const openEditUser = async (profile: Profile) => {
    setEditingUser(profile)
    setEditUserName(profile.display_name)
    setEditUserRole(profile.role)
    setEditUserIs18(profile.is_over_18)
    setEditUserClass(profile.class_name || "")
    
    const { data: userGroupData } = await supabase
      .from("user_groups")
      .select("group_id")
      .eq("user_id", profile.id)
    setEditUserGroupIds(userGroupData?.map(ug => ug.group_id) || [])
  }

// Update user
  const handleUpdateUser = async () => {
    if (!editingUser) return
    
    const { error: profileError } = await supabase
      .from("profiles")
      .update({
        display_name: editUserName,
        role: editUserRole,
        is_over_18: editUserIs18,
        class_name: editUserClass || null,
      })
      .eq("id", editingUser.id)
    
    if (profileError) {
      console.error("Profile update error:", profileError)
      return
    }
    
    await supabase.from("user_groups").delete().eq("user_id", editingUser.id)
    
    if (editUserGroupIds.length > 0) {
      await supabase.from("user_groups").insert(
        editUserGroupIds.map(groupId => ({
          user_id: editingUser.id,
          group_id: groupId
        }))
      )
    }
    
    if (profiles) {
      const updatedProfiles = profiles.map(p => 
        p.id === editingUser.id 
          ? { 
              ...p, 
              display_name: editUserName,
              role: editUserRole,
              is_over_18: editUserIs18,
              class_name: editUserClass || null,
            }
          : p
      )
      mutateProfiles(updatedProfiles, false)
    }
    
    setEditingUser(null)
  }

// Delete user
  const [deleteUserConfirm, setDeleteUserConfirm] = useState<Profile | null>(null)
  const handleDeleteUser = async (profileId: string) => {
    console.log("[v0] Starting delete user:", profileId)
    
    // Nullify invites created by or used by this user
    const { error: inviteCreatedError } = await supabase.from("invites").update({ created_by: null }).eq("created_by", profileId)
    console.log("[v0] Nullified invites created_by, error:", inviteCreatedError)
    
    const { error: inviteUsedError } = await supabase.from("invites").update({ used_by: null }).eq("used_by", profileId)
    console.log("[v0] Nullified invites used_by, error:", inviteUsedError)
    
    // Delete user's groups
    const { error: groupError } = await supabase.from("user_groups").delete().eq("user_id", profileId)
    console.log("[v0] Deleted user_groups, error:", groupError)
    
    // Delete user's bids
    const { error: bidsError } = await supabase.from("bids").delete().eq("user_id", profileId)
    console.log("[v0] Deleted bids, error:", bidsError)
    
    // Delete user's shift assignments
    const { error: shiftsError } = await supabase.from("shift_assignments").delete().eq("user_id", profileId)
    console.log("[v0] Deleted shift_assignments, error:", shiftsError)
    
    // Delete profile
    const { error: profileError } = await supabase.from("profiles").delete().eq("id", profileId)
    console.log("[v0] Deleted profile, error:", profileError)
    
    if (profileError) {
      console.error("[v0] Failed to delete user:", profileError)
      alert("Kunne ikke slette bruger: " + profileError.message)
      return
    }
    
    console.log("[v0] Delete user completed successfully")
    setDeleteUserConfirm(null)
    mutateProfiles()
  }

// Invitations
  const [inviteRole, setInviteRole] = useState<string>("member")
  const [inviteGroupId, setInviteGroupId] = useState<string>("no-group")
  const [copiedCode, setCopiedCode] = useState<string | null>(null)

const { data: invites, mutate: mutateInvites } = useSWR("invites-admin", async () => {
    const { data } = await supabase.from("invites").select("*").order("created_at", { ascending: false }).limit(20)
    return data || []
  })

const generateSimpleCode = () => {
    const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789"
    let code = ""
    for (let i = 0; i < 8; i++) {
      if (i === 4) code += "-"
      code += chars.charAt(Math.floor(Math.random() * chars.length))
    }
    return code
  }

const handleCreateInvite = async () => {
    const code = generateSimpleCode()
    await supabase.from("invites").insert({
      code,
      role: inviteRole,
      group_id: inviteGroupId === "no-group" ? null : inviteGroupId,
      created_by: userId,
    })
    setCopiedCode(code)
    setInviteGroupId("no-group")
    mutateInvites()
    
    // Auto copy to clipboard
    navigator.clipboard.writeText(code)
  }

const copyInviteCode = (code: string) => {
    navigator.clipboard.writeText(code)
    setCopiedCode(code)
    setTimeout(() => setCopiedCode(null), 2000)
  }

const getRoleLabel = (role: string) => {
    const roleMap: Record<string, string> = {
      member: "Medlem",
      area_manager: "Områdeansvarlig",
      formand: "Formand",
      admin: "Admin",
    }
    return roleMap[role] || role
  }

const getRoleBadgeColor = (role: string) => {
    const colorMap: Record<string, string> = {
      admin: "bg-red-500/20 text-red-500 dark:text-red-400",
      formand: "bg-purple-500/20 text-purple-500 dark:text-purple-400",
      area_manager: "bg-blue-500/20 text-blue-500 dark:text-blue-400",
      member: "bg-gray-500/20 text-gray-500 dark:text-gray-400",
    }
    return colorMap[role] || "bg-gray-500/20 text-gray-500"
  }

const filteredProfiles = profiles?.filter(profile => {
    const matchesSearch = profile.display_name.toLowerCase().includes(searchQuery.toLowerCase())
    
    if (filterGroupId === "all") return matchesSearch
    if (filterGroupId === "none") {
      const hasNoGroups = !allUserGroups?.some(ug => ug.user_id === profile.id)
      return matchesSearch && hasNoGroups
    }
    
    const isInGroup = allUserGroups?.some(ug => 
      ug.user_id === profile.id && ug.group_id === filterGroupId
    )
    return matchesSearch && isInGroup
  }) || []

return (
    <main className="container mx-auto px-4 py-8 max-w-7xl">
      <div className="mb-8">
        <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
          Brugeradministration
        </h1>
        <p className="text-muted-foreground mt-2">
          Administrer brugere, opret invitationer og tildel roller
        </p>
      </div>

<Tabs defaultValue="users" className="space-y-6">
        <TabsList className="grid w-full grid-cols-2 max-w-md">
          <TabsTrigger value="users" className="gap-2">
            <Users className="h-4 w-4" />
            Brugere
          </TabsTrigger>
          <TabsTrigger value="invitations" className="gap-2">
            <UserPlus className="h-4 w-4" />
            Invitationer
          </TabsTrigger>
        </TabsList>

<TabsContent value="users" className="space-y-4">
          <Card className="border-border/50 shadow-xl">
            <CardHeader>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="flex items-center gap-2">
                      <Users className="h-5 w-5" />
                      Alle brugere
                    </CardTitle>
                    <CardDescription>
                      {filteredProfiles?.length || 0} af {profiles?.length || 0} brugere
                    </CardDescription>
                  </div>
                  <div className="flex gap-3">
                    <Select value={filterGroupId} onValueChange={setFilterGroupId}>
                      <SelectTrigger className="w-48 bg-secondary border-border">
                        <SelectValue placeholder="Filtrer efter gruppe" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Alle grupper</SelectItem>
                        <SelectItem value="none">Ingen gruppe</SelectItem>
                        {groups?.map(group => (
                          <SelectItem key={group.id} value={group.id}>
                            <span style={{ color: group.color }}>{group.display_name}</span>
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <div className="relative w-64">
                      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                      <Input
                        placeholder="Søg efter navn..."
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="pl-9 bg-secondary border-border"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                {filteredProfiles?.map((profile) => (
                  <div
                    key={profile.id}
                    className="flex items-center justify-between p-4 rounded-lg border border-border bg-secondary/50 hover:bg-secondary transition-colors"
                  >
                    <div className="flex items-center gap-4">
                      <Avatar className="h-12 w-12 border-2 border-primary/20">
                        {profile.avatar_url ? (
                          <img
                            src={profile.avatar_url}
                            alt={profile.display_name}
                            className="h-12 w-12 rounded-full object-cover"
                          />
                        ) : (
                          <AvatarFallback className="bg-gradient-to-br from-primary to-accent text-primary-foreground font-semibold">
                            {profile.display_name.substring(0, 2).toUpperCase()}
                          </AvatarFallback>
                        )}
                      </Avatar>
                      <div>
                        <p className="font-medium">{profile.display_name}</p>
                        <div className="flex items-center gap-2 mt-1">
                          <Badge className={getRoleBadgeColor(profile.role)}>
                            {getRoleLabel(profile.role)}
                          </Badge>
                          {profile.is_over_18 && (
                            <Badge className="bg-emerald-500/20 text-emerald-500">18+</Badge>
                          )}
                          {profile.class_name && (
                            <span className="text-xs text-muted-foreground">{profile.class_name}</span>
                          )}
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => openEditUser(profile)}
                      >
                        <Edit className="h-4 w-4" />
                      </Button>
                      <Button
                        variant="ghost"
                    size="icon"
                    onClick={() => setDeleteUserConfirm(profile)}
                    className="text-destructive hover:text-destructive"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
        </TabsContent>

<TabsContent value="invitations" className="space-y-4">
          <Card className="border-border/50 shadow-xl">
            <CardHeader>
              <CardTitle>Opret invitation</CardTitle>
              <CardDescription>Generer en invitationskode til nye brugere</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Rolle</Label>
                  <Select value={inviteRole} onValueChange={setInviteRole}>
                    <SelectTrigger className="bg-secondary border-border">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {roles && roles.length > 0 ? (
                        roles.map(role => (
                          <SelectItem key={role.id} value={role.name}>
                            {role.display_name}
                          </SelectItem>
                        ))
                      ) : (
                        <>
                          <SelectItem value="member">Medlem</SelectItem>
                          <SelectItem value="admin">Admin</SelectItem>
                        </>
                      )}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>Gruppe (valgfri)</Label>
                  <Select value={inviteGroupId} onValueChange={setInviteGroupId}>
                    <SelectTrigger className="bg-secondary border-border">
                      <SelectValue placeholder="Ingen gruppe" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="no-group">Ingen gruppe</SelectItem>
                      {groups?.map(group => (
                        <SelectItem key={group.id} value={group.id}>
                          <span style={{ color: group.color }}>{group.display_name}</span>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <Button onClick={handleCreateInvite} className="w-full bg-gradient-to-r from-primary to-accent">
                <Plus className="mr-2 h-4 w-4" />
                Generer invitationskode
              </Button>
            </CardContent>
          </Card>

<Card className="border-border/50 shadow-xl">
            <CardHeader>
              <CardTitle>Nylige invitationer</CardTitle>
              <CardDescription>De seneste 20 invitationskoder</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                {invites?.map((invite) => (
                  <div
                    key={invite.id}
                    className="flex items-center justify-between p-4 rounded-lg border border-border bg-secondary/50"
                  >
                    <div className="flex items-center gap-4">
                      <div className="font-mono text-lg font-bold text-primary">
                        {invite.code}
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge variant="outline">{invite.role}</Badge>
                        {invite.used_by ? (
                          <Badge className="bg-green-500/20 text-green-500">Brugt</Badge>
                        ) : (
                          <Badge className="bg-blue-500/20 text-blue-500">Aktiv</Badge>
                        )}
                      </div>
                    </div>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => copyInviteCode(invite.code)}
                    >
                      {copiedCode === invite.code ? (
                        <Check className="h-4 w-4 text-green-500" />
                      ) : (
                        <Copy className="h-4 w-4" />
                      )}
                    </Button>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

{/* Delete Confirmation Dialog */}
      <Dialog open={!!deleteUserConfirm} onOpenChange={(open) => !open && setDeleteUserConfirm(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Slet bruger</DialogTitle>
            <DialogDescription>
              Er du sikker på at du vil slette {deleteUserConfirm?.display_name}? Dette kan ikke fortrydes.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteUserConfirm(null)}>
              Annuller
            </Button>
            <Button
              variant="destructive"
              onClick={() => deleteUserConfirm && handleDeleteUser(deleteUserConfirm.id)}
            >
              Slet bruger
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard-content.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import type { Profile, Event, Area, Shift } from "@/lib/types"
import { Calendar, Clock, MapPin, Users, Check, Lock } from "lucide-react"
import useSWR from "swr"

interface DashboardContentProps {
  userId: string
  profile: Profile | null
}

interface MyShift {
  shift: Shift
  area: Area
  event: Event
}

interface OpenEvent {
  event: Event
  areas: Area[]
  myBids: string[]
}

export function DashboardContent({ userId, profile }: DashboardContentProps) {
  const supabase = createClient()

// Fetch user's groups for event filtering
  const { data: userGroups } = useSWR("user-groups-for-dashboard", async () => {
    const { data } = await supabase.from("user_groups").select("group_id").eq("user_id", userId)
    return data?.map(ug => ug.group_id) || []
  })

const { data: myShifts } = useSWR<MyShift[]>("my-shifts", async () => {
    const { data: assignments } = await supabase.from("shift_assignments").select("shift_id").eq("user_id", userId)

if (!assignments?.length) return []

const shiftIds = assignments.map((a) => a.shift_id)

const { data: shifts } = await supabase
      .from("shifts")
      .select("*, areas!inner(*, events!inner(*))")
      .in("id", shiftIds)

if (!shifts) return []

return shifts
      .filter((s: any) => s.areas?.events?.status === "published")
      .map((s: any) => ({
        shift: s,
        area: s.areas,
        event: s.areas.events,
      }))
      .sort((a, b) => new Date(a.event.date).getTime() - new Date(b.event.date).getTime())
  })

const { data: openEvents, mutate: mutateEvents } = useSWR<OpenEvent[]>(
    userGroups !== undefined ? "open-events" : null,
    async () => {
      const { data: events } = await supabase
        .from("events")
        .select("*")
        .eq("status", "open")
        .order("date", { ascending: true })

if (!events?.length) return []

// Filter events by visibility
      const visibleEvents = events.filter(event => {
        // If visible_to_all is true, show to everyone
        if (event.visible_to_all === true) return true
        
        // If visible_to_all is false, only show if user is in the event's group
        if (event.visible_to_all === false) {
          return event.group_id && userGroups?.includes(event.group_id)
        }
        
        // If visible_to_all is null/undefined, treat as visible to all
        return true
      })

const eventIds = visibleEvents.map((e) => e.id)
      const { data: areas } = await supabase.from("areas").select("*").in("event_id", eventIds)

const { data: bids } = await supabase.from("bids").select("area_id").eq("user_id", userId)

const myBidAreaIds = bids?.map((b) => b.area_id) || []

return visibleEvents.map((event) => ({
        event,
        areas: areas?.filter((a) => a.event_id === event.id) || [],
        myBids: myBidAreaIds,
      }))
    }
  )

const [biddingAreaId, setBiddingAreaId] = useState<string | null>(null)

const handleBid = async (eventId: string, areaId: string) => {
    setBiddingAreaId(areaId)
    
    // Optimistic update
    mutateEvents((current) => {
      if (!current) return current
      return current.map(item => ({
        ...item,
        myBids: item.event.id === eventId ? [...item.myBids, areaId] : item.myBids
      }))
    }, false)
    
    const { error } = await supabase.from("bids").insert({
      event_id: eventId,
      area_id: areaId,
      user_id: userId,
    })
    
    if (error) {
      // Revert on error
      mutateEvents()
    } else {
      mutateEvents()
    }
    
    setBiddingAreaId(null)
  }

const handleRemoveBid = async (areaId: string) => {
    setBiddingAreaId(areaId)
    
    // Optimistic update
    mutateEvents((current) => {
      if (!current) return current
      return current.map(item => ({
        ...item,
        myBids: item.myBids.filter(id => id !== areaId)
      }))
    }, false)
    
    const { error } = await supabase.from("bids").delete().eq("user_id", userId).eq("area_id", areaId)
    
    if (error) {
      // Revert on error
      mutateEvents()
    } else {
      mutateEvents()
    }
    
    setBiddingAreaId(null)
  }

const formatDate = (dateStr: string) => {
    return new Date(dateStr + "T12:00:00").toLocaleDateString("da-DK", {
      weekday: "short",
      day: "numeric",
      month: "short",
    })
  }

const formatTime = (timeStr: string) => {
    if (timeStr.includes("T")) {
      return timeStr.split("T")[1].slice(0, 5)
    }
    return timeStr.slice(0, 5)
  }

const canBidOnArea = (area: Area): boolean => {
    if (!area.requires_18) return true
    return profile?.is_over_18 || false
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-foreground">Velkommen, {profile?.display_name}</h1>
        <p className="text-muted-foreground">Her er dit overblik over vagter og åbne arrangementer.</p>
      </div>

<div className="grid gap-6 lg:grid-cols-2">
        {/* My Shifts */}
        <Card className="border-border bg-card">
          <CardHeader className="border-b border-border">
            <CardTitle className="flex items-center gap-2 text-foreground">
              <Calendar className="h-5 w-5 text-primary" />
              Dine kommende vagter
            </CardTitle>
            <CardDescription>Vagter fra udgivne vagtplaner, hvor du står på listen</CardDescription>
          </CardHeader>
          <CardContent className="pt-6">
            {!myShifts?.length ? (
              <p className="text-sm text-muted-foreground py-8 text-center">Du har ingen kommende vagter.</p>
            ) : (
              <div className="space-y-3">
                {myShifts.map((item) => (
                  <div
                    key={item.shift.id}
                    className="flex items-start justify-between rounded-lg border border-border bg-secondary/50 p-4 hover:bg-secondary/70 transition-colors"
                  >
                    <div className="space-y-1">
                      <p className="font-medium text-foreground">{item.event.name}</p>
                      <div className="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
                        <span className="flex items-center gap-1">
                          <Calendar className="h-3.5 w-3.5" />
                          {formatDate(item.event.date)}
                        </span>
                        <span className="flex items-center gap-1">
                          <Clock className="h-3.5 w-3.5" />
                          {formatTime(item.shift.start_time)} - {formatTime(item.shift.end_time)}
                        </span>
                        {item.event.location && (
                          <span className="flex items-center gap-1">
                            <MapPin className="h-3.5 w-3.5" />
                            {item.event.location}
                          </span>
                        )}
                      </div>
                    </div>
                    <Badge variant="secondary" className="shrink-0 bg-primary/20 text-primary">
                      {item.area.name}
                    </Badge>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

{/* Open Events */}
        <Card className="border-border bg-card">
          <CardHeader className="border-b border-border">
            <CardTitle className="flex items-center gap-2 text-foreground">
              <Users className="h-5 w-5 text-accent" />
              Åbne arrangementer
            </CardTitle>
            <CardDescription>Byd ind på de områder, du gerne vil stå i</CardDescription>
          </CardHeader>
          <CardContent className="pt-6">
            {!openEvents?.length ? (
              <p className="text-sm text-muted-foreground py-8 text-center">Der er ingen åbne arrangementer lige nu.</p>
            ) : (
              <div className="space-y-4">
                {openEvents.map((item) => (
                  <div key={item.event.id} className="rounded-lg border border-border bg-secondary/50 p-4">
                    <div className="mb-3">
                      <p className="font-medium text-foreground">{item.event.name}</p>
                      <div className="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
                        <span className="flex items-center gap-1">
                          <Calendar className="h-3.5 w-3.5" />
                          {formatDate(item.event.date)}
                        </span>
                        <span className="flex items-center gap-1">
                          <Clock className="h-3.5 w-3.5" />
                          {item.event.start_time} - {item.event.end_time}
                        </span>
                        {item.event.location && (
                          <span className="flex items-center gap-1">
                            <MapPin className="h-3.5 w-3.5" />
                            {item.event.location}
                          </span>
                        )}
                      </div>
                    </div>
                    <div className="flex flex-wrap gap-2">
                      {item.areas.map((area) => {
                        const hasBid = item.myBids.includes(area.id)
                        const canBid = canBidOnArea(area)

if (!canBid) {
                          return (
                            <Button
                              key={area.id}
                              variant="outline"
                              size="sm"
                              disabled
                              className="opacity-60 cursor-not-allowed bg-transparent"
                              title="Kræver 18+"
                            >
                              <Lock className="mr-1.5 h-3.5 w-3.5" />
                              {area.name}
                              <Badge className="ml-1.5 bg-amber-500/20 text-amber-400 text-[10px]">18+</Badge>
                            </Button>
                          )
                        }

return (
          <Button
            key={area.id}
            variant={hasBid ? "default" : "outline"}
            size="sm"
            className={hasBid ? "bg-emerald-500 text-white hover:bg-emerald-600" : ""}
            onClick={() => (hasBid ? handleRemoveBid(area.id) : handleBid(item.event.id, area.id))}
            disabled={biddingAreaId === area.id}
          >
            {biddingAreaId === area.id ? (
              <div className="h-3.5 w-3.5 mr-1.5 animate-spin rounded-full border-2 border-current border-t-transparent" />
            ) : hasBid ? (
              <Check className="mr-1.5 h-3.5 w-3.5" />
            ) : null}
            {area.name}
            {area.requires_18 && (
              <Badge className="ml-1.5 bg-amber-500/20 text-amber-400 text-[10px]">18+</Badge>
            )}
          </Button>
        )
                      })}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/schedule/page.tsx" isMerged="true"
import { redirect } from "next/navigation"
import { createClient } from "@/lib/supabase/server"
import { Navbar } from "@/components/navbar"
import { ScheduleContent } from "@/components/schedule-content"
import type { Profile } from "@/lib/types"

export default async function SchedulePage() {
  const supabase = await createClient()
  const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    redirect("/auth/login")
  }

const { data: profile } = await supabase
    .from("profiles")
    .select("*")
    .eq("id", user.id)
    .single()

return (
    <div className="min-h-screen bg-background">
      <Navbar profile={profile as Profile | null} />
      <main className="mx-auto max-w-7xl px-4 py-6">
        <ScheduleContent userId={user.id} />
      </main>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@import "tailwindcss";

/* Added light mode colors */
:root {
  --background: oklch(0.98 0 0);
  --foreground: oklch(0.15 0.01 260);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0.01 260);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0.01 260);
  --primary: oklch(0.6 0.18 30);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.95 0.01 260);
  --secondary-foreground: oklch(0.15 0.01 260);
  --muted: oklch(0.95 0.01 260);
  --muted-foreground: oklch(0.45 0 0);
  --accent: oklch(0.55 0.2 350);
  --accent-foreground: oklch(0.98 0 0);
  --destructive: oklch(0.55 0.2 25);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.88 0.01 260);
  --input: oklch(0.88 0.01 260);
  --ring: oklch(0.6 0.18 30);
  --chart-1: oklch(0.6 0.18 30);
  --chart-2: oklch(0.55 0.2 350);
  --chart-3: oklch(0.55 0.15 150);
  --chart-4: oklch(0.5 0.2 280);
  --chart-5: oklch(0.45 0.2 200);
  --radius: 0.75rem;
  --sidebar: oklch(0.98 0.01 260);
  --sidebar-foreground: oklch(0.15 0.01 260);
  --sidebar-primary: oklch(0.6 0.18 30);
  --sidebar-primary-foreground: oklch(0.98 0 0);
  --sidebar-accent: oklch(0.95 0.01 260);
  --sidebar-accent-foreground: oklch(0.15 0.01 260);
  --sidebar-border: oklch(0.88 0.01 260);
  --sidebar-ring: oklch(0.6 0.18 30);
  --success: oklch(0.55 0.17 145);
  --warning: oklch(0.7 0.15 85);
}

/* Dark mode colors */
.dark {
  --background: oklch(0.13 0.01 260);
  --foreground: oklch(0.98 0 0);
  --card: oklch(0.16 0.01 260);
  --card-foreground: oklch(0.98 0 0);
  --popover: oklch(0.16 0.01 260);
  --popover-foreground: oklch(0.98 0 0);
  --primary: oklch(0.7 0.18 30);
  --primary-foreground: oklch(0.13 0.01 260);
  --secondary: oklch(0.22 0.01 260);
  --secondary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.22 0.01 260);
  --muted-foreground: oklch(0.65 0 0);
  --accent: oklch(0.65 0.2 350);
  --accent-foreground: oklch(0.98 0 0);
  --destructive: oklch(0.55 0.2 25);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.25 0.01 260);
  --input: oklch(0.25 0.01 260);
  --ring: oklch(0.7 0.18 30);
  --chart-1: oklch(0.7 0.18 30);
  --chart-2: oklch(0.65 0.2 350);
  --chart-3: oklch(0.65 0.15 150);
  --chart-4: oklch(0.6 0.2 280);
  --chart-5: oklch(0.55 0.2 200);
  --sidebar: oklch(0.16 0.01 260);
  --sidebar-foreground: oklch(0.98 0 0);
  --sidebar-primary: oklch(0.7 0.18 30);
  --sidebar-primary-foreground: oklch(0.13 0.01 260);
  --sidebar-accent: oklch(0.22 0.01 260);
  --sidebar-accent-foreground: oklch(0.98 0 0);
  --sidebar-border: oklch(0.25 0.01 260);
  --sidebar-ring: oklch(0.7 0.18 30);
  --success: oklch(0.65 0.17 145);
  --warning: oklch(0.8 0.15 85);
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-success: var(--success);
  --color-warning: var(--warning);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="components/smart-vagtplan.tsx" isMerged="true"
"use client"

import { useState } from "react"
import useSWR from "swr"
import { createBrowserClient } from "@/lib/supabase/client"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Calendar, ChevronLeft, ChevronRight, User, UserPlus, X, Edit, AlertTriangle, UserCog } from "lucide-react"
import type { Event, Area, Shift, ShiftAssignment, Profile } from "@/lib/types"

interface SmartVagtplanProps {
  userId: string
}

interface ShiftWithAssignments extends Shift {
  assignments: (ShiftAssignment & { profile: Profile })[]
}

interface AreaResponsible {
  id: string
  area_id: string
  user_id: string
  profile: Profile
}

interface AreaWithShifts extends Area {
  shifts: ShiftWithAssignments[]
  responsibles: AreaResponsible[]
}

interface EventSchedule {
  event: Event
  areas: AreaWithShifts[]
}

export function SmartVagtplan({ userId }: SmartVagtplanProps) {
  const supabase = createBrowserClient()
  const [selectedEventId, setSelectedEventId] = useState<string>("")
  const [selectedShift, setSelectedShift] = useState<ShiftWithAssignments | null>(null)
  const [selectedArea, setSelectedArea] = useState<Area | null>(null)
  const [searchQuery, setSearchQuery] = useState("")
  const [assigningUser, setAssigningUser] = useState(false)
  
  // New state for editing
  const [editingShift, setEditingShift] = useState<Shift | null>(null)
  const [editStartTime, setEditStartTime] = useState("")
  const [editEndTime, setEditEndTime] = useState("")
  const [editNeeded, setEditNeeded] = useState(1)
  
  // New state for adding area
  const [addingArea, setAddingArea] = useState(false)
  const [newAreaName, setNewAreaName] = useState("")
  const [newAreaRequires18, setNewAreaRequires18] = useState(false)

// State for managing area responsibles
  const [managingResponsibles, setManagingResponsibles] = useState<AreaWithShifts | null>(null)
  const [responsibleSearch, setResponsibleSearch] = useState("")

// Fetch all events
  const { data: events } = useSWR("admin-all-events", async () => {
    const { data } = await supabase
      .from("events")
      .select("*")
      .order("date", { ascending: false })
    return data || []
  })

// Fetch all profiles for assignment
  const { data: profiles } = useSWR("all-profiles-for-assignment", async () => {
    const { data } = await supabase
      .from("profiles")
      .select("*")
      .order("display_name")
    return data || []
  })

// Fetch bids for selected event
  const { data: eventBids } = useSWR(
    selectedEventId ? `event-bids-${selectedEventId}` : null,
    async () => {
      if (!selectedEventId) return []
      const { data } = await supabase
        .from("bids")
        .select("*, profile:profiles(*)")
        .eq("event_id", selectedEventId)
      return data || []
    }
  )

// Fetch schedule data for selected event
  const { data: schedule, mutate: mutateSchedule } = useSWR<EventSchedule | null>(
    selectedEventId ? `admin-schedule-${selectedEventId}` : null,
    async () => {
      if (!selectedEventId) return null

const { data: event } = await supabase
        .from("events")
        .select("*")
        .eq("id", selectedEventId)
        .single()

if (!event) return null

const { data: areas } = await supabase
        .from("areas")
        .select("*")
        .eq("event_id", selectedEventId)
        .order("name")

if (!areas) return { event, areas: [] }

const areaIds = areas.map(a => a.id)
      const { data: shifts } = await supabase
        .from("shifts")
        .select("*")
        .in("area_id", areaIds)
        .order("start_time")

const shiftIds = shifts?.map(s => s.id) || []
      const { data: assignments } = await supabase
        .from("shift_assignments")
        .select("*, profile:profiles(*)")
        .in("shift_id", shiftIds)

const { data: responsibles } = await supabase
        .from("area_responsibles")
        .select("*, profile:profiles(*)")
        .in("area_id", areaIds)

const areasWithShifts = areas.map(area => ({
        ...area,
        responsibles: (responsibles || []).filter(r => r.area_id === area.id) as AreaResponsible[],
        shifts: (shifts || [])
          .filter(s => s.area_id === area.id)
          .map(shift => ({
            ...shift,
            assignments: (assignments || []).filter(a => a.shift_id === shift.id)
          }))
      }))

return { event, areas: areasWithShifts }
    }
  )

const formatTime = (timeStr: string) => {
    if (timeStr.includes("T")) {
      return timeStr.split("T")[1].slice(0, 5)
    }
    return timeStr.slice(0, 5)
  }

const formatDate = (dateStr: string) => {
    return new Date(dateStr + "T12:00:00").toLocaleDateString("da-DK", {
      weekday: "long",
      day: "numeric",
      month: "long"
    })
  }

// Generate time slots from all shifts
  const getTimeSlots = () => {
    if (!schedule) return []
    const slots = new Set<string>()
    schedule.areas.forEach(area => {
      area.shifts.forEach(shift => {
        slots.add(`${formatTime(shift.start_time)}-${formatTime(shift.end_time)}`)
      })
    })
    return Array.from(slots).sort()
  }

const timeSlots = getTimeSlots()

// Check if a profile has a conflicting shift assignment in the same time range
  const getShiftConflicts = (profileId: string, shift: ShiftWithAssignments): string[] => {
    if (!schedule) return []
    const conflicts: string[] = []
    const shiftStart = shift.start_time
    const shiftEnd = shift.end_time

schedule.areas.forEach(area => {
      area.shifts.forEach(otherShift => {
        if (otherShift.id === shift.id) return
        const hasAssignment = otherShift.assignments.some(a => a.user_id === profileId)
        if (!hasAssignment) return
        // Check overlap
        const otherStart = otherShift.start_time
        const otherEnd = otherShift.end_time
        const overlaps = shiftStart < otherEnd && shiftEnd > otherStart
        if (overlaps) {
          conflicts.push(`${area.name} (${formatTime(otherStart)}–${formatTime(otherEnd)})`)
        }
      })
    })
    return conflicts
  }

// Check if profile is not 18+ but area requires it
  const getAgeWarning = (profileId: string): boolean => {
    if (!selectedArea?.requires_18) return false
    const profile = profiles?.find(p => p.id === profileId)
    return profile ? !profile.is_over_18 : false
  }

const handleAssignUser = async (profileId: string) => {
    if (!selectedShift) return

setAssigningUser(true)
    const { error, data } = await supabase.from("shift_assignments").insert({
      shift_id: selectedShift.id,
      user_id: profileId
    }).select("*, profile:profiles(*)")

if (!error && data) {
      // Update selectedShift locally so the dialog reflects the new assignment immediately
      setSelectedShift(prev => {
        if (!prev) return prev
        return {
          ...prev,
          assignments: [...prev.assignments, data[0] as any]
        }
      })
      mutateSchedule()
    }
    setAssigningUser(false)
  }

const handleRemoveAssignment = async (assignmentId: string) => {
    await supabase.from("shift_assignments").delete().eq("id", assignmentId)
    mutateSchedule()
  }

const handleAddResponsible = async (profileId: string) => {
    if (!managingResponsibles) return
    const already = managingResponsibles.responsibles.some(r => r.user_id === profileId)
    if (already) return
    const { error } = await supabase.from("area_responsibles").insert({
      area_id: managingResponsibles.id,
      user_id: profileId
    })
    if (!error) {
      mutateSchedule()
      // Update local state optimistically
      const profile = profiles?.find(p => p.id === profileId)
      if (profile) {
        setManagingResponsibles(prev => prev ? {
          ...prev,
          responsibles: [...prev.responsibles, { id: crypto.randomUUID(), area_id: prev.id, user_id: profileId, profile }]
        } : prev)
      }
    }
  }

const handleRemoveResponsible = async (responsibleId: string) => {
    if (!managingResponsibles) return
    await supabase.from("area_responsibles").delete().eq("id", responsibleId)
    mutateSchedule()
    setManagingResponsibles(prev => prev ? {
      ...prev,
      responsibles: prev.responsibles.filter(r => r.id !== responsibleId)
    } : prev)
  }

const handleUpdateShift = async () => {
    if (!editingShift) return

await supabase
      .from("shifts")
      .update({
        start_time: editStartTime,
        end_time: editEndTime,
        needed: editNeeded
      })
      .eq("id", editingShift.id)

mutateSchedule()
    setEditingShift(null)
  }

const handleAddArea = async () => {
    if (!newAreaName || !selectedEventId) return

await supabase.from("areas").insert({
      name: newAreaName,
      event_id: selectedEventId,
      requires_18: newAreaRequires18,
      created_by: userId
    })

mutateSchedule()
    setAddingArea(false)
    setNewAreaName("")
    setNewAreaRequires18(false)
  }

const getBidsForArea = (areaId: string) => {
    return eventBids?.filter(bid => bid.area_id === areaId) || []
  }

const filteredProfiles = profiles?.filter(p =>
    p.display_name.toLowerCase().includes(searchQuery.toLowerCase())
  ) || []

const areaColors = [
    "bg-purple-500/20 border-purple-500",
    "bg-emerald-500/20 border-emerald-500",
    "bg-orange-500/20 border-orange-500",
    "bg-pink-500/20 border-pink-500",
    "bg-blue-500/20 border-blue-500",
    "bg-amber-500/20 border-amber-500",
  ]

if (events?.length && !selectedEventId) {
    setSelectedEventId(events[0].id)
  }

return (
    <div className="space-y-6">
      <Card className="border-border bg-card">
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2">
                <Calendar className="h-5 w-5" />
                SmartVagtplan
              </CardTitle>
              <CardDescription>Administrer og rediger vagtplaner på en overskuelig måde</CardDescription>
            </div>
            <Select value={selectedEventId} onValueChange={setSelectedEventId}>
              <SelectTrigger className="w-64 bg-secondary border-border">
                <SelectValue placeholder="Vælg arrangement" />
              </SelectTrigger>
              <SelectContent>
                {events?.map(event => (
                  <SelectItem key={event.id} value={event.id}>
                    {event.name} - {event.date}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </CardHeader>
      </Card>

{schedule && (
        <Card className="border-border bg-card">
          <CardHeader className="border-b border-border">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-lg font-semibold">{schedule.event.name}</h3>
                <p className="text-sm text-muted-foreground">{formatDate(schedule.event.date)}</p>
              </div>
              <div className="flex items-center gap-3">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setAddingArea(true)}
                >
                  <UserPlus className="h-4 w-4 mr-2" />
                  Tilføj Område
                </Button>
                <Badge className={
                  schedule.event.status === "published" ? "bg-green-500/20 text-green-500" :
                  schedule.event.status === "open" ? "bg-blue-500/20 text-blue-500" :
                  "bg-gray-500/20 text-gray-500"
                }>
                  {schedule.event.status === "published" ? "Udgivet" :
                   schedule.event.status === "open" ? "Åben" : "Lukket"}
                </Badge>
              </div>
            </div>
          </CardHeader>
          <CardContent className="p-0">
            {!schedule.areas.length ? (
              <div className="py-12 text-center text-muted-foreground">
                Ingen områder oprettet endnu
              </div>
            ) : (
              <div className="overflow-x-auto">
                <div className="min-w-[1000px]">
                  {/* Header row with time slots */}
                  <div 
                    className="grid border-b border-border bg-secondary/30"
                    style={{ gridTemplateColumns: `240px repeat(${timeSlots.length}, minmax(160px, 1fr))` }}
                  >
                    <div className="p-4 font-semibold">
                      Område
                    </div>
                    {timeSlots.map(slot => (
                      <div key={slot} className="border-l border-border p-4 text-center font-semibold">
                        {slot}
                      </div>
                    ))}
                  </div>

{/* Area rows */}
                  {schedule.areas.map((area, areaIdx) => (
                    <div
                      key={area.id}
                      className="grid border-b border-border hover:bg-secondary/20 transition-colors"
                      style={{ gridTemplateColumns: `240px repeat(${timeSlots.length}, minmax(160px, 1fr))` }}
                    >
                      {/* Area name column */}
                      <div className={`p-4 border-l-4 ${areaColors[areaIdx % areaColors.length]}`}>
                        <div className="flex items-start justify-between gap-1">
                          <p className="font-medium leading-tight">{area.name}</p>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-6 w-6 p-0 shrink-0 text-muted-foreground hover:text-foreground"
                            onClick={() => { setManagingResponsibles(area); setResponsibleSearch("") }}
                            title="Administrer ansvarlige"
                          >
                            <UserCog className="h-3.5 w-3.5" />
                          </Button>
                        </div>
                        <p className="text-xs text-muted-foreground mt-1">
                          {area.shifts.reduce((sum, s) => sum + s.needed, 0)} vagter
                        </p>
                        {area.responsibles.length > 0 && (
                          <div className="flex flex-wrap gap-1 mt-2">
                            {area.responsibles.map(r => (
                              <div key={r.id} className="flex items-center gap-1">
                                <Avatar className="h-5 w-5">
                                  <AvatarImage src={r.profile?.avatar_url || undefined} />
                                  <AvatarFallback className="text-[10px]">
                                    {r.profile?.display_name?.substring(0, 2).toUpperCase()}
                                  </AvatarFallback>
                                </Avatar>
                                <span className="text-xs text-muted-foreground">{r.profile?.display_name?.split(" ")[0]}</span>
                              </div>
                            ))}
                          </div>
                        )}
                        {getBidsForArea(area.id).length > 0 && (
                          <Badge variant="outline" className="mt-2 text-xs bg-blue-500/10 text-blue-500">
                            {getBidsForArea(area.id).length} bud
                          </Badge>
                        )}
                      </div>

return (
                          <div key={slot} className="border-l border-border p-2">
                            {shift ? (
                              <div className="space-y-2">
                                {/* Edit shift button */}
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  className="w-full h-6 text-xs gap-1"
                                  onClick={() => {
                                    setEditingShift(shift)
                                    setEditStartTime(shift.start_time)
                                    setEditEndTime(shift.end_time)
                                    setEditNeeded(shift.needed)
                                  }}
                                >
                                  <Edit className="h-3 w-3" />
                                  Rediger
                                </Button>
                                
                                {/* Assigned users */}
                                {shift.assignments.map(assignment => (
                                  <div
                                    key={assignment.id}
                                    className="flex items-center justify-between gap-2 rounded-md border border-border bg-secondary/50 px-2 py-1.5 group hover:bg-secondary"
                                  >
                                    <div className="flex items-center gap-2 min-w-0">
                                      <Avatar className="h-6 w-6">
                                        <AvatarImage src={assignment.profile?.avatar_url || undefined} />
                                        <AvatarFallback className="text-xs">
                                          {assignment.profile?.display_name.substring(0, 2).toUpperCase()}
                                        </AvatarFallback>
                                      </Avatar>
                                      <span className="text-xs font-medium truncate">
                                        {assignment.profile?.display_name}
                                      </span>
                                    </div>
                                    <Button
                                      variant="ghost"
                                      size="icon"
                                      className="h-5 w-5 opacity-0 group-hover:opacity-100"
                                      onClick={() => handleRemoveAssignment(assignment.id)}
                                    >
                                      <X className="h-3 w-3" />
                                    </Button>
                                  </div>
                                ))}

{/* Add user button */}
                                {shift.assignments.length < shift.needed && (
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    className="w-full h-8 text-xs"
                                    onClick={() => {
                                      setSelectedShift(shift)
                                      setSelectedArea(area)
                                    }}
                                  >
                                    <UserPlus className="h-3 w-3 mr-1" />
                                    Tildel ({shift.assignments.length}/{shift.needed})
                                  </Button>
                                )}

{/* Fully staffed indicator */}
                                {shift.assignments.length >= shift.needed && (
                                  <div className="text-center text-xs text-green-500 font-medium">
                                    ✓ Fuld
                                  </div>
                                )}
                              </div>
                            ) : (
                              <div className="flex items-center justify-center h-full text-xs text-muted-foreground">
                                -
                              </div>
                            )}
                          </div>
                        )
                      })}
                    </div>
                  ))}
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      )}

{/* Assignment Dialog */}
      <Dialog open={!!selectedShift} onOpenChange={(open) => !open && setSelectedShift(null)}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Tildel person til vagt</DialogTitle>
            <CardDescription>
              {selectedArea?.name} • {selectedShift && `${formatTime(selectedShift.start_time)} - ${formatTime(selectedShift.end_time)}`}
            </CardDescription>
          </DialogHeader>
          <div className="space-y-4">
            {/* Show bids for this area */}
            {selectedArea && getBidsForArea(selectedArea.id).length > 0 && (
              <div className="rounded-lg border border-border bg-blue-500/5 p-3">
                <p className="text-sm font-medium mb-2 flex items-center gap-2">
                  <User className="h-4 w-4" />
                  Personer der har budt på {selectedArea.name}:
                </p>
                <div className="space-y-1">
                  {getBidsForArea(selectedArea.id).map(bid => {
                    const isAssigned = selectedShift?.assignments.some(a => a.user_id === bid.user_id)
                    const ageWarning = !isAssigned && getAgeWarning(bid.user_id)
                    const conflicts = !isAssigned && selectedShift ? getShiftConflicts(bid.user_id, selectedShift) : []
                    return (
                      <div key={bid.id} className={`flex flex-col gap-1 rounded p-1.5 ${(ageWarning || conflicts.length > 0) ? "bg-amber-500/10" : ""}`}>
                        <div className="flex items-center gap-2 text-sm">
                          <Avatar className="h-6 w-6">
                            <AvatarImage src={bid.profile?.avatar_url || undefined} />
                            <AvatarFallback className="text-xs">
                              {bid.profile?.display_name.substring(0, 2).toUpperCase()}
                            </AvatarFallback>
                          </Avatar>
                          <span className="flex-1">{bid.profile?.display_name}</span>
                          {isAssigned ? (
                            <Badge className="bg-green-500/20 text-green-500 text-xs">Tildelt</Badge>
                          ) : (
                            <Button
                              size="sm"
                              className="h-7 text-xs"
                              onClick={() => handleAssignUser(bid.user_id)}
                              disabled={assigningUser}
                            >
                              Tildel
                            </Button>
                          )}
                        </div>
                        {ageWarning && (
                          <div className="flex items-center gap-1 text-xs text-amber-600 pl-8">
                            <AlertTriangle className="h-3 w-3 shrink-0" />
                            <span>Ikke 18+ — området kræver det</span>
                          </div>
                        )}
                        {conflicts.length > 0 && (
                          <div className="flex items-center gap-1 text-xs text-amber-600 pl-8">
                            <AlertTriangle className="h-3 w-3 shrink-0" />
                            <span>Konflikt: {conflicts.join(", ")}</span>
                          </div>
                        )}
                      </div>
                    )
                  })}
                </div>
              </div>
            )}
            
            <div>
              <Label>Søg efter person</Label>
              <Input
                placeholder="Indtast navn..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="mt-1.5"
              />
            </div>
            <div className="max-h-80 overflow-y-auto space-y-2">
              {filteredProfiles.length === 0 ? (
                <p className="text-sm text-muted-foreground text-center py-8">
                  Ingen personer fundet
                </p>
              ) : (
                filteredProfiles.map(profile => {
                  const isAssigned = selectedShift?.assignments.some(a => a.user_id === profile.id)
                  const ageWarning = !isAssigned && getAgeWarning(profile.id)
                  const conflicts = !isAssigned && selectedShift ? getShiftConflicts(profile.id, selectedShift) : []
                  const hasWarnings = ageWarning || conflicts.length > 0

return (
                    <div
                      key={profile.id}
                      className={`w-full flex flex-col gap-2 p-3 rounded-lg border transition-colors ${
                        isAssigned
                          ? "border-green-500 bg-green-500/10"
                          : hasWarnings
                          ? "border-amber-500/50 bg-amber-500/5"
                          : "border-border bg-secondary/50"
                      }`}
                    >
                      <div className="flex items-center gap-3">
                        <Avatar className="h-10 w-10">
                          <AvatarImage src={profile.avatar_url || undefined} />
                          <AvatarFallback>
                            {profile.display_name.substring(0, 2).toUpperCase()}
                          </AvatarFallback>
                        </Avatar>
                        <div className="flex-1 text-left">
                          <p className="font-medium">{profile.display_name}</p>
                          <div className="flex items-center gap-2 mt-1">
                            <Badge variant="outline" className="text-xs">
                              {profile.role}
                            </Badge>
                            {profile.is_over_18 && (
                              <Badge className="bg-emerald-500/20 text-emerald-500 text-xs">18+</Badge>
                            )}
                          </div>
                        </div>
                        {isAssigned ? (
                          <Badge className="bg-green-500/20 text-green-500">Tildelt</Badge>
                        ) : (
                          <Button
                            size="sm"
                            onClick={() => handleAssignUser(profile.id)}
                            disabled={assigningUser}
                          >
                            Tildel
                          </Button>
                        )}
                      </div>
                      {ageWarning && (
                        <div className="flex items-center gap-1.5 text-xs text-amber-600 bg-amber-500/10 rounded px-2 py-1">
                          <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
                          <span>Personen er ikke registreret som 18+ men området kræver det</span>
                        </div>
                      )}
                      {conflicts.length > 0 && (
                        <div className="flex items-start gap-1.5 text-xs text-amber-600 bg-amber-500/10 rounded px-2 py-1">
                          <AlertTriangle className="h-3.5 w-3.5 shrink-0 mt-0.5" />
                          <span>Vagtkonflikt med: {conflicts.join(", ")}</span>
                        </div>
                      )}
                    </div>
                  )
                })
              )}
            </div>
          </div>
        </DialogContent>
      </Dialog>

{/* Edit Shift Dialog */}
      <Dialog open={!!editingShift} onOpenChange={(open) => !open && setEditingShift(null)}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Rediger Tidspunkt</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label>Start Tid</Label>
              <Input
                type="time"
                value={editStartTime}
                onChange={(e) => setEditStartTime(e.target.value)}
                className="mt-1.5"
              />
            </div>
            <div>
              <Label>Slut Tid</Label>
              <Input
                type="time"
                value={editEndTime}
                onChange={(e) => setEditEndTime(e.target.value)}
                className="mt-1.5"
              />
            </div>
            <div>
              <Label>Antal personer behøvet</Label>
              <Input
                type="number"
                min="1"
                value={editNeeded}
                onChange={(e) => setEditNeeded(parseInt(e.target.value) || 1)}
                className="mt-1.5"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setEditingShift(null)}>
              Annuller
            </Button>
            <Button onClick={handleUpdateShift}>
              Gem Ændringer
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Add Area Dialog */}
      <Dialog open={addingArea} onOpenChange={setAddingArea}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Tilføj Nyt Område</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label>Område Navn</Label>
              <Input
                placeholder="F.eks. Bar, Garderobe, Sceneopbygning..."
                value={newAreaName}
                onChange={(e) => setNewAreaName(e.target.value)}
                className="mt-1.5"
              />
            </div>
            <div className="flex items-center gap-2">
              <input
                type="checkbox"
                id="requires18"
                checked={newAreaRequires18}
                onChange={(e) => setNewAreaRequires18(e.target.checked)}
                className="rounded"
              />
              <Label htmlFor="requires18" className="cursor-pointer">
                Kræver 18+
              </Label>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setAddingArea(false)}>
              Annuller
            </Button>
            <Button onClick={handleAddArea}>
              Tilføj Område
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Manage Area Responsibles Dialog */}
      <Dialog open={!!managingResponsibles} onOpenChange={(open) => { if (!open) { setManagingResponsibles(null); setResponsibleSearch("") } }}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <UserCog className="h-5 w-5" />
              Ansvarlige for {managingResponsibles?.name}
            </DialogTitle>
          </DialogHeader>

<div className="space-y-4">
            {/* Current responsibles */}
            <div>
              <p className="text-sm font-medium mb-2">Nuværende ansvarlige</p>
              {managingResponsibles && managingResponsibles.responsibles.length === 0 ? (
                <p className="text-sm text-muted-foreground py-2">Ingen ansvarlige tildelt endnu</p>
              ) : (
                <div className="space-y-2">
                  {managingResponsibles?.responsibles.map(resp => (
                    <div key={resp.id} className="flex items-center gap-3 p-2 rounded-lg border border-border bg-secondary/30">
                      <Avatar className="h-8 w-8">
                        <AvatarImage src={resp.profile?.avatar_url || undefined} />
                        <AvatarFallback className="text-xs">
                          {resp.profile?.display_name?.substring(0, 2).toUpperCase()}
                        </AvatarFallback>
                      </Avatar>
                      <div className="flex-1">
                        <p className="text-sm font-medium">{resp.profile?.display_name}</p>
                        <p className="text-xs text-muted-foreground">{resp.profile?.role}</p>
                      </div>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="h-7 w-7 p-0 text-muted-foreground hover:text-destructive"
                        onClick={() => handleRemoveResponsible(resp.id)}
                      >
                        <X className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              )}
            </div>

{/* Search and add */}
            <div>
              <p className="text-sm font-medium mb-2">Tilføj ansvarlig</p>
              <Input
                placeholder="Søg efter person..."
                value={responsibleSearch}
                onChange={(e) => setResponsibleSearch(e.target.value)}
                className="mb-2"
              />
              <div className="max-h-48 overflow-y-auto space-y-1">
                {(profiles || [])
                  .filter(p =>
                    p.display_name.toLowerCase().includes(responsibleSearch.toLowerCase()) &&
                    !managingResponsibles?.responsibles.some(r => r.user_id === p.id)
                  )
                  .slice(0, 8)
                  .map(profile => (
                    <div key={profile.id} className="flex items-center gap-3 p-2 rounded-lg border border-border hover:bg-secondary/50 transition-colors">
                      <Avatar className="h-7 w-7">
                        <AvatarImage src={profile.avatar_url || undefined} />
                        <AvatarFallback className="text-xs">
                          {profile.display_name.substring(0, 2).toUpperCase()}
                        </AvatarFallback>
                      </Avatar>
                      <span className="flex-1 text-sm">{profile.display_name}</span>
                      <Badge variant="outline" className="text-xs mr-1">{profile.role}</Badge>
                      <Button
                        size="sm"
                        className="h-7 text-xs"
                        onClick={() => handleAddResponsible(profile.id)}
                      >
                        Tilføj
                      </Button>
                    </div>
                  ))}
              </div>
            </div>
          </div>

<DialogFooter>
            <Button variant="outline" onClick={() => { setManagingResponsibles(null); setResponsibleSearch("") }}>
              Luk
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/schedule-content.tsx" isMerged="true"
"use client"

import { createClient } from "@/lib/supabase/client"
import { Card, CardContent } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import type { Event, Area, Shift, ShiftAssignment, Profile, AreaResponsible } from "@/lib/types"
import { Calendar, Clock, MapPin, User } from "lucide-react"
import useSWR from "swr"
import { useState } from "react"

interface ScheduleContentProps {
  userId: string
}

interface ScheduleData {
  event: Event
  areas: (Area & {
    responsibles: (AreaResponsible & { profile: Profile })[]
    shifts: (Shift & {
      assignments: (ShiftAssignment & { profile: Profile })[]
    })[]
  })[]
}

const areaColors = [
  "border-purple-500",
  "border-emerald-500",
  "border-orange-500",
  "border-pink-500",
  "border-blue-500",
  "border-amber-500",
]

export function ScheduleContent({ userId }: ScheduleContentProps) {
  const supabase = createClient()
  const [selectedEventId, setSelectedEventId] = useState<string>("")
  const [selectedProfile, setSelectedProfile] = useState<Profile | null>(null)

const { data: userGroups } = useSWR("user-groups-for-events", async () => {
    const { data } = await supabase.from("user_groups").select("group_id").eq("user_id", userId)
    return data?.map(ug => ug.group_id) || []
  })

const { data: events } = useSWR<Event[]>(
    userGroups !== undefined ? "published-events" : null,
    async () => {
      const { data } = await supabase
        .from("events")
        .select("*")
        .eq("status", "published")
        .order("date", { ascending: true })
      if (!data) return []
      return data.filter(event => {
        if (event.visible_to_all === true) return true
        if (event.visible_to_all === false) {
          return event.group_id && userGroups?.includes(event.group_id)
        }
        return true
      })
    }
  )

const { data: scheduleData } = useSWR<ScheduleData | null>(
    selectedEventId ? `schedule-${selectedEventId}` : null,
    async () => {
      if (!selectedEventId) return null
      const { data: event } = await supabase.from("events").select("*").eq("id", selectedEventId).single()
      if (!event) return null
      const { data: areas } = await supabase.from("areas").select("*").eq("event_id", selectedEventId)
      if (!areas) return { event, areas: [] }
      const areaIds = areas.map(a => a.id)
      const { data: areaResponsibles } = await supabase
        .from("area_responsibles")
        .select("*, profile:profiles(*)")
        .in("area_id", areaIds)
      const { data: shifts } = await supabase.from("shifts").select("*").in("area_id", areaIds)
      const shiftIds = shifts?.map(s => s.id) || []
      const { data: assignments } = await supabase
        .from("shift_assignments")
        .select("*, profile:profiles(*)")
        .in("shift_id", shiftIds)
      const areasWithShifts = areas.map(area => ({
        ...area,
        responsibles: (areaResponsibles || []).filter(r => r.area_id === area.id),
        shifts: (shifts || [])
          .filter(s => s.area_id === area.id)
          .map(shift => ({
            ...shift,
            assignments: (assignments || []).filter(a => a.shift_id === shift.id),
          }))
          .sort((a, b) => a.start_time.localeCompare(b.start_time)),
      }))
      return { event, areas: areasWithShifts }
    }
  )

if (events?.length && !selectedEventId) {
    setSelectedEventId(events[0].id)
  }

const formatDate = (dateStr: string) => {
    return new Date(dateStr + "T12:00:00").toLocaleDateString("da-DK", {
      weekday: "long",
      day: "numeric",
      month: "long",
      year: "numeric",
    })
  }

const formatTime = (timeStr: string) => {
    if (timeStr.includes("T")) return timeStr.split("T")[1].slice(0, 5)
    return timeStr.slice(0, 5)
  }

const getTimeSlots = () => {
    if (!scheduleData) return []
    const slots = new Set<string>()
    scheduleData.areas.forEach(area => {
      area.shifts.forEach(shift => {
        slots.add(`${formatTime(shift.start_time)}-${formatTime(shift.end_time)}`)
      })
    })
    return Array.from(slots).sort()
  }

const timeSlots = getTimeSlots()

const getRoleLabel = (role: string) => {
    switch (role) {
      case "admin": return "Admin"
      case "formand": return "Formand"
      case "area_manager": return "Områdeansvarlig"
      default: return "Medlem"
    }
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground">Vagtplan</h1>
          <p className="text-muted-foreground">Se de udgivne vagtplaner med tidsrum og områder</p>
        </div>
        <Select value={selectedEventId} onValueChange={setSelectedEventId}>
          <SelectTrigger className="w-full bg-secondary border-border sm:w-64">
            <SelectValue placeholder="Vælg arrangement" />
          </SelectTrigger>
          <SelectContent>
            {events?.map(event => (
              <SelectItem key={event.id} value={event.id}>
                {event.name} ({event.date})
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

{/* Event info bar */}
      {scheduleData && (
        <>
          <Card className="border-border bg-card">
            <CardContent className="flex flex-wrap items-center gap-4 py-4">
              <div className="flex items-center gap-2">
                <Calendar className="h-4 w-4 text-muted-foreground" />
                <span className="text-sm">{formatDate(scheduleData.event.date)}</span>
              </div>
              <div className="flex items-center gap-2">
                <Clock className="h-4 w-4 text-muted-foreground" />
                <span className="text-sm">
                  {scheduleData.event.start_time} - {scheduleData.event.end_time}
                </span>
              </div>
              {scheduleData.event.location && (
                <div className="flex items-center gap-2">
                  <MapPin className="h-4 w-4 text-muted-foreground" />
                  <span className="text-sm">{scheduleData.event.location}</span>
                </div>
              )}
              <Badge className="bg-[var(--success)]/20 text-[var(--success)]">Udgivet</Badge>
            </CardContent>
          </Card>

{/* Schedule grid */}
          {!scheduleData.areas.length ? (
            <Card className="border-border bg-card">
              <CardContent className="py-8 text-center text-muted-foreground">
                Der er ingen områder eller vagter oprettet for dette arrangement.
              </CardContent>
            </Card>
          ) : (
            <div className="overflow-x-auto rounded-xl border border-border bg-card">
              <div className="min-w-[1000px]">

{/* Header row */}
                <div
                  className="grid border-b border-border bg-secondary/30"
                  style={{ gridTemplateColumns: `240px repeat(${timeSlots.length}, minmax(160px, 1fr))` }}
                >
                  <div className="p-4 font-semibold">Område</div>
                  {timeSlots.map(slot => (
                    <div key={slot} className="border-l border-border p-4 text-center font-semibold">
                      {slot}
                    </div>
                  ))}
                </div>

{/* Area rows */}
                {scheduleData.areas.map((area, areaIdx) => (
                  <div
                    key={area.id}
                    className="grid border-b border-border last:border-b-0 hover:bg-secondary/20 transition-colors"
                    style={{ gridTemplateColumns: `240px repeat(${timeSlots.length}, minmax(160px, 1fr))` }}
                  >
                    {/* Area name column */}
                    <div className={`p-4 border-l-4 ${areaColors[areaIdx % areaColors.length]}`}>
                      <p className="font-medium leading-tight">{area.name}</p>
                      <p className="text-xs text-muted-foreground mt-1">
                        {area.shifts.reduce((sum, s) => sum + s.needed, 0)} vagter
                      </p>
                      {area.responsibles.length > 0 && (
                        <div className="flex flex-wrap gap-1 mt-2">
                          {area.responsibles.map(r => (
                            <div key={r.id} className="flex items-center gap-1">
                              <Avatar className="h-5 w-5">
                                <AvatarImage src={r.profile?.avatar_url || undefined} />
                                <AvatarFallback className="text-[10px]">
                                  {r.profile?.display_name?.substring(0, 2).toUpperCase()}
                                </AvatarFallback>
                              </Avatar>
                              <span className="text-xs text-muted-foreground">
                                {r.profile?.display_name?.split(" ")[0]}
                              </span>
                            </div>
                          ))}
                        </div>
                      )}
                      {area.requires_18 && (
                        <Badge variant="outline" className="mt-2 text-[10px] bg-amber-500/10 text-amber-500 border-amber-500/30">
                          18+
                        </Badge>
                      )}
                    </div>

{/* Time slot columns */}
                    {timeSlots.map(slot => {
                      const [startTime, endTime] = slot.split("-")
                      const shift = area.shifts.find(
                        s => formatTime(s.start_time) === startTime && formatTime(s.end_time) === endTime
                      )
                      return (
                        <div key={slot} className="border-l border-border p-2">
                          {shift ? (
                            <div className="space-y-1.5">
                              {/* Assigned users */}
                              {shift.assignments.map(assignment => {
                                const isMe = assignment.user_id === userId
                                return (
                                  <button
                                    key={assignment.id}
                                    onClick={() => setSelectedProfile(assignment.profile || null)}
                                    className={`w-full flex items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs transition-colors hover:opacity-80 ${
                                      isMe
                                        ? "border-[var(--success)] bg-[var(--success)]/20 font-medium text-[var(--success)]"
                                        : "border-border bg-secondary/50 hover:bg-secondary"
                                    }`}
                                  >
                                    <Avatar className="h-5 w-5 shrink-0">
                                      <AvatarImage src={assignment.profile?.avatar_url || undefined} />
                                      <AvatarFallback className="text-[9px]">
                                        {assignment.profile?.display_name?.substring(0, 2).toUpperCase()}
                                      </AvatarFallback>
                                    </Avatar>
                                    <span className="truncate">{assignment.profile?.display_name}</span>
                                  </button>
                                )
                              })}
                              {/* Empty slots */}
                              {shift.assignments.length < shift.needed && (
                                <div className="flex items-center justify-center rounded-md border border-dashed border-border px-2 py-1.5 text-[10px] text-muted-foreground">
                                  +{shift.needed - shift.assignments.length} mangler
                                </div>
                              )}
                            </div>
                          ) : (
                            <div className="flex h-full min-h-[32px] items-center justify-center text-xs text-muted-foreground">
                              —
                            </div>
                          )}
                        </div>
                      )
                    })}
                  </div>
                ))}
              </div>
            </div>
          )}
        </>
      )}

{!events?.length && (
        <Card className="border-border bg-card">
          <CardContent className="py-8 text-center text-muted-foreground">
            Der er ingen udgivne vagtplaner endnu.
          </CardContent>
        </Card>
      )}

{/* Profile dialog */}
      <Dialog open={!!selectedProfile} onOpenChange={(open) => !open && setSelectedProfile(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Profil</DialogTitle>
          </DialogHeader>
          {selectedProfile && (
            <div className="space-y-4">
              <div className="flex items-center gap-4">
                <Avatar className="h-16 w-16">
                  <AvatarImage src={selectedProfile.avatar_url || undefined} />
                  <AvatarFallback className="bg-primary/20 text-primary text-lg">
                    {selectedProfile.display_name?.charAt(0).toUpperCase()}
                  </AvatarFallback>
                </Avatar>
                <div>
                  <p className="text-lg font-medium text-foreground">{selectedProfile.display_name}</p>
                  <div className="flex items-center gap-2 mt-1">
                    <Badge variant="secondary">{getRoleLabel(selectedProfile.role)}</Badge>
                    {selectedProfile.is_over_18 && (
                      <Badge className="bg-emerald-500/20 text-emerald-400">18+</Badge>
                    )}
                  </div>
                </div>
              </div>
              {(selectedProfile.class_name || selectedProfile.phone || selectedProfile.bio) && (
                <div className="space-y-2 rounded-lg border border-border bg-secondary/50 p-4">
                  {selectedProfile.class_name && (
                    <div className="flex items-center gap-2 text-sm">
                      <User className="h-4 w-4 text-muted-foreground" />
                      <span className="text-muted-foreground">Klasse:</span>
                      <span>{selectedProfile.class_name}</span>
                    </div>
                  )}
                  {selectedProfile.phone && (
                    <div className="flex items-center gap-2 text-sm">
                      <span className="text-muted-foreground">Telefon:</span>
                      <span>{selectedProfile.phone}</span>
                    </div>
                  )}
                  {selectedProfile.bio && (
                    <div className="text-sm">
                      <span className="text-muted-foreground">Om:</span>
                      <p className="mt-1">{selectedProfile.bio}</p>
                    </div>
                  )}
                </div>
              )}
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/vouchers-tab.tsx" isMerged="true"
"use client"

import { useState } from "react"
import useSWR from "swr"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Checkbox } from "@/components/ui/checkbox"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Gift, Printer, Trash2, Plus, Palette, Scissors, BarChart3, User, Calendar, TrendingUp, ChevronLeft, ChevronRight } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"
import { VoucherPrint } from "./voucher-print"
import type { Profile, Voucher, VoucherTemplate, VoucherRedemption } from "@/lib/types"
import { ConfirmDialog } from "./confirm-dialog"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { VoucherDesigner } from "./voucher-designer"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

interface VouchersTabProps {
  currentUser: Profile
}

interface VoucherWithCreator extends Voucher {
  creator?: Profile
}

interface RedemptionWithDetails extends VoucherRedemption {
  profile?: Profile
  voucher?: Voucher
}

export function VouchersTab({ currentUser }: VouchersTabProps) {
  const supabase = createBrowserClient()
  const [selectedVouchers, setSelectedVouchers] = useState<Set<string>>(new Set())
  const [printLayout, setPrintLayout] = useState<"full" | "mini" | "cutout" | "quad">("quad")
  const [showPrintPreview, setShowPrintPreview] = useState(false)
  const [editingVoucher, setEditingVoucher] = useState<Voucher | null>(null)
  const [showDesigner, setShowDesigner] = useState(false)
  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null)
  const [showSaveTemplate, setShowSaveTemplate] = useState(false)
  const [templateName, setTemplateName] = useState("")
  const [designingVoucher, setDesigningVoucher] = useState<any>({
    type: "drink",
    title: "",
    description: "",
    quantity: 1,
    expiresAt: "",
    background_color: "#ffffff",
    text_color: "#000000",
    border_color: "#000000",
    font_size: "24",
  })

const [designDialogOpen, setDesignDialogOpen] = useState(false)
  const [currentPage, setCurrentPage] = useState(1)
  const vouchersPerPage = 6

const { data: vouchers, mutate: mutateVouchers } = useSWR<Voucher[]>("vouchers", async () => {
    const { data } = await supabase.from("vouchers").select("*").order("created_at", { ascending: false })
    return data || []
  })

const { data: templates, mutate: mutateTemplates } = useSWR<VoucherTemplate[]>("voucher_templates", async () => {
    const { data } = await supabase.from("voucher_templates").select("*").order("created_at", { ascending: false })
    return data || []
  })

const { data: vouchersWithCreators } = useSWR<VoucherWithCreator[]>("vouchers_with_creators", async () => {
    const { data: vouchersData } = await supabase
      .from("vouchers")
      .select("*")
      .order("created_at", { ascending: false })
    
    if (!vouchersData) return []
    
    const creatorIds = [...new Set(vouchersData.map(v => v.created_by).filter(Boolean))]
    const { data: profiles } = await supabase
      .from("profiles")
      .select("*")
      .in("id", creatorIds)
    
    return vouchersData.map(voucher => ({
      ...voucher,
      creator: profiles?.find(p => p.id === voucher.created_by)
    }))
  })

const { data: redemptions } = useSWR<RedemptionWithDetails[]>("voucher_redemptions_with_details", async () => {
    const { data: redemptionsData } = await supabase
      .from("voucher_redemptions")
      .select("*")
      .order("redeemed_at", { ascending: false })
    
    if (!redemptionsData) return []
    
    const userIds = [...new Set(redemptionsData.map(r => r.redeemed_by))]
    const voucherIds = [...new Set(redemptionsData.map(r => r.voucher_id))]
    
    const [profilesRes, vouchersRes] = await Promise.all([
      supabase.from("profiles").select("*").in("id", userIds),
      supabase.from("vouchers").select("*").in("id", voucherIds)
    ])
    
    return redemptionsData.map(redemption => ({
      ...redemption,
      profile: profilesRes.data?.find(p => p.id === redemption.redeemed_by),
      voucher: vouchersRes.data?.find(v => v.id === redemption.voucher_id)
    }))
  })

// Calculate statistics
  const totalVouchers = vouchers?.length || 0
  const activeVouchers = vouchers?.filter(v => v.is_active && v.redeemed_count < v.quantity).length || 0
  const totalRedemptions = redemptions?.length || 0
  const todayRedemptions = redemptions?.filter(r => {
    const today = new Date().toDateString()
    return new Date(r.redeemed_at).toDateString() === today
  }).length || 0

// Group redemptions by date for chart
  const redemptionsByDate = redemptions?.reduce((acc, r) => {
    const date = new Date(r.redeemed_at).toLocaleDateString("da-DK")
    acc[date] = (acc[date] || 0) + 1
    return acc
  }, {} as Record<string, number>) || {}

const last7Days = Array.from({ length: 7 }, (_, i) => {
    const date = new Date()
    date.setDate(date.getDate() - (6 - i))
    return date.toLocaleDateString("da-DK")
  })

const handleSaveTemplate = async () => {
    if (!templateName.trim()) return

const { error } = await supabase.from("voucher_templates").insert({
      name: templateName,
      background_color: designingVoucher.background_color,
      text_color: designingVoucher.text_color,
      border_color: designingVoucher.border_color,
      font_size: designingVoucher.font_size,
      logo_url: designingVoucher.logo_url,
      custom_css: designingVoucher.custom_css,
      created_by: currentUser.id,
    })

if (!error) {
      mutateTemplates()
      setShowSaveTemplate(false)
      setTemplateName("")
    }
  }

const handleLoadTemplate = (template: VoucherTemplate) => {
    setDesigningVoucher({
      ...designingVoucher,
      background_color: template.background_color,
      text_color: template.text_color,
      border_color: template.border_color,
      font_size: template.font_size,
      logo_url: template.logo_url || undefined,
      custom_css: template.custom_css || undefined,
    })
    setSelectedTemplate(template.id)
  }

const handleCreateVoucher = async () => {
    const code = `TFM-${Math.random().toString(36).substring(2, 10).toUpperCase()}`

const { error } = await supabase.from("vouchers").insert({
      code,
      type: designingVoucher.type,
      title: designingVoucher.title,
      description: designingVoucher.description || null,
      quantity: designingVoucher.quantity,
      expires_at: designingVoucher.expiresAt || null,
      created_by: currentUser.id,
      background_color: designingVoucher.background_color,
      text_color: designingVoucher.text_color,
      border_color: designingVoucher.border_color,
      font_size: designingVoucher.font_size,
      logo_url: designingVoucher.logo_url,
      custom_css: designingVoucher.custom_css,
    })

if (!error) {
      mutateVouchers()
      setShowDesigner(false)
      setDesigningVoucher({
        type: "drink",
        title: "",
        description: "",
        quantity: 1,
        background_color: "#ffffff",
        text_color: "#000000",
        border_color: "#000000",
        font_size: "24",
      })
      setSelectedTemplate(null)
    } else {
      console.error("[v0] Voucher creation error:", error)
    }
  }

const handleDeleteVoucher = async (id: string) => {
    await supabase.from("vouchers").delete().eq("id", id)
    mutateVouchers()
  }

const handleToggleActive = async (voucher: Voucher) => {
    const { error } = await supabase.from("vouchers").update({ is_active: !voucher.is_active }).eq("id", voucher.id)

if (error) {
      console.error("[v0] Toggle active error:", error)
    } else {
      mutateVouchers()
    }
  }

const toggleVoucherSelection = (id: string) => {
    const newSelection = new Set(selectedVouchers)
    if (newSelection.has(id)) {
      newSelection.delete(id)
    } else {
      newSelection.add(id)
    }
    setSelectedVouchers(newSelection)
  }

const handlePrintSelected = () => {
    if (selectedVouchers.size === 0) return
    setShowPrintPreview(true)
  }

const handleUpdateDesign = async () => {
    if (!editingVoucher) return

const { error } = await supabase
      .from("vouchers")
      .update({
        title: editingVoucher.title,
        description: editingVoucher.description,
        background_color: editingVoucher.background_color,
        text_color: editingVoucher.text_color,
        border_color: editingVoucher.border_color,
        font_size: editingVoucher.font_size,
        logo_url: editingVoucher.logo_url,
        custom_css: editingVoucher.custom_css,
      })
      .eq("id", editingVoucher.id)

if (!error) {
      mutateVouchers()
      setEditingVoucher(null)
      setDesignDialogOpen(false)
    }
  }

const selectedVouchersList = vouchers?.filter((v) => selectedVouchers.has(v.id)) || []

// Pagination
  const totalPages = Math.ceil((vouchers?.length || 0) / vouchersPerPage)
  const paginatedVouchers = vouchers?.slice(
    (currentPage - 1) * vouchersPerPage,
    currentPage * vouchersPerPage
  ) || []

// Get creator for a voucher
  const getVoucherCreator = (voucherId: string) => {
    return vouchersWithCreators?.find(v => v.id === voucherId)?.creator
  }

return (
    <div className="space-y-6">
      <Tabs defaultValue="vouchers" className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="vouchers">
            <Gift className="mr-2 h-4 w-4" />
            Vouchers
          </TabsTrigger>
          <TabsTrigger value="statistics">
            <BarChart3 className="mr-2 h-4 w-4" />
            Statistik
          </TabsTrigger>
          <TabsTrigger value="history">
            <Calendar className="mr-2 h-4 w-4" />
            Historik
          </TabsTrigger>
        </TabsList>

<TabsContent value="statistics" className="space-y-6">
          {/* Overview Cards */}
          <div className="grid gap-4 md:grid-cols-4">
            <Card>
              <CardHeader className="pb-2">
                <CardDescription>Totalt antal vouchers</CardDescription>
                <CardTitle className="text-3xl">{totalVouchers}</CardTitle>
              </CardHeader>
            </Card>
            <Card>
              <CardHeader className="pb-2">
                <CardDescription>Aktive vouchers</CardDescription>
                <CardTitle className="text-3xl text-green-500">{activeVouchers}</CardTitle>
              </CardHeader>
            </Card>
            <Card>
              <CardHeader className="pb-2">
                <CardDescription>Indløst i alt</CardDescription>
                <CardTitle className="text-3xl text-blue-500">{totalRedemptions}</CardTitle>
              </CardHeader>
            </Card>
            <Card>
              <CardHeader className="pb-2">
                <CardDescription>Indløst i dag</CardDescription>
                <CardTitle className="text-3xl text-orange-500">{todayRedemptions}</CardTitle>
              </CardHeader>
            </Card>
          </div>

{/* Chart - Last 7 days */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <TrendingUp className="h-5 w-5" />
                Indløsninger de sidste 7 dage
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-end gap-2 h-40">
                {last7Days.map(date => {
                  const count = redemptionsByDate[date] || 0
                  const maxCount = Math.max(...Object.values(redemptionsByDate), 1)
                  const height = (count / maxCount) * 100
                  return (
                    <div key={date} className="flex-1 flex flex-col items-center gap-1">
                      <span className="text-xs font-medium">{count}</span>
                      <div 
                        className="w-full bg-primary rounded-t transition-all"
                        style={{ height: `${Math.max(height, 4)}%` }}
                      />
                      <span className="text-xs text-muted-foreground">
                        {date.split(".").slice(0, 2).join("/")}
                      </span>
                    </div>
                  )
                })}
              </div>
            </CardContent>
          </Card>

{/* Top creators */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <User className="h-5 w-5" />
                Vouchers oprettet af
              </CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Bruger</TableHead>
                    <TableHead className="text-right">Antal oprettet</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {(() => {
                    const creatorCounts = vouchersWithCreators?.reduce((acc, v) => {
                      if (v.creator) {
                        const key = v.creator.id
                        if (!acc[key]) acc[key] = { creator: v.creator, count: 0 }
                        acc[key].count++
                      }
                      return acc
                    }, {} as Record<string, { creator: Profile, count: number }>)
                    
                    return Object.values(creatorCounts || {})
                      .sort((a, b) => b.count - a.count)
                      .slice(0, 10)
                      .map(({ creator, count }) => (
                        <TableRow key={creator.id}>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              <Avatar className="h-8 w-8">
                                <AvatarImage src={creator.avatar_url || undefined} />
                                <AvatarFallback>{creator.display_name?.charAt(0) || "?"}</AvatarFallback>
                              </Avatar>
                              <div>
                                <p className="font-medium">{creator.display_name}</p>
                                <p className="text-xs text-muted-foreground">{creator.role}</p>
                              </div>
                            </div>
                          </TableCell>
                          <TableCell className="text-right font-medium">{count}</TableCell>
                        </TableRow>
                      ))
                  })()}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="history" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Indløsningshistorik</CardTitle>
              <CardDescription>Se hvem der har indløst vouchers og hvornår</CardDescription>
            </CardHeader>
            <CardContent>
              {!redemptions?.length && (
                <p className="text-center text-muted-foreground py-8">Ingen indløsninger endnu</p>
              )}
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Voucher</TableHead>
                    <TableHead>Indløst af</TableHead>
                    <TableHead>Dato</TableHead>
                    <TableHead>Tidspunkt</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {redemptions?.map(redemption => (
                    <TableRow key={redemption.id}>
                      <TableCell>
                        <div>
                          <p className="font-medium">{redemption.voucher?.title || "Ukendt"}</p>
                          <p className="text-xs text-muted-foreground">{redemption.voucher?.code}</p>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <Avatar className="h-8 w-8">
                            <AvatarImage src={redemption.profile?.avatar_url || undefined} />
                            <AvatarFallback>{redemption.profile?.display_name?.charAt(0) || "?"}</AvatarFallback>
                          </Avatar>
                          <div>
                            <p className="font-medium">{redemption.profile?.display_name || "Ukendt"}</p>
                            <p className="text-xs text-muted-foreground">{redemption.profile?.class_name}</p>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        {new Date(redemption.redeemed_at).toLocaleDateString("da-DK")}
                      </TableCell>
                      <TableCell>
                        {new Date(redemption.redeemed_at).toLocaleTimeString("da-DK", { 
                          hour: "2-digit", 
                          minute: "2-digit" 
                        })}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="vouchers" className="space-y-6">
          {!showDesigner && (
            <Card className="border-border">
              <CardContent className="pt-6">
                <Button onClick={() => setShowDesigner(true)} className="w-full" size="lg">
                  <Plus className="mr-2 h-5 w-5" />
                  Opret Ny Voucher
                </Button>
              </CardContent>
            </Card>
          )}

{showDesigner && (
            <Card className="border-border">
              <CardHeader className="border-b border-border">
                <div className="flex items-center justify-between">
                  <CardTitle>Design Voucher</CardTitle>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm" onClick={() => setShowSaveTemplate(true)}>
                      Gem som skabelon
                    </Button>
                    <Button variant="ghost" onClick={() => setShowDesigner(false)}>
                      Annuller
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="pt-6 space-y-6">
                {templates && templates.length > 0 && (
                  <div className="space-y-2">
                    <Label>Vælg skabelon (valgfri)</Label>
                    <div className="flex flex-wrap gap-2">
                      {templates.map((template) => (
                        <Button
                          key={template.id}
                          variant={selectedTemplate === template.id ? "default" : "outline"}
                          size="sm"
                          onClick={() => handleLoadTemplate(template)}
                        >
                          {template.name}
                        </Button>
                      ))}
                    </div>
                  </div>
                )}

<VoucherDesigner
                  voucher={{ ...designingVoucher, code: "PREVIEW-CODE" }}
                  onChange={(v) => setDesigningVoucher(v)}
                  showCode={true}
                />
                <div className="mt-6 flex gap-4">
                  <div className="flex-1 space-y-2">
                    <Label>Type</Label>
                    <Select
                      value={designingVoucher.type}
                      onValueChange={(value: any) => setDesigningVoucher({ ...designingVoucher, type: value })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="drink">🍺 Drinks</SelectItem>
                        <SelectItem value="food">🍕 Mad</SelectItem>
                        <SelectItem value="merchandise">🎁 Merchandise</SelectItem>
                        <SelectItem value="custom">✨ Andet</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="flex-1 space-y-2">
                    <Label>Antal</Label>
                    <Input
                      type="number"
                      min="1"
                      value={designingVoucher.quantity}
                      onChange={(e) =>
                        setDesigningVoucher({ ...designingVoucher, quantity: Number.parseInt(e.target.value) || 1 })
                      }
                    />
                  </div>
                  <div className="flex-1 space-y-2">
                    <Label>Udløber (valgfri)</Label>
                    <Input
                      type="date"
                      value={designingVoucher.expiresAt}
                      onChange={(e) => setDesigningVoucher({ ...designingVoucher, expiresAt: e.target.value })}
                    />
                  </div>
                </div>
                <Button onClick={handleCreateVoucher} disabled={!designingVoucher.title} className="w-full" size="lg">
                  <Plus className="mr-2 h-5 w-5" />
                  Opret Voucher
                </Button>
              </CardContent>
            </Card>
          )}

<Dialog open={showSaveTemplate} onOpenChange={setShowSaveTemplate}>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Gem som skabelon</DialogTitle>
              </DialogHeader>
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label>Skabelon navn</Label>
                  <Input
                    value={templateName}
                    onChange={(e) => setTemplateName(e.target.value)}
                    placeholder="F.eks. Drinks Voucher Blå"
                  />
                </div>
                <Button onClick={handleSaveTemplate} disabled={!templateName.trim()} className="w-full">
                  Gem skabelon
                </Button>
              </div>
            </DialogContent>
          </Dialog>

<Card className="border-border bg-card">
            <CardHeader className="border-b border-border">
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-foreground flex items-center gap-2">
                    <Gift className="h-5 w-5" />
                    Eksisterende Vouchers
                  </CardTitle>
                  <CardDescription>Se og administrer alle vouchers</CardDescription>
                </div>
                {selectedVouchers.size > 0 && (
                  <div className="flex items-center gap-2">
                    <Badge variant="secondary">{selectedVouchers.size} valgt</Badge>
                    <Button size="sm" onClick={handlePrintSelected}>
                      <Printer className="mr-2 h-4 w-4" />
                      Print
                    </Button>
                  </div>
                )}
              </div>
            </CardHeader>
            <CardContent className="pt-4">
              {!vouchers?.length && <p className="text-center text-sm text-muted-foreground py-8">Ingen vouchers endnu</p>}

<div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
                {paginatedVouchers.map((voucher) => {
                  const isRedeemed = voucher.redeemed_count >= voucher.quantity
                  const creator = getVoucherCreator(voucher.id)

return (
                    <div key={voucher.id} className={`rounded-lg border border-border p-4 space-y-3 ${isRedeemed ? "opacity-50 bg-muted" : "bg-card"}`}>
                      <div className="flex items-start justify-between gap-2">
                        <div className="flex items-start gap-2 flex-1 min-w-0">
                          <Checkbox
                            checked={selectedVouchers.has(voucher.id)}
                            onCheckedChange={() => toggleVoucherSelection(voucher.id)}
                            className="mt-1"
                          />
                          <div className="flex-1 min-w-0">
                            <p className="font-medium text-sm truncate">{voucher.title}</p>
                            {voucher.description && (
                              <p className="text-xs text-muted-foreground truncate">{voucher.description}</p>
                            )}
                          </div>
                        </div>
                        {!isRedeemed ? (
                          <Badge variant={voucher.is_active ? "default" : "secondary"} className="text-xs shrink-0">
                            {voucher.is_active ? "Aktiv" : "Inaktiv"}
                          </Badge>
                        ) : (
                          <Badge variant="secondary" className="bg-gray-500 text-white text-xs shrink-0">
                            Indløst
                          </Badge>
                        )}
                      </div>

<div className="flex flex-wrap gap-1">
                        <Badge variant="outline" className="text-xs">
                          {voucher.type === "drink" && "Drinks"}
                          {voucher.type === "food" && "Mad"}
                          {voucher.type === "merchandise" && "Merchandise"}
                          {voucher.type === "custom" && "Andet"}
                        </Badge>
                        <Badge variant="outline" className="text-xs">
                          {voucher.redeemed_count}/{voucher.quantity}
                        </Badge>
                        {voucher.expires_at && (
                          <Badge variant="outline" className="text-xs">
                            {new Date(voucher.expires_at).toLocaleDateString("da-DK")}
                          </Badge>
                        )}
                      </div>

{creator && (
                        <div className="flex items-center gap-2 text-xs text-muted-foreground">
                          <Avatar className="h-5 w-5">
                            <AvatarImage src={creator.avatar_url || undefined} />
                            <AvatarFallback className="text-[10px]">{creator.display_name?.charAt(0) || "?"}</AvatarFallback>
                          </Avatar>
                          <span className="truncate">Oprettet af {creator.display_name}</span>
                        </div>
                      )}

<div className="flex gap-1 pt-1">
                        <Dialog
                          open={designDialogOpen && editingVoucher?.id === voucher.id}
                          onOpenChange={(open) => {
                            setDesignDialogOpen(open)
                            if (!open) setEditingVoucher(null)
                          }}
                        >
                          <DialogTrigger asChild>
                            <Button
                              variant="outline"
                              size="sm"
                              className="h-7 text-xs flex-1 bg-transparent"
                              onClick={() => {
                                setEditingVoucher(voucher)
                                setDesignDialogOpen(true)
                              }}
                            >
                              <Palette className="mr-1 h-3 w-3" />
                              Design
                            </Button>
                          </DialogTrigger>
                          <DialogContent className="max-w-[95vw] w-[1200px] max-h-[95vh] overflow-y-auto">
                            <DialogHeader>
                              <DialogTitle>Rediger Design - {voucher.title}</DialogTitle>
                            </DialogHeader>
                            {editingVoucher && (
                              <div className="space-y-6">
                                <VoucherDesigner voucher={editingVoucher} onChange={setEditingVoucher} showCode={true} />
                                <Button onClick={handleUpdateDesign} className="w-full">
                                  Gem Ændringer
                                </Button>
                              </div>
                            )}
                          </DialogContent>
                        </Dialog>

<Button
                          variant="outline"
                          size="sm"
                          className="h-7 text-xs bg-transparent"
                          onClick={() => handleToggleActive(voucher)}
                          disabled={isRedeemed}
                        >
                          {voucher.is_active ? "Deaktiver" : "Aktiver"}
                        </Button>
                        <ConfirmDialog
                          title="Slet voucher?"
                          description="Denne handling kan ikke fortrydes. Alle tilknyttede indløsninger slettes også."
                          onConfirm={() => handleDeleteVoucher(voucher.id)}
                        >
                          <Button variant="destructive" size="sm" className="h-7">
                            <Trash2 className="h-3 w-3" />
                          </Button>
                        </ConfirmDialog>
                      </div>
                    </div>
                  )
                })}
              </div>

{/* Pagination */}
              {totalPages > 1 && (
                <div className="flex items-center justify-center gap-2 pt-4">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                    disabled={currentPage === 1}
                  >
                    <ChevronLeft className="h-4 w-4" />
                  </Button>
                  <span className="text-sm text-muted-foreground">
                    Side {currentPage} af {totalPages}
                  </span>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
                    disabled={currentPage === totalPages}
                  >
                    <ChevronRight className="h-4 w-4" />
                  </Button>
                </div>
              )}
            </CardContent>
          </Card>

{showPrintPreview && (
            <div className="fixed inset-0 z-50 bg-black/80">
              <div className="absolute right-4 top-4 z-10 flex gap-2 print:hidden">
                <Card className="bg-card p-4">
                  <Label className="mb-2 block text-sm font-medium">Print Layout</Label>
                  <RadioGroup value={printLayout} onValueChange={(v: any) => setPrintLayout(v)}>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="quad" id="quad" />
                      <Label htmlFor="quad" className="cursor-pointer text-sm font-semibold">
                        <Scissors className="mr-1 inline h-3 w-3" />4 per side (anbefalet)
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="full" id="full" />
                      <Label htmlFor="full" className="cursor-pointer text-sm">
                        Fuld A4 (1 per side)
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="mini" id="mini" />
                      <Label htmlFor="mini" className="cursor-pointer text-sm">
                        Mini sedler (4 per side)
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <RadioGroupItem value="cutout" id="cutout" />
                      <Label htmlFor="cutout" className="cursor-pointer text-sm">
                        <Scissors className="mr-1 inline h-3 w-3" />
                        Klip-ud sedler (6 per side)
                      </Label>
                    </div>
                  </RadioGroup>
                </Card>
              </div>
              <VoucherPrint
                vouchers={selectedVouchersList}
                layout={printLayout}
                onClose={() => {
                  setShowPrintPreview(false)
                  setSelectedVouchers(new Set())
                }}
              />
            </div>
          )}
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin-content.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { createClient } from "@/lib/supabase/client"
import useSWR from "swr"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { ConfirmDialog } from "@/components/confirm-dialog"
import type { Event, Area, Shift, Invite, UserRole, Profile, Bid, ShiftAssignment } from "@/lib/types"
import { Plus, Copy, Check, Users, Calendar, Trash2, Edit2, Shield, Clock, X, Gift, Settings2 } from "lucide-react" // Added Gift and Settings2 icons
// Removed duplicate imports of useSWR and useState

// Using real components from separate files
import { VouchersTab } from "./vouchers-tab"
import { RolesGroupsTab } from "./roles-groups-tab"
import { PermissionsTab } from "./permissions-tab"
import { SmartVagtplan } from "./smart-vagtplan"

interface AdminContentProps {
  userId: string
}

export function AdminContent({ userId }: AdminContentProps) {
  const supabase = createClient()

// We need to fetch the current user's profile to pass it down to VouchersTab and RolesGroupsTab
  const { data: currentProfile } = useSWR<Profile>("current_profile", async () => {
    const { data } = await supabase
      .from("profiles")
      .select("*")
      .eq("id", userId)
      .single()
    return data
  })

// Invites state
  const [inviteRole, setInviteRole] = useState<UserRole>("member")
  const [inviteGroupId, setInviteGroupId] = useState<string>("")
  const [copiedCode, setCopiedCode] = useState<string | null>(null)

// Event creation state
  const [eventName, setEventName] = useState("")
  const [eventDate, setEventDate] = useState("")
  const [eventStartTime, setEventStartTime] = useState("")
  const [eventEndTime, setEventEndTime] = useState("")
  const [eventLocation, setEventLocation] = useState("")

// Event management state
  const [selectedEventId, setSelectedEventId] = useState<string>("")
  const [areaName, setAreaName] = useState("")
  const [areaRequires18, setAreaRequires18] = useState(false)
  const [selectedAreaResponsibles, setSelectedAreaResponsibles] = useState<string[]>([])
  const [selectedAreaId, setSelectedAreaId] = useState<string>("")
  const [shiftStart, setShiftStart] = useState("")
  const [shiftEnd, setShiftEnd] = useState("")
  const [shiftNeeded, setShiftNeeded] = useState("2")

const [editingUser, setEditingUser] = useState<Profile | null>(null)
  const [editUserName, setEditUserName] = useState("")
  const [editUserRole, setEditUserRole] = useState<UserRole>("member")
  const [editUserIs18, setEditUserIs18] = useState(false)
  const [editUserClass, setEditUserClass] = useState("")
  const [editUserGroupIds, setEditUserGroupIds] = useState<string[]>([])
  const [deleteUserConfirm, setDeleteUserConfirm] = useState<Profile | null>(null)

const [editingArea, setEditingArea] = useState<Area | null>(null)
  const [editAreaName, setEditAreaName] = useState("")
  const [editAreaResponsibles, setEditAreaResponsibles] = useState<string[]>([])
  const [editAreaRequires18, setEditAreaRequires18] = useState(false)
  const [deleteAreaConfirm, setDeleteAreaConfirm] = useState<Area | null>(null)

const [editingShift, setEditingShift] = useState<Shift | null>(null)
  const [editShiftStart, setEditShiftStart] = useState("")
  const [editShiftEnd, setEditShiftEnd] = useState("")
  const [editShiftNeeded, setEditShiftNeeded] = useState("")
  const [deleteShiftConfirm, setDeleteShiftConfirm] = useState<Shift | null>(null)

const [deleteEventConfirm, setDeleteEventConfirm] = useState<Event | null>(null)

const [shiftConflictWarning, setShiftConflictWarning] = useState<{
    show: boolean
    shiftId: string
    odingUserId: string
    userName: string
    conflictingShifts: string[]
  } | null>(null)

const [ageRestrictionWarning, setAgeRestrictionWarning] = useState<{
    show: boolean
    shiftId: string
    odingUserId: string
    userName: string
    areaName: string
  } | null>(null)

const [openBidPopover, setOpenBidPopover] = useState<string | null>(null)

// Fetch roles for invitation selection
  const { data: roles } = useSWR("roles", async () => {
    const { data } = await supabase.from("roles").select("*").order("priority", { ascending: false })
    return data || []
  })

// Fetch groups for user assignment
  const { data: groups } = useSWR("groups", async () => {
    const { data } = await supabase.from("groups").select("*").order("name")
    return data || []
  })

// Fetch invites
  const { data: invites, mutate: mutateInvites } = useSWR<Invite[]>("invites", async () => {
    const { data } = await supabase.from("invites").select("*").order("created_at", { ascending: false }).limit(20)
    return data || []
  })

// Fetch events
  const { data: events, mutate: mutateEvents } = useSWR<Event[]>("admin-events", async () => {
    const { data } = await supabase.from("events").select("*").order("date", { ascending: false })
    return data || []
  })

// Fetch areas for selected event
  const { data: areas, mutate: mutateAreas } = useSWR<
    (Area & { responsibles: (import("@/lib/types").AreaResponsible & { profile: Profile })[] })[]
  >(selectedEventId ? `areas-${selectedEventId}` : null, async () => {
    if (!selectedEventId) return []
    const { data: areasData } = await supabase.from("areas").select("*").eq("event_id", selectedEventId)
    if (!areasData) return []

// Fetch responsibles for all areas
    const areaIds = areasData.map((a) => a.id)
    const { data: responsibles } = await supabase
      .from("area_responsibles")
      .select("*, profile:profiles(*)")
      .in("area_id", areaIds)

// Attach responsibles to areas
    return areasData.map((area) => ({
      ...area,
      responsibles: (responsibles || []).filter((r) => r.area_id === area.id),
    }))
  })

// Fetch bids for selected event
  const { data: bids } = useSWR<(Bid & { profile: Profile; area: Area })[]>(
    selectedEventId ? `bids-${selectedEventId}` : null,
    async () => {
      if (!selectedEventId) return []
      const { data } = await supabase
        .from("bids")
        .select("*, profile:profiles(*), area:areas(*)")
        .eq("event_id", selectedEventId)
      return data || []
    },
  )

// Fetch shifts for selected area
  const { data: shifts, mutate: mutateShifts } = useSWR<
    (Shift & { assignments: (ShiftAssignment & { profile: Profile })[] })[]
  >(selectedAreaId ? `shifts-${selectedAreaId}` : null, async () => {
    if (!selectedAreaId) return []
    const { data: shiftsData } = await supabase
      .from("shifts")
      .select("*")
      .eq("area_id", selectedAreaId)
      .order("start_time", { ascending: true })

if (!shiftsData) return []

const shiftIds = shiftsData.map((s) => s.id)
    const { data: assignments } = await supabase
      .from("shift_assignments")
      .select("*, profile:profiles(*)")
      .in("shift_id", shiftIds)

return shiftsData.map((shift) => ({
      ...shift,
      assignments: (assignments || []).filter((a) => a.shift_id === shift.id),
    }))
  })

const { data: allEventShifts } = useSWR<(Shift & { area: Area; assignments: ShiftAssignment[] })[]>(
    selectedEventId ? `all-shifts-${selectedEventId}` : null,
    async () => {
      if (!selectedEventId) return []
      const { data: areasData } = await supabase.from("areas").select("id").eq("event_id", selectedEventId)
      if (!areasData?.length) return []

const areaIds = areasData.map((a) => a.id)
      const { data: shiftsData } = await supabase.from("shifts").select("*, area:areas(*)").in("area_id", areaIds)

if (!shiftsData) return []

const shiftIds = shiftsData.map((s) => s.id)
      const { data: assignments } = await supabase.from("shift_assignments").select("*").in("shift_id", shiftIds)

return shiftsData.map((shift) => ({
        ...shift,
        assignments: (assignments || []).filter((a) => a.shift_id === shift.id),
      }))
    },
  )

// Fetch all profiles for assignment
  const { data: profiles, mutate: mutateProfiles } = useSWR<Profile[]>("profiles", async () => {
    const { data } = await supabase.from("profiles").select("*").order("display_name")
    return data || []
  })

const selectedEvent = events?.find((e) => e.id === selectedEventId)
  const selectedArea = areas?.find((a) => a.id === selectedAreaId)

// Generate simple invite code
  const generateSimpleCode = () => {
    const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789"
    let code = ""
    for (let i = 0; i < 8; i++) {
      if (i === 4) code += "-"
      code += chars.charAt(Math.floor(Math.random() * chars.length))
    }
    return code
  }

// Create invite
  const handleCreateInvite = async () => {
    const code = generateSimpleCode()
    await supabase.from("invites").insert({
      code,
      role: inviteRole,
      group_id: inviteGroupId || null,
      created_by: userId,
    })
    setCopiedCode(code)
    setInviteGroupId("")
    mutateInvites()
  }

// Copy invite code
  const handleCopyCode = (code: string) => {
    navigator.clipboard.writeText(code)
    setCopiedCode(code)
    setTimeout(() => setCopiedCode(null), 2000)
  }

// State for event group assignment
  const [eventGroupIds, setEventGroupIds] = useState<string[]>([])
  const [eventVisibleToAll, setEventVisibleToAll] = useState(true)
  
  // State for editing events
  const [editingEvent, setEditingEvent] = useState<Event | null>(null)
  const [editEventName, setEditEventName] = useState("")
  const [editEventDate, setEditEventDate] = useState("")
  const [editEventStartTime, setEditEventStartTime] = useState("")
  const [editEventEndTime, setEditEventEndTime] = useState("")
  const [editEventLocation, setEditEventLocation] = useState("")
  const [editEventGroupIds, setEditEventGroupIds] = useState<string[]>([])
  const [editEventVisibleToAll, setEditEventVisibleToAll] = useState(true)

// Open edit event dialog
  const openEditEvent = (event: Event) => {
    setEditingEvent(event)
    setEditEventName(event.name)
    setEditEventDate(event.date)
    setEditEventStartTime(event.start_time)
    setEditEventEndTime(event.end_time)
    setEditEventLocation(event.location || "")
    setEditEventVisibleToAll(event.visible_to_all !== false)
    setEditEventGroupIds(event.group_id ? [event.group_id] : [])
  }

// Update event
  const handleUpdateEvent = async () => {
    if (!editingEvent) return
    
    await supabase.from("events").update({
      name: editEventName,
      date: editEventDate,
      start_time: editEventStartTime,
      end_time: editEventEndTime,
      location: editEventLocation || null,
      visible_to_all: editEventVisibleToAll,
      group_id: editEventGroupIds.length > 0 ? editEventGroupIds[0] : null,
    }).eq("id", editingEvent.id)
    
    setEditingEvent(null)
    mutateEvents()
  }

// Create event
  const [creatingEvent, setCreatingEvent] = useState(false)
  const handleCreateEvent = async () => {
    if (!eventName || !eventDate || !eventStartTime || !eventEndTime) return
    
    setCreatingEvent(true)
    
    // For now, if multiple groups selected, store first one in group_id
    // In future, create event_groups junction table for many-to-many
    const { data: newEvent } = await supabase.from("events").insert({
      name: eventName,
      date: eventDate,
      start_time: eventStartTime,
      end_time: eventEndTime,
      location: eventLocation || null,
      status: "open",
      created_by: userId,
      visible_to_all: eventVisibleToAll,
      group_id: eventGroupIds.length > 0 ? eventGroupIds[0] : null,
    }).select().single()
    
    setEventName("")
    setEventDate("")
    setEventStartTime("")
    setEventEndTime("")
    setEventLocation("")
    setEventGroupIds([])
    setEventVisibleToAll(true)
    mutateEvents()
    setCreatingEvent(false)
  }

const handleDeleteEvent = async (eventId: string) => {
    await supabase.from("events").delete().eq("id", eventId)
    if (selectedEventId === eventId) {
      setSelectedEventId("")
      setSelectedAreaId("")
    }
    mutateEvents()
  }

const handleMarkCompleted = async (eventId: string) => {
    await supabase.from("events").update({ status: "completed" }).eq("id", eventId)
    mutateEvents()
  }

const handleCreateArea = async () => {
    if (!selectedEventId || !areaName) return
    const { data: newArea } = await supabase
      .from("areas")
      .insert({
        event_id: selectedEventId,
        name: areaName,
        responsible_text: null,
        requires_18: areaRequires18,
        created_by: userId,
      })
      .select()
      .single()

// Add responsibles
    if (newArea && selectedAreaResponsibles.length > 0) {
      await supabase.from("area_responsibles").insert(
        selectedAreaResponsibles.map((uid) => ({
          area_id: newArea.id,
          user_id: uid,
        })),
      )
    }

setAreaName("")
    setSelectedAreaResponsibles([])
    setAreaRequires18(false)
    mutateAreas()
  }

const handleEditArea = async () => {
    if (!editingArea) return
    await supabase
      .from("areas")
      .update({
        name: editAreaName,
        requires_18: editAreaRequires18,
      })
      .eq("id", editingArea.id)

// Update responsibles
    await supabase.from("area_responsibles").delete().eq("area_id", editingArea.id)
    if (editAreaResponsibles.length > 0) {
      await supabase.from("area_responsibles").insert(
        editAreaResponsibles.map((uid) => ({
          area_id: editingArea.id,
          user_id: uid,
        })),
      )
    }

setEditingArea(null)
    mutateAreas()
  }

const handleDeleteArea = async (areaId: string) => {
    await supabase.from("areas").delete().eq("id", areaId)
    if (selectedAreaId === areaId) {
      setSelectedAreaId("")
    }
    mutateAreas()
  }

// Create shift
  const handleCreateShift = async () => {
    if (!selectedAreaId || !shiftStart || !shiftEnd) return
    await supabase.from("shifts").insert({
      area_id: selectedAreaId,
      start_time: shiftStart,
      end_time: shiftEnd,
      needed: Number.parseInt(shiftNeeded) || 1,
      created_by: userId,
    })
    setShiftStart("")
    setShiftEnd("")
    setShiftNeeded("2")
    mutateShifts()
  }

const handleEditShift = async () => {
    if (!editingShift) return
    await supabase
      .from("shifts")
      .update({
        start_time: editShiftStart,
        end_time: editShiftEnd,
        needed: Number.parseInt(editShiftNeeded) || 1,
      })
      .eq("id", editingShift.id)
    setEditingShift(null)
    mutateShifts()
  }

const handleDeleteShift = async (shiftId: string) => {
    await supabase.from("shifts").delete().eq("id", shiftId)
    mutateShifts()
  }

// Update event status
  const handleUpdateStatus = async (status: "open" | "published") => {
    if (!selectedEventId) return
    await supabase
      .from("events")
      .update({ status, published_at: status === "published" ? new Date().toISOString() : null })
      .eq("id", selectedEventId)
    mutateEvents()
  }

const getShiftsForArea = (areaId: string): Shift[] => {
    if (!allEventShifts) return []
    return allEventShifts.filter((s) => s.area_id === areaId)
  }

const handleAssignFromBid = (profile: Profile, area: Area, shiftId: string) => {
    setOpenBidPopover(null)

// Check 18+ requirement
    if (area.requires_18 && !profile.is_over_18) {
      setAgeRestrictionWarning({
        show: true,
        shiftId,
        odingUserId: profile.id,
        userName: profile.display_name,
        areaName: area.name,
      })
      return
    }

// Check shift conflicts
    const conflicts = checkShiftConflicts(shiftId, profile.id)
    if (conflicts.length > 0) {
      setShiftConflictWarning({
        show: true,
        shiftId,
        odingUserId: profile.id,
        userName: profile.display_name,
        conflictingShifts: conflicts,
      })
      return
    }

handleAssignUser(shiftId, profile.id)
  }

const checkShiftConflicts = (shiftId: string, userIdToCheck: string): string[] => {
    const currentShift = shifts?.find((s) => s.id === shiftId)
    if (!currentShift || !allEventShifts) return []

const conflictingShifts: string[] = []

for (const shift of allEventShifts) {
      if (shift.id === shiftId) continue
      const isAssigned = shift.assignments.some((a) => a.user_id === userIdToCheck)
      if (!isAssigned) continue

const currentStart = new Date(currentShift.start_time).getTime()
      const currentEnd = new Date(currentShift.end_time).getTime()
      const shiftStart = new Date(shift.start_time).getTime()
      const shiftEnd = new Date(shift.end_time).getTime()

if (currentStart < shiftEnd && currentEnd > shiftStart) {
        const area = shift.area as Area
        conflictingShifts.push(
          `${area?.name || "Ukendt"}: ${formatTime(shift.start_time)} - ${formatTime(shift.end_time)}`,
        )
      }
    }

return conflictingShifts
  }

const handleAssignUserWithChecks = (shiftId: string, userIdToAssign: string) => {
    const profile = profiles?.find((p) => p.id === userIdToAssign)
    if (!profile) return

if (selectedArea?.requires_18 && !profile.is_over_18) {
      setAgeRestrictionWarning({
        show: true,
        shiftId,
        odingUserId: userIdToAssign,
        userName: profile.display_name,
        areaName: selectedArea.name,
      })
      return
    }

const conflicts = checkShiftConflicts(shiftId, userIdToAssign)
    if (conflicts.length > 0) {
      setShiftConflictWarning({
        show: true,
        shiftId,
        odingUserId: userIdToAssign,
        userName: profile.display_name,
        conflictingShifts: conflicts,
      })
      return
    }

handleAssignUser(shiftId, userIdToAssign)
  }

const handleAssignUser = async (shiftId: string, userIdToAssign: string) => {
    await supabase.from("shift_assignments").insert({
      shift_id: shiftId,
      user_id: userIdToAssign,
    })
    mutateShifts()
  }

const handleRemoveAssignment = async (assignmentId: string) => {
    await supabase.from("shift_assignments").delete().eq("id", assignmentId)
    mutateShifts()
  }

const handleUpdateUser = async () => {
    if (!editingUser) return
    
    // Update profile
    const { error: profileError } = await supabase
      .from("profiles")
      .update({
        display_name: editUserName,
        role: editUserRole,
        is_over_18: editUserIs18,
        class_name: editUserClass || null,
      })
      .eq("id", editingUser.id)
    
    if (profileError) {
      console.error("Profile update error:", profileError)
      return
    }
    
    // Update groups - delete existing and insert new ones
    await supabase.from("user_groups").delete().eq("user_id", editingUser.id)
    
    if (editUserGroupIds.length > 0) {
      await supabase.from("user_groups").insert(
        editUserGroupIds.map(groupId => ({
          user_id: editingUser.id,
          group_id: groupId
        }))
      )
    }
    
    // Update the profiles cache directly instead of refetching
    if (profiles) {
      const updatedProfiles = profiles.map(p => 
        p.id === editingUser.id 
          ? { 
              ...p, 
              display_name: editUserName,
              role: editUserRole,
              is_over_18: editUserIs18,
              class_name: editUserClass || null,
            }
          : p
      )
      mutateProfiles(updatedProfiles, false)
    }
    
    setEditingUser(null)
  }

const handleDeleteUser = async (userIdToDelete: string) => {
    await supabase.from("profiles").delete().eq("id", userIdToDelete)
    mutateProfiles()
  }

const openEditUser = async (profile: Profile) => {
    setEditingUser(profile)
    setEditUserName(profile.display_name)
    setEditUserRole(profile.role)
    setEditUserIs18(profile.is_over_18)
    setEditUserClass(profile.class_name || "")
    
    // Fetch user's current groups
    const { data: userGroupData } = await supabase
      .from("user_groups")
      .select("group_id")
      .eq("user_id", profile.id)
    setEditUserGroupIds(userGroupData?.map(ug => ug.group_id) || [])
  }

const openEditArea = (area: Area) => {
    setEditingArea(area)
    setEditAreaName(area.name)
    setEditAreaRequires18(area.requires_18 || false)
    setEditAreaResponsibles(area.responsibles.map((r) => r.user_id)) // Initialize with current responsibles
  }

const openEditShift = (shift: Shift) => {
    setEditingShift(shift)
    setEditShiftStart(shift.start_time)
    setEditShiftEnd(shift.end_time)
    setEditShiftNeeded(String(shift.needed))
  }

const formatTime = (timeStr: string) => {
    if (timeStr.includes("T")) {
      return timeStr.split("T")[1].slice(0, 5)
    }
    return timeStr.slice(0, 5)
  }

const formatDate = (dateStr: string) => {
    return new Date(dateStr + "T12:00:00").toLocaleDateString("da-DK", {
      day: "numeric",
      month: "short",
    })
  }

const getRoleBadgeColor = (role: UserRole) => {
    switch (role) {
      case "admin":
        return "bg-red-500/20 text-red-500 dark:text-red-400"
      case "formand":
        return "bg-purple-500/20 text-purple-500 dark:text-purple-400"
      case "area_manager":
        return "bg-blue-500/20 text-blue-500 dark:text-blue-400"
      default:
        return "bg-muted text-muted-foreground"
    }
  }

const getRoleLabel = (role: UserRole) => {
    switch (role) {
      case "admin":
        return "Admin"
      case "formand":
        return "Formand"
      case "area_manager":
        return "Områdeansvarlig"
      default:
        return "Medlem"
    }
  }

const toggleResponsible = (profileId: string, list: string[], setList: (v: string[]) => void) => {
    if (list.includes(profileId)) {
      setList(list.filter((id) => id !== profileId))
    } else {
      setList([...list, profileId])
    }
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-foreground">Admin Panel</h1>
        <p className="text-muted-foreground">Administrer invitationer, arrangementer, brugere og vagtplaner</p>
      </div>

<TabsTrigger
            value="events"
            className="gap-2 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
          >
            <Calendar className="h-4 w-4" />
            <span className="hidden sm:inline">Arrangementer</span>
          </TabsTrigger>
          <TabsTrigger
            value="schedule"
            className="gap-2 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
          >
            <Clock className="h-4 w-4" />
            <span className="hidden sm:inline">Vagtplan</span>
          </TabsTrigger>
          <TabsTrigger
            value="smartvagtplan"
            className="gap-2 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
          >
            <Calendar className="h-4 w-4" />
            <span className="hidden sm:inline">SmartVagtplan</span>
          </TabsTrigger>

{/* Added Vouchers and Settings tabs */}
          <TabsTrigger
            value="vouchers"
            className="gap-2 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
          >
            <Gift className="h-4 w-4" />
            <span className="hidden sm:inline">Vouchers</span>
          </TabsTrigger>
          <TabsTrigger
            value="roles"
            className="gap-2 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
          >
            <Shield className="h-4 w-4" />
            <span className="hidden sm:inline">Roller & Grupper</span>
          </TabsTrigger>
        </TabsList>

{/* Events Tab */}
        <TabsContent value="events">
          <div className="grid gap-6 lg:grid-cols-2">
            <Card className="border-border bg-card">
              <CardHeader className="border-b border-border">
                <CardTitle className="text-foreground">Opret arrangement</CardTitle>
                <CardDescription>Opret et nyt arrangement til vagtplanlægning</CardDescription>
              </CardHeader>
              <CardContent className="pt-6 space-y-4">
                <div className="space-y-2">
                  <Label>Navn</Label>
                  <Input
                    value={eventName}
                    onChange={(e) => setEventName(e.target.value)}
                    placeholder="Fx Introfest – 1.g & 2.g"
                    className="bg-secondary border-border"
                  />
                </div>
                <div className="space-y-2">
                  <Label>Dato</Label>
                  <Input
                    type="date"
                    value={eventDate}
                    onChange={(e) => setEventDate(e.target.value)}
                    className="bg-secondary border-border"
                  />
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label>Start</Label>
                    <Input
                      type="time"
                      value={eventStartTime}
                      onChange={(e) => setEventStartTime(e.target.value)}
                      className="bg-secondary border-border"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Slut</Label>
                    <Input
                      type="time"
                      value={eventEndTime}
                      onChange={(e) => setEventEndTime(e.target.value)}
                      className="bg-secondary border-border"
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label>Lokation</Label>
                  <Input
                    value={eventLocation}
                    onChange={(e) => setEventLocation(e.target.value)}
                    placeholder="Fx Aulaen"
                    className="bg-secondary border-border"
                  />
                </div>
                
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label>Synlighed</Label>
                    <div className="flex items-center gap-2">
                      <Switch 
                        checked={eventVisibleToAll} 
                        onCheckedChange={setEventVisibleToAll}
                      />
                      <span className="text-xs text-muted-foreground">
                        {eventVisibleToAll ? "Alle" : "Kun valgte grupper"}
                      </span>
                    </div>
                  </div>
                  {!eventVisibleToAll && groups && (
                    <div className="rounded-lg border border-border bg-secondary/50 p-2 min-h-[60px]">
                      {eventGroupIds.length > 0 && (
                        <div className="flex flex-wrap gap-1 mb-2">
                          {eventGroupIds.map(gid => {
                            const group = groups?.find(g => g.id === gid)
                            return group ? (
                              <Badge 
                                key={gid} 
                                variant="secondary" 
                                className="gap-1"
                                style={{ borderColor: group.color, color: group.color }}
                              >
                                {group.display_name}
                                <button onClick={() => setEventGroupIds(prev => prev.filter(id => id !== gid))}>
                                  <X className="h-3 w-3" />
                                </button>
                              </Badge>
                            ) : null
                          })}
                        </div>
                      )}
                      <div className="space-y-1">
                        {groups?.filter(g => !eventGroupIds.includes(g.id)).map(group => (
                          <button
                            key={group.id}
                            onClick={() => setEventGroupIds(prev => [...prev, group.id])}
                            className="w-full text-left px-2 py-1 rounded hover:bg-secondary transition-colors text-sm"
                            style={{ color: group.color }}
                          >
                            {group.display_name}
                          </button>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
                
                <Button
                  onClick={handleCreateEvent}
                  className="w-full bg-gradient-to-r from-primary to-accent text-primary-foreground"
                >
                  <Plus className="mr-2 h-4 w-4" />
                  Opret arrangement
                </Button>
              </CardContent>
            </Card>

<Card className="border-border bg-card">
              <CardHeader className="border-b border-border">
                <CardTitle className="text-foreground">Arrangementer</CardTitle>
              </CardHeader>
              <CardContent className="pt-6">
                <div className="space-y-2 max-h-96 overflow-y-auto">
                  {!events?.length ? (
                    <p className="text-sm text-muted-foreground py-8 text-center">Ingen arrangementer endnu</p>
                  ) : (
                    events.map((event) => (
                      <div
                        key={event.id}
                        className={`rounded-lg border p-3 transition-colors ${
                          selectedEventId === event.id
                            ? "border-primary bg-primary/10"
                            : "border-border bg-secondary/50 hover:bg-secondary/70"
                        }`}
                      >
                        <div className="flex items-start justify-between gap-2">
                          <div className="flex-1 cursor-pointer" onClick={() => setSelectedEventId(event.id)}>
                            <p className="font-medium text-foreground">{event.name}</p>
                            <p className="text-xs text-muted-foreground">
                              {formatDate(event.date)} · {event.start_time} - {event.end_time}
                              {event.location && ` · ${event.location}`}
                            </p>
                          </div>
                          <div className="flex items-center gap-2">
                            <Badge
                              className={
                                event.status === "completed"
                                  ? "bg-muted text-muted-foreground"
                                  : event.status === "published"
                                    ? "bg-emerald-500/20 text-emerald-500 dark:text-emerald-400"
                                    : event.status === "open"
                                      ? "bg-primary/20 text-primary"
                                      : "bg-muted text-muted-foreground"
                              }
                            >
                              {event.status === "completed"
                                ? "Afholdt"
                                : event.status === "published"
                                  ? "Udgivet"
                                  : event.status === "open"
                                    ? "Åben"
                                    : "Kladde"}
                            </Badge>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-7 w-7"
                              onClick={(e) => {
                                e.stopPropagation()
                                openEditEvent(event)
                              }}
                              title="Rediger arrangement"
                            >
                              <Edit2 className="h-3.5 w-3.5" />
                            </Button>
                            {event.status === "published" && (
                              <Button
                                variant="ghost"
                                size="icon"
                                className="h-7 w-7"
                                onClick={(e) => {
                                  e.stopPropagation()
                                  handleMarkCompleted(event.id)
                                }}
                                title="Marker som afholdt"
                              >
                                <Check className="h-3.5 w-3.5 text-emerald-500" />
                              </Button>
                            )}
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-7 w-7"
                              onClick={(e) => {
                                e.stopPropagation()
                                setDeleteEventConfirm(event)
                              }}
                            >
                              <Trash2 className="h-3.5 w-3.5 text-destructive" />
                            </Button>
                          </div>
                        </div>
                      </div>
                    ))
                  )}
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

{/* Schedule Tab */}
        <TabsContent value="schedule">
          <div className="grid gap-6 lg:grid-cols-3">
            {/* Event Selection & Status */}
            <Card className="border-border bg-card">
              <CardHeader className="border-b border-border">
                <CardTitle className="text-foreground">Vælg arrangement</CardTitle>
              </CardHeader>
              <CardContent className="pt-6 space-y-4">
                <Select value={selectedEventId} onValueChange={setSelectedEventId}>
                  <SelectTrigger className="bg-secondary border-border">
                    <SelectValue placeholder="Vælg arrangement" />
                  </SelectTrigger>
                  <SelectContent>
                    {events
                      ?.filter((e) => e.status !== "completed")
                      .map((event) => (
                        <SelectItem key={event.id} value={event.id}>
                          {event.name} ({formatDate(event.date)})
                        </SelectItem>
                      ))}
                  </SelectContent>
                </Select>

{selectedEvent && (
                  <>
                    <div className="rounded-lg border border-border bg-secondary/50 p-3">
                      <p className="text-sm text-muted-foreground">
                        Status:{" "}
                        <span className="font-medium text-foreground">
                          {selectedEvent.status === "published"
                            ? "Udgivet"
                            : selectedEvent.status === "open"
                              ? "Åben for bud"
                              : "Kladde"}
                        </span>
                      </p>
                    </div>
                    <div className="flex gap-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleUpdateStatus("open")}
                        disabled={selectedEvent.status === "open"}
                        className="flex-1"
                      >
                        Åbn for bud
                      </Button>
                      <Button
                        size="sm"
                        onClick={() => handleUpdateStatus("published")}
                        disabled={selectedEvent.status === "published"}
                        className="flex-1 bg-emerald-500 text-white hover:bg-emerald-600"
                      >
                        Udgiv
                      </Button>
                    </div>

{bids && bids.length > 0 && (
                      <div className="space-y-2">
                        <Label className="text-xs text-muted-foreground">Indkomne bud ({bids.length})</Label>
                        <div className="max-h-64 space-y-2 overflow-y-auto">
                          {(() => {
                            const bidsByArea = bids.reduce(
                              (acc, bid) => {
                                const areaId = bid.area?.id || "unknown"
                                if (!acc[areaId]) {
                                  acc[areaId] = {
                                    area: bid.area,
                                    profiles: [],
                                  }
                                }
                                acc[areaId].profiles.push(bid.profile)
                                return acc
                              },
                              {} as Record<string, { area: Area | null; profiles: Profile[] }>,
                            )

return Object.entries(bidsByArea).map(([areaId, { area, profiles: areaProfiles }]) => {
                              const areaShifts = getShiftsForArea(areaId)

return (
                                <div key={areaId} className="rounded-lg border border-border bg-card overflow-hidden">
                                  <div className="flex items-center justify-between bg-secondary/50 px-3 py-2">
                                    <div className="flex items-center gap-2">
                                      <span className="font-medium text-sm text-foreground">
                                        {area?.name || "Ukendt område"}
                                      </span>
                                      {area?.requires_18 && (
                                        <Badge
                                          variant="outline"
                                          className="text-[10px] border-orange-500 text-orange-500"
                                        >
                                          18+
                                        </Badge>
                                      )}
                                      <Badge variant="secondary" className="text-[10px]">
                                        {areaProfiles.length} bud
                                      </Badge>
                                    </div>
                                  </div>
                                  <div className="px-3 py-2">
                                    <div className="flex flex-wrap gap-1">
                                      {areaProfiles.map((profile) => (
                                        <Popover
                                          key={profile.id}
                                          open={openBidPopover === `${areaId}-${profile.id}`}
                                          onOpenChange={(open) =>
                                            setOpenBidPopover(open ? `${areaId}-${profile.id}` : null)
                                          }
                                        >
                                          <PopoverTrigger asChild>
                                            <Badge
                                              variant="outline"
                                              className="text-[11px] bg-background cursor-pointer hover:bg-primary hover:text-primary-foreground transition-colors"
                                            >
                                              {profile?.display_name}
                                              {!profile?.is_over_18 && area?.requires_18 && (
                                                <span className="ml-1 text-orange-500">!</span>
                                              )}
                                            </Badge>
                                          </PopoverTrigger>
                                          <PopoverContent className="w-64 p-0" align="start">
                                            <div className="px-3 py-2 border-b border-border bg-secondary/30">
                                              <p className="font-medium text-sm">{profile?.display_name}</p>
                                              <p className="text-xs text-muted-foreground">
                                                Tildel vagt i {area?.name}
                                              </p>
                                            </div>
                                            <div className="p-2">
                                              {areaShifts.length > 0 ? (
                                                <div className="space-y-1">
                                                  <p className="text-xs text-muted-foreground px-2 py-1">
                                                    Vælg tidsrum:
                                                  </p>
                                                  {areaShifts.map((shift) => {
                                                    const isAlreadyAssigned = shift.assignments?.some(
                                                      (a) => a.user_id === profile.id,
                                                    )
                                                    const assignedCount = shift.assignments?.length || 0
                                                    const isFull = assignedCount >= (shift.needed || 0)

return (
                                                      <Button
                                                        key={shift.id}
                                                        variant={isAlreadyAssigned ? "secondary" : "ghost"}
                                                        size="sm"
                                                        className="w-full justify-between text-xs h-auto py-2"
                                                        disabled={isAlreadyAssigned || isFull}
                                                        onClick={() =>
                                                          area && handleAssignFromBid(profile, area, shift.id)
                                                        }
                                                      >
                                                        <span className="flex items-center gap-2">
                                                          <Clock className="h-3 w-3" />
                                                          {formatTime(shift.start_time)} - {formatTime(shift.end_time)}
                                                        </span>
                                                        <span
                                                          className={`text-[10px] ${isFull ? "text-orange-500" : "text-muted-foreground"}`}
                                                        >
                                                          {isAlreadyAssigned ? (
                                                            <Check className="h-3 w-3 text-green-500" />
                                                          ) : (
                                                            `${assignedCount}/${shift.needed || 0}`
                                                          )}
                                                        </span>
                                                      </Button>
                                                    )
                                                  })}
                                                </div>
                                              ) : (
                                                <p className="text-xs text-muted-foreground text-center py-4">
                                                  Ingen tidsrum oprettet for dette område
                                                </p>
                                              )}
                                            </div>
                                          </PopoverContent>
                                        </Popover>
                                      ))}
                                    </div>
                                  </div>
                                </div>
                              )
                            })
                          })()}
                        </div>
                      </div>
                    )}
                  </>
                )}
              </CardContent>
            </Card>

{/* Areas */}
            <Card className="border-border bg-card">
              <CardHeader className="border-b border-border">
                <CardTitle className="text-foreground">Områder</CardTitle>
              </CardHeader>
              <CardContent className="pt-6 space-y-4">
                <div className="space-y-2">
                  <Label>Navn på område</Label>
                  <Input
                    value={areaName}
                    onChange={(e) => setAreaName(e.target.value)}
                    placeholder="Fx Bar, Garderobe"
                    className="bg-secondary border-border"
                    disabled={!selectedEventId}
                  />
                </div>
                <div className="space-y-2">
                  <Label>Ansvarlige</Label>
                  <div className="rounded-lg border border-border bg-secondary/50 p-2 max-h-32 overflow-y-auto">
                    {selectedAreaResponsibles.length > 0 && (
                      <div className="flex flex-wrap gap-1 mb-2">
                        {selectedAreaResponsibles.map((id) => {
                          const p = profiles?.find((pr) => pr.id === id)
                          return p ? (
                            <Badge key={id} variant="secondary" className="gap-1">
                              {p.display_name}
                              <button
                                onClick={() =>
                                  toggleResponsible(id, selectedAreaResponsibles, setSelectedAreaResponsibles)
                                }
                              >
                                <X className="h-3 w-3" />
                              </button>
                            </Badge>
                          ) : null
                        })}
                      </div>
                    )}
                    <div className="space-y-1">
                      {profiles
                        ?.filter((p) => !selectedAreaResponsibles.includes(p.id))
                        .slice(0, 10)
                        .map((p) => (
                          <button
                            key={p.id}
                            onClick={() =>
                              toggleResponsible(p.id, selectedAreaResponsibles, setSelectedAreaResponsibles)
                            }
                            className="w-full text-left text-xs px-2 py-1 rounded hover:bg-secondary transition-colors"
                            disabled={!selectedEventId}
                          >
                            {p.display_name}
                          </button>
                        ))}
                    </div>
                  </div>
                </div>
                <div className="flex items-center justify-between rounded-lg border border-border bg-secondary/50 p-3">
                  <div className="space-y-0.5">
                    <Label className="text-sm">Kræver 18+</Label>
                    <p className="text-xs text-muted-foreground">Kun for medlemmer over 18</p>
                  </div>
                  <Switch checked={areaRequires18} onCheckedChange={setAreaRequires18} disabled={!selectedEventId} />
                </div>
                <Button
                  onClick={handleCreateArea}
                  disabled={!selectedEventId || !areaName}
                  variant="outline"
                  className="w-full bg-transparent"
                >
                  <Plus className="mr-2 h-4 w-4" />
                  Tilføj område
                </Button>

<div className="space-y-2 max-h-40 overflow-y-auto">
                  {areas?.map((area) => (
                    <div
                      key={area.id}
                      className={`rounded-lg border p-2 text-sm transition-colors ${
                        selectedAreaId === area.id
                          ? "border-primary bg-primary/10"
                          : "border-border bg-secondary/50 hover:bg-secondary/70"
                      }`}
                    >
                      <div className="flex items-start justify-between">
                        <div className="flex-1 cursor-pointer" onClick={() => setSelectedAreaId(area.id)}>
                          <div className="flex items-center gap-2">
                            <p className="font-medium text-foreground">{area.name}</p>
                            {area.requires_18 && (
                              <Badge className="bg-amber-500/20 text-amber-500 dark:text-amber-400 text-[10px]">
                                18+
                              </Badge>
                            )}
                          </div>
                          <div className="flex flex-wrap gap-1 mt-1">
                            {area.responsibles.map((r) => (
                              <Badge key={r.user_id} variant="outline" className="text-[10px]">
                                {r.profile.display_name}
                              </Badge>
                            ))}
                          </div>
                        </div>
                        <div className="flex gap-1">
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-6 w-6"
                            onClick={(e) => {
                              e.stopPropagation()
                              openEditArea(area)
                            }}
                          >
                            <Edit2 className="h-3 w-3" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-6 w-6"
                            onClick={(e) => {
                              e.stopPropagation()
                              setDeleteAreaConfirm(area)
                            }}
                          >
                            <Trash2 className="h-3 w-3 text-destructive" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

{/* Shifts */}
            <Card className="border-border bg-card">
              <CardHeader className="border-b border-border">
                <CardTitle className="text-foreground">Vagter (Tidsrum)</CardTitle>
                {selectedArea?.requires_18 && (
                  <Badge className="bg-amber-500/20 text-amber-500 dark:text-amber-400 w-fit">18+ påkrævet</Badge>
                )}
              </CardHeader>
              <CardContent className="pt-6 space-y-4">
                <div className="grid grid-cols-2 gap-2">
                  <div className="space-y-1">
                    <Label className="text-xs">Start</Label>
                    <Input
                      type="datetime-local"
                      value={shiftStart}
                      onChange={(e) => setShiftStart(e.target.value)}
                      className="bg-secondary border-border text-xs"
                      disabled={!selectedAreaId}
                    />
                  </div>
                  <div className="space-y-1">
                    <Label className="text-xs">Slut</Label>
                    <Input
                      type="datetime-local"
                      value={shiftEnd}
                      onChange={(e) => setShiftEnd(e.target.value)}
                      className="bg-secondary border-border text-xs"
                      disabled={!selectedAreaId}
                    />
                  </div>
                </div>
                <div className="space-y-1">
                  <Label className="text-xs">Antal personer</Label>
                  <Input
                    type="number"
                    min="1"
                    value={shiftNeeded}
                    onChange={(e) => setShiftNeeded(e.target.value)}
                    className="bg-secondary border-border"
                    disabled={!selectedAreaId}
                  />
                </div>
                <Button
                  onClick={handleCreateShift}
                  disabled={!selectedAreaId || !shiftStart || !shiftEnd}
                  variant="outline"
                  className="w-full bg-transparent"
                >
                  <Plus className="mr-2 h-4 w-4" />
                  Tilføj vagt
                </Button>

<div className="space-y-2 max-h-52 overflow-y-auto">
                  {shifts?.map((shift) => (
                    <div key={shift.id} className="rounded-lg border border-border bg-secondary/50 p-3 text-sm">
                      <div className="flex items-center justify-between mb-2">
                        <p className="font-medium text-foreground">
                          {formatTime(shift.start_time)} - {formatTime(shift.end_time)}
                        </p>
                        <div className="flex gap-1">
                          <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => openEditShift(shift)}>
                            <Edit2 className="h-3 w-3" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-6 w-6"
                            onClick={() => setDeleteShiftConfirm(shift)}
                          >
                            <Trash2 className="h-3 w-3 text-destructive" />
                          </Button>
                        </div>
                      </div>
                      <p className="text-xs text-muted-foreground mb-2">
                        {shift.assignments.length}/{shift.needed} tildelt
                      </p>
                      <div className="space-y-1">
                        {shift.assignments.map((assignment) => (
                          <div
                            key={assignment.id}
                            className="flex items-center justify-between rounded bg-background border border-border px-2 py-1 text-xs"
                          >
                            <div className="flex items-center gap-2">
                              <span className="text-foreground">{assignment.profile?.display_name}</span>
                              {assignment.profile?.is_over_18 && (
                                <Badge className="bg-emerald-500/20 text-emerald-500 dark:text-emerald-400 text-[8px] px-1">
                                  18+
                                </Badge>
                              )}
                            </div>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-5 w-5"
                              onClick={() => handleRemoveAssignment(assignment.id)}
                            >
                              <Trash2 className="h-3 w-3 text-destructive" />
                            </Button>
                          </div>
                        ))}
                        {shift.assignments.length < shift.needed && (
                          <Select onValueChange={(odingUserId) => handleAssignUserWithChecks(shift.id, odingUserId)}>
                            <SelectTrigger className="h-7 bg-background border-border text-xs">
                              <SelectValue placeholder="Tilføj person..." />
                            </SelectTrigger>
                            <SelectContent>
                              {profiles
                                ?.filter((p) => !shift.assignments.some((a) => a.user_id === p.id))
                                .map((profile) => (
                                  <SelectItem key={profile.id} value={profile.id}>
                                    <div className="flex items-center gap-2">
                                      <span>{profile.display_name}</span>
                                      {profile.is_over_18 && (
                                        <Badge className="bg-emerald-500/20 text-emerald-500 dark:text-emerald-400 text-[8px] px-1">
                                          18+
                                        </Badge>
                                      )}
                                    </div>
                                  </SelectItem>
                                ))}
                            </SelectContent>
                          </Select>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

{/* Vouchers Tab */}
        <TabsContent value="vouchers">
          <VouchersTab currentUser={currentProfile} />
        </TabsContent>

{/* SmartVagtplan Tab */}
        <TabsContent value="smartvagtplan">
          <SmartVagtplan userId={userId} />
        </TabsContent>
  </Tabs>

{/* Edit User Dialog */}
  <Dialog open={!!editingUser} onOpenChange={(open) => !open && setEditingUser(null)}>
    <DialogContent className="max-w-2xl">
      <DialogHeader>
        <DialogTitle>Rediger bruger</DialogTitle>
        <DialogDescription>Opdater brugerens oplysninger</DialogDescription>
      </DialogHeader>
      <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>Navn</Label>
              <Input
                value={editUserName}
                onChange={(e) => setEditUserName(e.target.value)}
                className="bg-secondary border-border"
              />
            </div>
            <div className="space-y-2">
              <Label>Klasse</Label>
              <Input
                value={editUserClass}
                onChange={(e) => setEditUserClass(e.target.value)}
                placeholder="Fx 3.A"
                className="bg-secondary border-border"
              />
            </div>
            <div className="space-y-2">
              <Label>Rolle</Label>
              <Select value={editUserRole} onValueChange={(v) => setEditUserRole(v as UserRole)}>
                <SelectTrigger className="bg-secondary border-border">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {roles && roles.length > 0 ? (
                    roles.map(role => (
                      <SelectItem key={role.id} value={role.name}>
                        {role.display_name}
                      </SelectItem>
                    ))
                  ) : (
                    <>
                      <SelectItem value="member">Medlem</SelectItem>
                      <SelectItem value="admin">Admin</SelectItem>
                    </>
                  )}
                </SelectContent>
              </Select>
            </div>
            <div className="flex items-center justify-between rounded-lg border border-border bg-secondary/50 p-3">
              <div className="space-y-0.5">
                <Label className="text-sm">Over 18 år</Label>
                <p className="text-xs text-muted-foreground">Må arbejde i 18+ områder</p>
              </div>
              <Switch checked={editUserIs18} onCheckedChange={setEditUserIs18} />
            </div>
            <div className="space-y-2">
              <Label>Grupper</Label>
              <div className="rounded-lg border border-border bg-secondary/50 p-2 max-h-32 overflow-y-auto">
                {editUserGroupIds.length > 0 && (
                  <div className="flex flex-wrap gap-1 mb-2">
                    {editUserGroupIds.map((gid) => {
                      const group = groups?.find((g) => g.id === gid)
                      return group ? (
                        <Badge key={gid} variant="secondary" className="gap-1" style={{ borderColor: group.color, color: group.color }}>
                          {group.display_name}
                          <button onClick={() => setEditUserGroupIds(prev => prev.filter(id => id !== gid))}>
                            <X className="h-3 w-3" />
                          </button>
                        </Badge>
                      ) : null
                    })}
                  </div>
                )}
                <div className="space-y-1">
                  {groups?.filter(g => !editUserGroupIds.includes(g.id)).map((g) => (
                    <button
                      key={g.id}
                      onClick={() => setEditUserGroupIds(prev => [...prev, g.id])}
                      className="w-full text-left text-xs px-2 py-1 rounded hover:bg-secondary transition-colors"
                      style={{ color: g.color }}
                    >
                      {g.display_name}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setEditingUser(null)}>
              Annuller
            </Button>
            <Button onClick={handleUpdateUser} className="bg-primary text-primary-foreground">
              Gem ændringer
            </Button>
          </DialogFooter>
        </DialogContent>
  </Dialog>
  
  {/* Edit Event Dialog */}
  <Dialog open={!!editingEvent} onOpenChange={(open) => !open && setEditingEvent(null)}>
    <DialogContent className="max-w-2xl">
      <DialogHeader>
        <DialogTitle>Rediger arrangement</DialogTitle>
        <DialogDescription>Opdater arrangementets detaljer og synlighed</DialogDescription>
      </DialogHeader>
      <div className="space-y-4 py-4">
        <div className="space-y-2">
          <Label>Arrangementsnavn</Label>
          <Input
            value={editEventName}
            onChange={(e) => setEditEventName(e.target.value)}
            placeholder="Fx Fredagsbar"
            className="bg-secondary border-border"
          />
        </div>
        <div className="grid grid-cols-3 gap-4">
          <div className="space-y-2">
            <Label>Dato</Label>
            <Input
              type="date"
              value={editEventDate}
              onChange={(e) => setEditEventDate(e.target.value)}
              className="bg-secondary border-border"
            />
          </div>
          <div className="space-y-2">
            <Label>Starttidspunkt</Label>
            <Input
              type="time"
              value={editEventStartTime}
              onChange={(e) => setEditEventStartTime(e.target.value)}
              className="bg-secondary border-border"
            />
          </div>
          <div className="space-y-2">
            <Label>Sluttidspunkt</Label>
            <Input
              type="time"
              value={editEventEndTime}
              onChange={(e) => setEditEventEndTime(e.target.value)}
              className="bg-secondary border-border"
            />
          </div>
        </div>
        <div className="space-y-2">
          <Label>Lokation</Label>
          <Input
            value={editEventLocation}
            onChange={(e) => setEditEventLocation(e.target.value)}
            placeholder="Fx Aulaen"
            className="bg-secondary border-border"
          />
        </div>
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <Label>Synlighed</Label>
            <div className="flex items-center gap-2">
              <Switch 
                checked={editEventVisibleToAll} 
                onCheckedChange={setEditEventVisibleToAll}
              />
              <span className="text-xs text-muted-foreground">
                {editEventVisibleToAll ? "Alle" : "Kun valgte grupper"}
              </span>
            </div>
          </div>
          {!editEventVisibleToAll && groups && (
            <div className="rounded-lg border border-border bg-secondary/50 p-2 min-h-[60px]">
              {editEventGroupIds.length > 0 && (
                <div className="flex flex-wrap gap-1 mb-2">
                  {editEventGroupIds.map(gid => {
                    const group = groups?.find(g => g.id === gid)
                    return group ? (
                      <Badge 
                        key={gid} 
                        variant="secondary" 
                        className="gap-1"
                        style={{ borderColor: group.color, color: group.color }}
                      >
                        {group.display_name}
                        <button onClick={() => setEditEventGroupIds(prev => prev.filter(id => id !== gid))}>
                          <X className="h-3 w-3" />
                        </button>
                      </Badge>
                    ) : null
                  })}
                </div>
              )}
              <div className="space-y-1">
                {groups?.filter(g => !editEventGroupIds.includes(g.id)).map(group => (
                  <button
                    key={group.id}
                    onClick={() => setEditEventGroupIds(prev => [...prev, group.id])}
                    className="w-full text-left px-2 py-1 rounded hover:bg-secondary transition-colors text-sm"
                    style={{ color: group.color }}
                  >
                    {group.display_name}
                  </button>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
      <DialogFooter>
        <Button variant="outline" onClick={() => setEditingEvent(null)}>
          Annuller
        </Button>
        <Button onClick={handleUpdateEvent} className="bg-primary text-primary-foreground">
          Gem ændringer
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
  
  {/* Edit Area Dialog */}
      <Dialog open={!!editingArea} onOpenChange={(open) => !open && setEditingArea(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Rediger område</DialogTitle>
            <DialogDescription>Opdater områdets oplysninger</DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>Navn</Label>
              <Input
                value={editAreaName}
                onChange={(e) => setEditAreaName(e.target.value)}
                className="bg-secondary border-border"
              />
            </div>
            <div className="space-y-2">
              <Label>Ansvarlige</Label>
              <div className="rounded-lg border border-border bg-secondary/50 p-2 max-h-32 overflow-y-auto">
                {editAreaResponsibles.length > 0 && (
                  <div className="flex flex-wrap gap-1 mb-2">
                    {editAreaResponsibles.map((id) => {
                      const p = profiles?.find((pr) => pr.id === id)
                      return p ? (
                        <Badge key={id} variant="secondary" className="gap-1">
                          {p.display_name}
                          <button onClick={() => toggleResponsible(id, editAreaResponsibles, setEditAreaResponsibles)}>
                            <X className="h-3 w-3" />
                          </button>
                        </Badge>
                      ) : null
                    })}
                  </div>
                )}
                <div className="space-y-1">
                  {profiles
                    ?.filter((p) => !editAreaResponsibles.includes(p.id))
                    .slice(0, 10)
                    .map((p) => (
                      <button
                        key={p.id}
                        onClick={() => toggleResponsible(p.id, editAreaResponsibles, setEditAreaResponsibles)}
                        className="w-full text-left text-xs px-2 py-1 rounded hover:bg-secondary transition-colors"
                      >
                        {p.display_name}
                      </button>
                    ))}
                </div>
              </div>
            </div>
            <div className="flex items-center justify-between rounded-lg border border-border bg-secondary/50 p-3">
              <div className="space-y-0.5">
                <Label className="text-sm">Kræver 18+</Label>
                <p className="text-xs text-muted-foreground">Kun for medlemmer over 18</p>
              </div>
              <Switch checked={editAreaRequires18} onCheckedChange={setEditAreaRequires18} />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setEditingArea(null)}>
              Annuller
            </Button>
            <Button onClick={handleEditArea} className="bg-primary text-primary-foreground">
              Gem ændringer
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

<Dialog open={!!editingShift} onOpenChange={(open) => !open && setEditingShift(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Rediger tidsrum</DialogTitle>
            <DialogDescription>Opdater vagtens tidsrum og antal</DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>Start</Label>
              <Input
                type="datetime-local"
                value={editShiftStart}
                onChange={(e) => setEditShiftStart(e.target.value)}
                className="bg-secondary border-border"
              />
            </div>
            <div className="space-y-2">
              <Label>Slut</Label>
              <Input
                type="datetime-local"
                value={editShiftEnd}
                onChange={(e) => setEditShiftEnd(e.target.value)}
                className="bg-secondary border-border"
              />
            </div>
            <div className="space-y-2">
              <Label>Antal personer</Label>
              <Input
                type="number"
                min="1"
                value={editShiftNeeded}
                onChange={(e) => setEditShiftNeeded(e.target.value)}
                className="bg-secondary border-border"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setEditingShift(null)}>
              Annuller
            </Button>
            <Button onClick={handleEditShift} className="bg-primary text-primary-foreground">
              Gem ændringer
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* Delete User Confirmation */}
      <ConfirmDialog
        open={!!deleteUserConfirm}
        onOpenChange={(open) => !open && setDeleteUserConfirm(null)}
        title="Slet bruger"
        description={`Er du sikker på at du vil slette "${deleteUserConfirm?.display_name}"? Denne handling kan ikke fortrydes.`}
        confirmText="Slet bruger"
        variant="destructive"
        onConfirm={() => deleteUserConfirm && handleDeleteUser(deleteUserConfirm.id)}
      />

{/* Delete Event Confirmation */}
      <ConfirmDialog
        open={!!deleteEventConfirm}
        onOpenChange={(open) => !open && setDeleteEventConfirm(null)}
        title="Slet arrangement"
        description={`Er du sikker på at du vil slette "${deleteEventConfirm?.name}"? Alle områder og vagter vil også blive slettet.`}
        confirmText="Slet arrangement"
        variant="destructive"
        onConfirm={() => deleteEventConfirm && handleDeleteEvent(deleteEventConfirm.id)}
      />

{/* Delete Area Confirmation */}
      <ConfirmDialog
        open={!!deleteAreaConfirm}
        onOpenChange={(open) => !open && setDeleteAreaConfirm(null)}
        title="Slet område"
        description={`Er du sikker på at du vil slette "${deleteAreaConfirm?.name}"? Alle vagter i dette område vil også blive slettet.`}
        confirmText="Slet område"
        variant="destructive"
        onConfirm={() => deleteAreaConfirm && handleDeleteArea(deleteAreaConfirm.id)}
      />

<ConfirmDialog
        open={!!deleteShiftConfirm}
        onOpenChange={(open) => !open && setDeleteShiftConfirm(null)}
        title="Slet tidsrum"
        description={`Er du sikker på at du vil slette dette tidsrum? Alle tildelinger vil også blive slettet.`}
        confirmText="Slet tidsrum"
        variant="destructive"
        onConfirm={() => deleteShiftConfirm && handleDeleteShift(deleteShiftConfirm.id)}
      />

{/* Shift Conflict Warning */}
      <ConfirmDialog
        open={shiftConflictWarning?.show || false}
        onOpenChange={(open) => !open && setShiftConflictWarning(null)}
        title="Vagtkonflikt"
        description={`"${shiftConflictWarning?.userName}" har allerede en vagt i dette tidsrum:\n\n${shiftConflictWarning?.conflictingShifts.join("\n")}\n\nVil du stadig tildele vagten?`}
        confirmText="Tildel alligevel"
        variant="warning"
        onConfirm={() => {
          if (shiftConflictWarning) {
            handleAssignUser(shiftConflictWarning.shiftId, shiftConflictWarning.odingUserId)
          }
        }}
      />

{/* Age Restriction Warning */}
      <ConfirmDialog
        open={ageRestrictionWarning?.show || false}
        onOpenChange={(open) => !open && setAgeRestrictionWarning(null)}
        title="Aldersgrænse 18+"
        description={`Er du sikker på at du vil give "${ageRestrictionWarning?.userName}" vagten?\n\nOmrådet "${ageRestrictionWarning?.areaName}" kræver at medlemmer er 18+, og denne bruger er ikke markeret som 18+.`}
        confirmText="Tildel alligevel"
        variant="warning"
        onConfirm={() => {
          if (ageRestrictionWarning) {
            const conflicts = checkShiftConflicts(ageRestrictionWarning.shiftId, ageRestrictionWarning.odingUserId)
            if (conflicts.length > 0) {
              setShiftConflictWarning({
                show: true,
                shiftId: ageRestrictionWarning.shiftId,
                odingUserId: ageRestrictionWarning.odingUserId,
                userName: ageRestrictionWarning.userName,
                conflictingShifts: conflicts,
              })
            } else {
              handleAssignUser(ageRestrictionWarning.shiftId, ageRestrictionWarning.odingUserId)
            }
          }
        }}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/roles-groups-tab.tsx"
"use client"

import { useState } from "react"
import useSWR from "swr"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Plus, Shield, Users, Trash2, Edit } from "lucide-react"
import { createBrowserClient } from "@/lib/supabase/client"
import type { Role, Group, Profile, UserGroup } from "@/lib/types"
import { ConfirmDialog } from "./confirm-dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Checkbox } from "@/components/ui/checkbox"

interface RolesGroupsTabProps {
  currentUser: Profile
}

export function RolesGroupsTab({ currentUser }: RolesGroupsTabProps) {
  const supabase = createBrowserClient()
  
  const [newRole, setNewRole] = useState({
    name: "",
    display_name: "",
    color: "#3b82f6",
    priority: 10,
    can_manage_users: false,
    can_manage_events: false,
    can_manage_vouchers: false,
    can_manage_roles: false,
  })

const [newGroup, setNewGroup] = useState({
    name: "",
    display_name: "",
    description: "",
    color: "#6366f1",
  })

const [editingRole, setEditingRole] = useState<Role | null>(null)
  const [editingGroup, setEditingGroup] = useState<Group | null>(null)
  const [selectedGroup, setSelectedGroup] = useState<string | null>(null)
  const [deletingRole, setDeletingRole] = useState<Role | null>(null)
  const [deletingGroup, setDeletingGroup] = useState<Group | null>(null)
  const [creatingRole, setCreatingRole] = useState(false)
  const [creatingGroup, setCreatingGroup] = useState(false)

const { data: roles, mutate: mutateRoles } = useSWR<Role[]>("roles", async () => {
    const { data } = await supabase.from("roles").select("*").order("priority", { ascending: false })
    return data || []
  })

const { data: groups, mutate: mutateGroups } = useSWR<Group[]>("groups", async () => {
    const { data } = await supabase.from("groups").select("*").order("display_name")
    return data || []
  })

const { data: profiles } = useSWR<Profile[]>("profiles_with_roles", async () => {
    const { data } = await supabase
      .from("profiles")
      .select(`
        *,
        role_data:roles!profiles_role_id_fkey(*)
      `)
    return data || []
  })

const { data: userGroups, mutate: mutateUserGroups } = useSWR<UserGroup[]>(
    selectedGroup ? `user_groups_${selectedGroup}` : null,
    async () => {
      if (!selectedGroup) return []
      const { data } = await supabase
        .from("user_groups")
        .select("*, group:groups(*)")
        .eq("group_id", selectedGroup)
      return data || []
    }
  )

const handleCreateRole = async () => {
    if (!newRole.name || !newRole.display_name) return

setCreatingRole(true)
    const { error } = await supabase.from("roles").insert({
      ...newRole,
      name: newRole.name.toLowerCase().replace(/\s+/g, "_"),
    })

if (!error) {
      mutateRoles()
      setNewRole({
        name: "",
        display_name: "",
        color: "#3b82f6",
        priority: 10,
        can_manage_users: false,
        can_manage_events: false,
        can_manage_vouchers: false,
        can_manage_roles: false,
      })
    }
    setCreatingRole(false)
  }

const handleUpdateRole = async () => {
    if (!editingRole) return

const { error } = await supabase
      .from("roles")
      .update({
        display_name: editingRole.display_name,
        color: editingRole.color,
        priority: editingRole.priority,
        can_manage_users: editingRole.can_manage_users,
        can_manage_events: editingRole.can_manage_events,
        can_manage_vouchers: editingRole.can_manage_vouchers,
        can_manage_roles: editingRole.can_manage_roles,
      })
      .eq("id", editingRole.id)

if (!error) {
      mutateRoles()
      setEditingRole(null)
    }
  }

const handleDeleteRole = async (roleId: string) => {
    await supabase.from("roles").delete().eq("id", roleId)
    mutateRoles()
    setDeletingRole(null)
  }

const handleCreateGroup = async () => {
    if (!newGroup.name || !newGroup.display_name) return

setCreatingGroup(true)
    const { error } = await supabase.from("groups").insert({
      ...newGroup,
      name: newGroup.name.toLowerCase().replace(/\s+/g, "_"),
    })

if (!error) {
      mutateGroups()
      setNewGroup({
        name: "",
        display_name: "",
        description: "",
        color: "#6366f1",
      })
    }
    setCreatingGroup(false)
  }

const handleUpdateGroup = async () => {
    if (!editingGroup) return

const { error } = await supabase
      .from("groups")
      .update({
        display_name: editingGroup.display_name,
        description: editingGroup.description,
        color: editingGroup.color,
      })
      .eq("id", editingGroup.id)

if (!error) {
      mutateGroups()
      setEditingGroup(null)
    }
  }

const handleDeleteGroup = async (groupId: string) => {
    await supabase.from("user_groups").delete().eq("group_id", groupId)
    await supabase.from("groups").delete().eq("id", groupId)
    mutateGroups()
    if (selectedGroup === groupId) setSelectedGroup(null)
    setDeletingGroup(null)
  }

const handleToggleUserGroup = async (userId: string, groupId: string, isInGroup: boolean) => {
    if (isInGroup) {
      await supabase.from("user_groups").delete().match({ user_id: userId, group_id: groupId })
    } else {
      await supabase.from("user_groups").insert({ user_id: userId, group_id: groupId })
    }
    mutateUserGroups()
  }

return (
    <>
      <Tabs defaultValue="roles" className="w-full">
      <TabsList className="grid w-full grid-cols-2">
        <TabsTrigger value="roles">
          <Shield className="mr-2 h-4 w-4" />
          Roller
        </TabsTrigger>
        <TabsTrigger value="groups">
          <Users className="mr-2 h-4 w-4" />
          Grupper
        </TabsTrigger>
      </TabsList>

<TabsContent value="roles" className="space-y-6">
        {/* Create new role */}
        <Card>
          <CardHeader>
            <CardTitle>Opret Ny Rolle</CardTitle>
            <CardDescription>Definer en ny rolle med specifikke tilladelser</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label>Rolle ID</Label>
                <Input
                  value={newRole.name}
                  onChange={(e) => setNewRole({ ...newRole, name: e.target.value })}
                  placeholder="f.eks. kasserer"
                />
              </div>
              <div className="space-y-2">
                <Label>Visningsnavn</Label>
                <Input
                  value={newRole.display_name}
                  onChange={(e) => setNewRole({ ...newRole, display_name: e.target.value })}
                  placeholder="f.eks. Kasserer"
                />
              </div>
            </div>

<div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label>Farve</Label>
                <div className="flex gap-2">
                  <Input
                    type="color"
                    value={newRole.color}
                    onChange={(e) => setNewRole({ ...newRole, color: e.target.value })}
                    className="h-10 w-20"
                  />
                  <Input
                    value={newRole.color}
                    onChange={(e) => setNewRole({ ...newRole, color: e.target.value })}
                    className="flex-1"
                  />
                </div>
              </div>
              <div className="space-y-2">
                <Label>Prioritet (højere = flere rettigheder)</Label>
                <Input
                  type="number"
                  value={newRole.priority}
                  onChange={(e) => setNewRole({ ...newRole, priority: Number.parseInt(e.target.value) })}
                />
              </div>
            </div>

<div className="space-y-3">
              <Label>Tilladelser</Label>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label htmlFor="manage-users">Kan administrere brugere</Label>
                  <Switch
                    id="manage-users"
                    checked={newRole.can_manage_users}
                    onCheckedChange={(checked) => setNewRole({ ...newRole, can_manage_users: checked })}
                  />
                </div>
                <div className="flex items-center justify-between">
                  <Label htmlFor="manage-events">Kan administrere events</Label>
                  <Switch
                    id="manage-events"
                    checked={newRole.can_manage_events}
                    onCheckedChange={(checked) => setNewRole({ ...newRole, can_manage_events: checked })}
                  />
                </div>
                <div className="flex items-center justify-between">
                  <Label htmlFor="manage-vouchers">Kan administrere vouchers</Label>
                  <Switch
                    id="manage-vouchers"
                    checked={newRole.can_manage_vouchers}
                    onCheckedChange={(checked) => setNewRole({ ...newRole, can_manage_vouchers: checked })}
                  />
                </div>
                <div className="flex items-center justify-between">
                  <Label htmlFor="manage-roles">Kan administrere roller</Label>
                  <Switch
                    id="manage-roles"
                    checked={newRole.can_manage_roles}
                    onCheckedChange={(checked) => setNewRole({ ...newRole, can_manage_roles: checked })}
                  />
                </div>
              </div>
            </div>

<Button onClick={handleCreateRole} className="w-full">
              <Plus className="mr-2 h-4 w-4" />
              Opret Rolle
            </Button>
          </CardContent>
        </Card>

{/* Existing roles */}
        <Card>
          <CardHeader>
            <CardTitle>Eksisterende Roller</CardTitle>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Rolle</TableHead>
                  <TableHead>Prioritet</TableHead>
                  <TableHead>Tilladelser</TableHead>
                  <TableHead className="text-right">Handlinger</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {roles?.map((role) => (
                  <TableRow key={role.id}>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <div className="h-4 w-4 rounded" style={{ backgroundColor: role.color }} />
                        <div>
                          <p className="font-medium">{role.display_name}</p>
                          <p className="text-xs text-muted-foreground">{role.name}</p>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge variant="outline">{role.priority}</Badge>
                    </TableCell>
                    <TableCell>
                      <div className="flex flex-wrap gap-1">
                        {role.can_manage_users && <Badge variant="secondary" className="text-xs">Brugere</Badge>}
                        {role.can_manage_events && <Badge variant="secondary" className="text-xs">Events</Badge>}
                        {role.can_manage_vouchers && <Badge variant="secondary" className="text-xs">Vouchers</Badge>}
                        {role.can_manage_roles && <Badge variant="secondary" className="text-xs">Roller</Badge>}
                      </div>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-2">
                        <Dialog>
                          <DialogTrigger asChild>
                            <Button variant="outline" size="sm" onClick={() => setEditingRole(role)}>
                              <Edit className="h-3 w-3" />
                            </Button>
                          </DialogTrigger>
                          <DialogContent>
                            <DialogHeader>
                              <DialogTitle>Rediger Rolle</DialogTitle>
                            </DialogHeader>
                            {editingRole && editingRole.id === role.id && (
                              <div className="space-y-4">
                                <div className="space-y-2">
                                  <Label>Visningsnavn</Label>
                                  <Input
                                    value={editingRole.display_name}
                                    onChange={(e) => setEditingRole({ ...editingRole, display_name: e.target.value })}
                                  />
                                </div>
                                <div className="space-y-2">
                                  <Label>Farve</Label>
                                  <Input
                                    type="color"
                                    value={editingRole.color}
                                    onChange={(e) => setEditingRole({ ...editingRole, color: e.target.value })}
                                  />
                                </div>
                                <div className="space-y-2">
                                  <Label>Prioritet</Label>
                                  <Input
                                    type="number"
                                    value={editingRole.priority}
                                    onChange={(e) => setEditingRole({ ...editingRole, priority: Number.parseInt(e.target.value) })}
                                  />
                                </div>
                                <div className="space-y-2">
                                  <Label>Tilladelser</Label>
                                  <div className="space-y-2">
                                    <div className="flex items-center justify-between">
                                      <Label>Brugere</Label>
                                      <Switch
                                        checked={editingRole.can_manage_users}
                                        onCheckedChange={(checked) => setEditingRole({ ...editingRole, can_manage_users: checked })}
                                      />
                                    </div>
                                    <div className="flex items-center justify-between">
                                      <Label>Events</Label>
                                      <Switch
                                        checked={editingRole.can_manage_events}
                                        onCheckedChange={(checked) => setEditingRole({ ...editingRole, can_manage_events: checked })}
                                      />
                                    </div>
                                    <div className="flex items-center justify-between">
                                      <Label>Vouchers</Label>
                                      <Switch
                                        checked={editingRole.can_manage_vouchers}
                                        onCheckedChange={(checked) => setEditingRole({ ...editingRole, can_manage_vouchers: checked })}
                                      />
                                    </div>
                                    <div className="flex items-center justify-between">
                                      <Label>Roller</Label>
                                      <Switch
                                        checked={editingRole.can_manage_roles}
                                        onCheckedChange={(checked) => setEditingRole({ ...editingRole, can_manage_roles: checked })}
                                      />
                                    </div>
                                  </div>
                                </div>
                                <Button onClick={handleUpdateRole} className="w-full">
                                  Gem Ændringer
                                </Button>
                              </div>
                            )}
                          </DialogContent>
                        </Dialog>
                        <Button
                          variant="destructive"
                          size="sm"
                          onClick={() => setDeletingRole(role)}
                        >
                          <Trash2 className="h-3 w-3" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </TabsContent>

<TabsContent value="groups" className="space-y-6">
        {/* Create new group */}
        <Card>
          <CardHeader>
            <CardTitle>Opret Ny Gruppe/Udvalg</CardTitle>
            <CardDescription>Opret grupper som Festudvalg, Aktivitetsudvalg osv.</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label>Gruppe ID</Label>
                <Input
                  value={newGroup.name}
                  onChange={(e) => setNewGroup({ ...newGroup, name: e.target.value })}
                  placeholder="f.eks. musikudvalg"
                />
              </div>
              <div className="space-y-2">
                <Label>Visningsnavn</Label>
                <Input
                  value={newGroup.display_name}
                  onChange={(e) => setNewGroup({ ...newGroup, display_name: e.target.value })}
                  placeholder="f.eks. Musikudvalget"
                />
              </div>
            </div>

<div className="space-y-2">
              <Label>Beskrivelse</Label>
              <Input
                value={newGroup.description}
                onChange={(e) => setNewGroup({ ...newGroup, description: e.target.value })}
                placeholder="Kort beskrivelse af gruppen"
              />
            </div>

<div className="space-y-2">
              <Label>Farve</Label>
              <div className="flex gap-2">
                <Input
                  type="color"
                  value={newGroup.color}
                  onChange={(e) => setNewGroup({ ...newGroup, color: e.target.value })}
                  className="h-10 w-20"
                />
                <Input
                  value={newGroup.color}
                  onChange={(e) => setNewGroup({ ...newGroup, color: e.target.value })}
                  className="flex-1"
                />
              </div>
            </div>

<Button onClick={handleCreateGroup} className="w-full">
              <Plus className="mr-2 h-4 w-4" />
              Opret Gruppe
            </Button>
          </CardContent>
        </Card>

{/* Existing groups */}
        <Card>
          <CardHeader>
            <CardTitle>Eksisterende Grupper</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {groups?.length === 0 && (
              <p className="text-sm text-muted-foreground py-4 text-center">Ingen grupper oprettet endnu</p>
            )}
            {groups?.map((group) => (
              <div key={group.id} className="rounded-lg border border-border">
                <div className="flex items-center justify-between p-4">
                  <div className="flex items-center gap-3">
                    <div className="h-8 w-8 rounded shrink-0" style={{ backgroundColor: group.color }} />
                    <div>
                      <p className="font-medium">{group.display_name}</p>
                      {group.description && <p className="text-xs text-muted-foreground">{group.description}</p>}
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Dialog>
                      <DialogTrigger asChild>
                        <Button variant="outline" size="sm" onClick={() => setEditingGroup(group)}>
                          <Edit className="h-3 w-3" />
                        </Button>
                      </DialogTrigger>
                      <DialogContent>
                        <DialogHeader>
                          <DialogTitle>Rediger Gruppe</DialogTitle>
                        </DialogHeader>
                        {editingGroup && editingGroup.id === group.id && (
                          <div className="space-y-4">
                            <div className="space-y-2">
                              <Label>Visningsnavn</Label>
                              <Input
                                value={editingGroup.display_name}
                                onChange={(e) => setEditingGroup({ ...editingGroup, display_name: e.target.value })}
                              />
                            </div>
                            <div className="space-y-2">
                              <Label>Beskrivelse</Label>
                              <Input
                                value={editingGroup.description ?? ""}
                                onChange={(e) => setEditingGroup({ ...editingGroup, description: e.target.value })}
                              />
                            </div>
                            <div className="space-y-2">
                              <Label>Farve</Label>
                              <Input
                                type="color"
                                value={editingGroup.color}
                                onChange={(e) => setEditingGroup({ ...editingGroup, color: e.target.value })}
                              />
                            </div>
                            <Button onClick={handleUpdateGroup} className="w-full">
                              Gem Ændringer
                            </Button>
                          </div>
                        )}
                      </DialogContent>
                    </Dialog>
                    <Button variant="destructive" size="sm" onClick={() => setDeletingGroup(group)}>
                      <Trash2 className="h-3 w-3" />
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setSelectedGroup(group.id === selectedGroup ? null : group.id)}
                    >
                      {group.id === selectedGroup ? "Skjul" : "Vis Medlemmer"}
                    </Button>
                  </div>
                </div>
                {selectedGroup === group.id && (
                  <div className="border-t border-border">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Bruger</TableHead>
                          <TableHead>Rolle</TableHead>
                          <TableHead className="text-right">I gruppe</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {profiles?.map((profile) => {
                          const isInGroup = userGroups?.some((ug) => ug.user_id === profile.id)
                          return (
                            <TableRow key={profile.id}>
                              <TableCell>
                                <div className="flex items-center gap-2">
                                  <Avatar className="h-8 w-8">
                                    <AvatarImage src={profile.avatar_url || undefined} />
                                    <AvatarFallback>{profile.display_name?.charAt(0) || "?"}</AvatarFallback>
                                  </Avatar>
                                  <div>
                                    <p className="font-medium">{profile.display_name}</p>
                                    <p className="text-xs text-muted-foreground">{profile.class_name}</p>
                                  </div>
                                </div>
                              </TableCell>
                              <TableCell>
                                <Badge style={{ backgroundColor: profile.role_data?.color }}>
                                  {profile.role_data?.display_name || profile.role}
                                </Badge>
                              </TableCell>
                              <TableCell className="text-right">
                                <Checkbox
                                  checked={isInGroup}
                                  onCheckedChange={() => handleToggleUserGroup(profile.id, group.id, !!isInGroup)}
                                />
                              </TableCell>
                            </TableRow>
                          )
                        })}
                      </TableBody>
                    </Table>
                  </div>
                )}
              </div>
            ))}
          </CardContent>
        </Card>
      </TabsContent>
      </Tabs>

{/* Delete Role Confirmation */}
      <ConfirmDialog
        open={!!deletingRole}
        onOpenChange={(open) => !open && setDeletingRole(null)}
        title="Slet rolle?"
        description={`Er du sikker på at du vil slette rollen "${deletingRole?.display_name}"? Dette vil påvirke alle brugere med denne rolle.`}
        confirmText="Slet rolle"
        variant="destructive"
        onConfirm={() => deletingRole && handleDeleteRole(deletingRole.id)}
      />

{/* Delete Group Confirmation */}
      <ConfirmDialog
        open={!!deletingGroup}
        onOpenChange={(open) => !open && setDeletingGroup(null)}
        title="Slet gruppe?"
        description={`Er du sikker på at du vil slette gruppen "${deletingGroup?.display_name}"? Dette vil fjerne gruppetilknytninger fra events og brugere.`}
        confirmText="Slet gruppe"
        variant="destructive"
        onConfirm={() => deletingGroup && handleDeleteGroup(deletingGroup.id)}
      />
    </>
  )
}</article></body></html>