"use client"

import { useAuth } from "@/lib/auth-context"
import { TicketTable } from "@/components/tickets/ticket-table"
import { RoomManagement } from "@/components/dashboard/room-management"
import { UserManagement } from "@/components/dashboard/user-management"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ShieldAlert, Users } from "lucide-react"

export function AdminDashboard() {
    const { tickets, updateTicketStatus, deleteTicket, authHeader } = useAuth()
    const API_URL = process.env.NEXT_PUBLIC_API_URL + "/api"

    return (
        <div className="space-y-8">
            <div>
                <h1 className="text-2xl font-semibold tracking-tight">Admin-Dashboard</h1>
                <p className="text-muted-foreground mt-1">Systemverwaltung und Ticket-Übersicht</p>
            </div>

            <div className="grid gap-4 md:grid-cols-2">
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Alle Tickets</CardTitle>
                        <ShieldAlert className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">{tickets.length}</div>
                        <p className="text-xs text-muted-foreground">Gesamt im System</p>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Systemstatus</CardTitle>
                        <Users className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">Aktiv</div>
                        <p className="text-xs text-muted-foreground">Admin-Modus</p>
                    </CardContent>
                </Card>
            </div>

            {/* User Management Section */}
            <Card>
                <CardHeader>
                    <CardTitle>Benutzerverwaltung</CardTitle>
                    <CardDescription>Rollen zuweisen und Nutzer verwalten</CardDescription>
                </CardHeader>
                <CardContent>
                    <UserManagement />
                </CardContent>
            </Card>

            <RoomManagement />

            <Card>
                <CardHeader>
                    <CardTitle>Ticket-Übersicht</CardTitle>
                    <CardDescription>Alle Tickets aller Nutzer</CardDescription>
                </CardHeader>
                <CardContent>
                    <TicketTable
                        tickets={tickets}
                        showStatusUpdate
                        onStatusUpdate={updateTicketStatus}
                        onDeleteTicket={deleteTicket}
                    />
                </CardContent>
            </Card>
        </div>
    )
}