"use client"

import { useAuth } from "@/lib/auth-context"
import { TicketTable } from "@/components/tickets/ticket-table"
import { RoomManagement } from "@/components/dashboard/room-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"

    // Admin sees all tickets (logic handled in Backend/TicketService)
    // We need to implement Ticket Delete logic passed to TicketTable or handle it inside TicketTable?
    // TicketTable doesn't have Delete button yet.
    // Actually, requirement says "Kann Tickets löschen". TicketTable needs a delete option or we add it.

    // Let's add delete to TicketTable? OR just add it to the Detail Dialog?
    // User asked "user with ID 1 = administrator... screen for creating/deleting/renaming rooms".
    // For tickets, "Can delete tickets".
    // I should probably add a Delete button in TicketTable (maybe only visible if onDelete is provided).

    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">System Status</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 Mode</p>
                    </CardContent>
                </Card>
            </div>

            <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>
    )
}