"use client"

import { useMemo } from "react"
import { useAuth } from "@/lib/auth-context"
import { CreateTicketForm } from "@/components/tickets/create-ticket-form"
import { TicketTable } from "@/components/tickets/ticket-table"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Ticket, Clock, CheckCircle2, AlertCircle } from "lucide-react"

export function TeacherDashboard() {
  const { user, tickets } = useAuth()

  const myTickets = useMemo(() => {
    return tickets
  }, [tickets])

  const stats = useMemo(() => {
    const open = myTickets.filter((t) => t.status === "OPEN").length
    const inProgress = myTickets.filter((t) => t.status === "IN_PROGRESS").length
    const done = myTickets.filter((t) => t.status === "CLOSED").length
    return { open, inProgress, done, total: myTickets.length }
  }, [myTickets])

  return (
    <div className="space-y-8">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Lehrkraft-Dashboard</h1>
        <p className="text-muted-foreground mt-1">Erstellen und verfolgen Sie Ihre IT-Support-Tickets</p>
      </div>

      <div className="grid gap-4 md:grid-cols-4">
        <Card className="border-border/60">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Tickets Gesamt</CardTitle>
            <Ticket className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.total}</div>
          </CardContent>
        </Card>
        <Card className="border-border/60">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Offen</CardTitle>
            <AlertCircle className="h-4 w-4 text-status-open-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-status-open-foreground">{stats.open}</div>
          </CardContent>
        </Card>
        <Card className="border-border/60">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">In Bearbeitung</CardTitle>
            <Clock className="h-4 w-4 text-status-progress-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-status-progress-foreground">{stats.inProgress}</div>
          </CardContent>
        </Card>
        <Card className="border-border/60">
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium text-muted-foreground">Erledigt</CardTitle>
            <CheckCircle2 className="h-4 w-4 text-status-done-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-status-done-foreground">{stats.done}</div>
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-8 lg:grid-cols-3">
        <div className="lg:col-span-1">
          <CreateTicketForm />
        </div>
        <div className="lg:col-span-2">
          <Card className="border-border/60">
            <CardHeader>
              <CardTitle className="text-xl">Meine Tickets</CardTitle>
              <CardDescription>Übersicht Ihrer gemeldeten Probleme</CardDescription>
            </CardHeader>
            <CardContent>
              <TicketTable tickets={myTickets} />
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}