[V0_FILE]typescriptreact:file="app/dashboard/admin/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { FileText, Users, FolderOpen, User } from "lucide-react" export default function AdminDashboard() { return (

Admin Dashboard

Willkommen im Administrationsbereich. Hier können Sie alle Aspekte des Klassenverwaltungssystems verwalten.

Notizen

Gespeicherte Notizen

Klassenrat

Aktive Themen

Dateien

Hochgeladene Dateien

Privater Bereich

Private Notizen

Neueste Aktivitäten Die letzten Aktivitäten im System

Keine Aktivitäten vorhanden

System Status Aktuelle Systemstatistiken

Speicherplatz

45% genutzt

Benutzer online

Letzte Sicherung

Heute, 00:00

) } [V0_FILE]typescriptreact:file="app/dashboard/admin/notes/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Plus, Edit, Trash } from "lucide-react" import { useToast } from "@/hooks/use-toast" import { store, addTeacherNote, updateTeacherNote, deleteTeacherNote, type Note } from "@/lib/store" export default function NotesPage() { const [notes, setNotes] = useState([]) const [newNote, setNewNote] = useState({ title: "", content: "" }) const [editingNote, setEditingNote] = useState(null) const [isAdding, setIsAdding] = useState(false) const [isEditing, setIsEditing] = useState(false) const { toast } = useToast() // Lade die Notizen beim ersten Rendern useEffect(() => { setNotes(store.teacherNotes) }, []) const handleAddNote = () => { if (newNote.title.trim() === "" || newNote.content.trim() === "") { toast({ title: "Fehler", description: "Titel und Inhalt dürfen nicht leer sein.", variant: "destructive", }) return } const date = new Date() const formattedDate = `${date.getDate().toString().padStart(2, "0")}.${(date.getMonth() + 1).toString().padStart(2, "0")}.${date.getFullYear()}` const note: Note = { id: Date.now().toString(), title: newNote.title, content: newNote.content, date: formattedDate, } // Füge die Notiz zum Store hinzu und aktualisiere den lokalen Zustand const updatedNotes = addTeacherNote(note) setNotes(updatedNotes) setNewNote({ title: "", content: "" }) setIsAdding(false) toast({ title: "Notiz erstellt", description: "Die Notiz wurde erfolgreich erstellt und ist für Schüler sichtbar.", }) } const handleEditNote = () => { if (!editingNote) return if (editingNote.title.trim() === "" || editingNote.content.trim() === "") { toast({ title: "Fehler", description: "Titel und Inhalt dürfen nicht leer sein.", variant: "destructive", }) return } // Aktualisiere die Notiz im Store und im lokalen Zustand const updatedNotes = updateTeacherNote(editingNote.id, editingNote) setNotes(updatedNotes) setEditingNote(null) setIsEditing(false) toast({ title: "Notiz aktualisiert", description: "Die Notiz wurde erfolgreich aktualisiert.", }) } const handleDeleteNote = (id: string) => { // Lösche die Notiz aus dem Store und aktualisiere den lokalen Zustand const updatedNotes = deleteTeacherNote(id) setNotes(updatedNotes) toast({ title: "Notiz gelöscht", description: "Die Notiz wurde erfolgreich gelöscht.", }) } return (

Notizen

{isAdding && ( Neue Notiz erstellen Fügen Sie eine neue Notiz hinzu

setNewNote({ ...newNote, title: e.target.value })} className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50" />

setNewNote({ ...newNote, content: e.target.value })}
              />
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button
              variant="outline"
              onClick={() => setIsAdding(false)}
              className="border-brand-yellow/50 text-brand-yellow hover:bg-brand-yellow/10"
            >
              Abbrechen
            </Button>
            <Button onClick={handleAddNote} className="bg-brand-yellow text-black hover:bg-brand-yellow/90">
              Speichern
            </Button>
          </CardFooter>
        </Card>
      )}

{isEditing && editingNote && (
        <Card className="border-brand-yellow shadow-lg">
          <CardHeader className="bg-gradient-to-r from-brand-yellow/20 to-transparent">
            <CardTitle>Notiz bearbeiten</CardTitle>
            <CardDescription>Bearbeiten Sie die ausgewählte Notiz</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Input
                placeholder="Titel"
                value={editingNote.title}
                onChange={(e) => setEditingNote({ ...editingNote, title: e.target.value })}
                className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
              />
            </div>
            <div className="space-y-2">
              <Textarea
                placeholder="Inhalt"
                className="min-h-[150px] border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                value={editingNote.content}
                onChange={(e) => setEditingNote({ ...editingNote, content: e.target.value })}
              />
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button
              variant="outline"
              onClick={() => {
                setIsEditing(false)
                setEditingNote(null)
              }}
              className="border-brand-yellow/50 text-brand-yellow hover:bg-brand-yellow/10"
            >
              Abbrechen
            </Button>
            <Button onClick={handleEditNote} className="bg-brand-yellow text-black hover:bg-brand-yellow/90">
              Aktualisieren
            </Button>
          </CardFooter>
        </Card>
      )}

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {notes.map((note) => (
          <Card key={note.id} className="border-brand-blue border-l-4 hover:shadow-lg transition-shadow duration-200">
            <CardHeader className="bg-gradient-to-r from-brand-blue/10 to-transparent">
              <CardTitle className="text-brand-blue">{note.title}</CardTitle>
              <CardDescription>{note.date}</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="whitespace-pre-line">{note.content}</p>
            </CardContent>
            <CardFooter className="flex justify-end space-x-2">
              <Button
                variant="outline"
                size="icon"
                onClick={() => {
                  setEditingNote(note)
                  setIsEditing(true)
                }}
                className="border-brand-blue/50 text-brand-blue hover:bg-brand-blue/10"
              >
                <Edit className="h-4 w-4" />
              </Button>
              <Button
                variant="outline"
                size="icon"
                onClick={() => handleDeleteNote(note.id)}
                className="border-red-500/50 text-red-500 hover:bg-red-500/10"
              >
                <Trash className="h-4 w-4" />
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>

{notes.length === 0 && !isAdding && (
        <div className="text-center py-10 bg-gradient-to-r from-brand-blue/5 to-transparent rounded-lg border border-brand-blue/20 p-8">
          <p className="text-muted-foreground">Keine Notizen vorhanden. Erstellen Sie eine neue Notiz.</p>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/admin/council/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Plus, Edit, Trash } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { store, addCouncilItem, updateCouncilItem, deleteCouncilItem, type CouncilItem } from "@/lib/store"

export default function CouncilPage() {
  const [items, setItems] = useState<CouncilItem[]>([])
  const [newItem, setNewItem] = useState({ title: "", description: "", status: "offen" as const })
  const [editingItem, setEditingItem] = useState<CouncilItem | null>(null)
  const [isAdding, setIsAdding] = useState(false)
  const [isEditing, setIsEditing] = useState(false)

const { toast } = useToast()

// Lade die Klassenrat-Themen beim ersten Rendern
  useEffect(() => {
    setItems(store.councilItems)
  }, [])

const handleAddItem = () => {
    if (newItem.title.trim() === "" || newItem.description.trim() === "") {
      toast({
        title: "Fehler",
        description: "Titel und Beschreibung dürfen nicht leer sein.",
        variant: "destructive",
      })
      return
    }

const date = new Date()
    const formattedDate = `${date.getDate().toString().padStart(2, "0")}.${(date.getMonth() + 1).toString().padStart(2, "0")}.${date.getFullYear()}`

const item: CouncilItem = {
      id: Date.now().toString(),
      title: newItem.title,
      description: newItem.description,
      date: formattedDate,
      status: newItem.status,
    }

// Füge das Thema zum Store hinzu und aktualisiere den lokalen Zustand
    const updatedItems = addCouncilItem(item)
    setItems(updatedItems)

setNewItem({ title: "", description: "", status: "offen" })
    setIsAdding(false)

toast({
      title: "Klassenrat-Thema erstellt",
      description: "Das Thema wurde erfolgreich erstellt und ist für Schüler sichtbar.",
    })
  }

const handleEditItem = () => {
    if (!editingItem) return

if (editingItem.title.trim() === "" || editingItem.description.trim() === "") {
      toast({
        title: "Fehler",
        description: "Titel und Beschreibung dürfen nicht leer sein.",
        variant: "destructive",
      })
      return
    }

// Aktualisiere das Thema im Store und im lokalen Zustand
    const updatedItems = updateCouncilItem(editingItem.id, editingItem)
    setItems(updatedItems)

setEditingItem(null)
    setIsEditing(false)

toast({
      title: "Klassenrat-Thema aktualisiert",
      description: "Das Thema wurde erfolgreich aktualisiert.",
    })
  }

const handleDeleteItem = (id: string) => {
    // Lösche das Thema aus dem Store und aktualisiere den lokalen Zustand
    const updatedItems = deleteCouncilItem(id)
    setItems(updatedItems)

toast({
      title: "Klassenrat-Thema gelöscht",
      description: "Das Thema wurde erfolgreich gelöscht.",
    })
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "offen":
        return "bg-yellow-500"
      case "in Bearbeitung":
        return "bg-blue-500"
      case "abgeschlossen":
        return "bg-green-500"
      default:
        return "bg-gray-500"
    }
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-brand-yellow">Klassenrat</h1>
        <Button
          onClick={() => setIsAdding(true)}
          disabled={isAdding}
          className="bg-brand-yellow text-black hover:bg-brand-yellow/90"
        >
          <Plus className="mr-2 h-4 w-4" /> Neues Thema
        </Button>
      </div>

{isAdding && (
        <Card className="border-brand-yellow shadow-lg">
          <CardHeader className="bg-gradient-to-r from-brand-yellow/20 to-transparent">
            <CardTitle>Neues Klassenrat-Thema erstellen</CardTitle>
            <CardDescription>Fügen Sie ein neues Thema für den Klassenrat hinzu</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Input
                placeholder="Titel"
                value={newItem.title}
                onChange={(e) => setNewItem({ ...newItem, title: e.target.value })}
                className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
              />
            </div>
            <div className="space-y-2">
              <Textarea
                placeholder="Beschreibung"
                className="min-h-[150px] border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                value={newItem.description}
                onChange={(e) => setNewItem({ ...newItem, description: e.target.value })}
              />
            </div>
            <div className="space-y-2">
              <select
                className="w-full p-2 border rounded-md bg-background border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                value={newItem.status}
                onChange={(e) => setNewItem({ ...newItem, status: e.target.value as any })}
              >
                <option value="offen">Offen</option>
                <option value="in Bearbeitung">In Bearbeitung</option>
                <option value="abgeschlossen">Abgeschlossen</option>
              </select>
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button
              variant="outline"
              onClick={() => setIsAdding(false)}
              className="border-brand-yellow/50 text-brand-yellow hover:bg-brand-yellow/10"
            >
              Abbrechen
            </Button>
            <Button onClick={handleAddItem} className="bg-brand-yellow text-black hover:bg-brand-yellow/90">
              Speichern
            </Button>
          </CardFooter>
        </Card>
      )}

{isEditing && editingItem && (
        <Card className="border-brand-yellow shadow-lg">
          <CardHeader className="bg-gradient-to-r from-brand-yellow/20 to-transparent">
            <CardTitle>Klassenrat-Thema bearbeiten</CardTitle>
            <CardDescription>Bearbeiten Sie das ausgewählte Thema</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Input
                placeholder="Titel"
                value={editingItem.title}
                onChange={(e) => setEditingItem({ ...editingItem, title: e.target.value })}
                className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
              />
            </div>
            <div className="space-y-2">
              <Textarea
                placeholder="Beschreibung"
                className="min-h-[150px] border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                value={editingItem.description}
                onChange={(e) => setEditingItem({ ...editingItem, description: e.target.value })}
              />
            </div>
            <div className="space-y-2">
              <select
                className="w-full p-2 border rounded-md bg-background border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                value={editingItem.status}
                onChange={(e) => setEditingItem({ ...editingItem, status: e.target.value as any })}
              >
                <option value="offen">Offen</option>
                <option value="in Bearbeitung">In Bearbeitung</option>
                <option value="abgeschlossen">Abgeschlossen</option>
              </select>
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button
              variant="outline"
              onClick={() => {
                setIsEditing(false)
                setEditingItem(null)
              }}
              className="border-brand-yellow/50 text-brand-yellow hover:bg-brand-yellow/10"
            >
              Abbrechen
            </Button>
            <Button onClick={handleEditItem} className="bg-brand-yellow text-black hover:bg-brand-yellow/90">
              Aktualisieren
            </Button>
          </CardFooter>
        </Card>
      )}

<div className="grid gap-4 md:grid-cols-2">
        {items.map((item) => (
          <Card
            key={item.id}
            className="border-t-4 hover:shadow-lg transition-shadow duration-200"
            style={{ borderTopColor: getStatusColor(item.status).replace("bg-", "") }}
          >
            <CardHeader className="bg-gradient-to-r from-gray-100/10 to-transparent dark:from-gray-800/10">
              <div className="flex justify-between items-center">
                <CardTitle className="text-brand-yellow">{item.title}</CardTitle>
                <div className={`w-3 h-3 rounded-full ${getStatusColor(item.status)}`} />
              </div>
              <CardDescription>{item.date}</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="whitespace-pre-line">{item.description}</p>
              <div className="mt-4">
                <span className="inline-block px-2 py-1 text-xs rounded-full bg-secondary">{item.status}</span>
              </div>
            </CardContent>
            <CardFooter className="flex justify-end space-x-2">
              <Button
                variant="outline"
                size="icon"
                onClick={() => {
                  setEditingItem(item)
                  setIsEditing(true)
                }}
                className="border-brand-yellow/50 text-brand-yellow hover:bg-brand-yellow/10"
              >
                <Edit className="h-4 w-4" />
              </Button>
              <Button
                variant="outline"
                size="icon"
                onClick={() => handleDeleteItem(item.id)}
                className="border-red-500/50 text-red-500 hover:bg-red-500/10"
              >
                <Trash className="h-4 w-4" />
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>

{items.length === 0 && !isAdding && (
        <div className="text-center py-10 bg-gradient-to-r from-brand-yellow/5 to-transparent rounded-lg border border-brand-yellow/20 p-8">
          <p className="text-muted-foreground">Keine Klassenrat-Themen vorhanden. Erstellen Sie ein neues Thema.</p>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/admin/files/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Plus, FileText, Download, Trash } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface File {
  id: string
  name: string
  size: string
  type: string
  date: string
  url: string
}

export default function FilesPage() {
  const [files, setFiles] = useState<File[]>([])

const [isUploading, setIsUploading] = useState(false)
  const [uploadName, setUploadName] = useState("")
  const { toast } = useToast()
  const [selectedFile, setSelectedFile] = useState<File | null>(null)

const handleFileUpload = () => {
    if (!selectedFile) {
      toast({
        title: "Fehler",
        description: "Bitte wählen Sie eine Datei aus.",
        variant: "destructive",
      })
      return
    }

const date = new Date()
    const formattedDate = `${date.getDate().toString().padStart(2, "0")}.${(date.getMonth() + 1).toString().padStart(2, "0")}.${date.getFullYear()}`

const fileExtension = selectedFile.name.split(".").pop() || ""

const newFile: File = {
      id: Date.now().toString(),
      name: selectedFile.name,
      size: formatFileSize(selectedFile.size),
      type: fileExtension.toUpperCase(),
      date: formattedDate,
      url: URL.createObjectURL(selectedFile),
    }

setFiles([newFile, ...files])
    setSelectedFile(null)
    setUploadName("")
    setIsUploading(false)

toast({
      title: "Datei hochgeladen",
      description: "Die Datei wurde erfolgreich hochgeladen.",
    })
  }

const formatFileSize = (bytes: number): string => {
    if (bytes === 0) return "0 Bytes"

const k = 1024
    const sizes = ["Bytes", "KB", "MB", "GB"]
    const i = Math.floor(Math.log(bytes) / Math.log(k))

return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i]
  }

const handleDeleteFile = (id: string) => {
    setFiles(files.filter((file) => file.id !== id))

toast({
      title: "Datei gelöscht",
      description: "Die Datei wurde erfolgreich gelöscht.",
    })
  }

const getFileIcon = (type: string) => {
    return <FileText className="h-6 w-6" />
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">Dateien</h1>
        <Button onClick={() => setIsUploading(true)} disabled={isUploading}>
          <Plus className="mr-2 h-4 w-4" /> Datei hochladen
        </Button>
      </div>

{isUploading && (
        <Card>
          <CardHeader>
            <CardTitle>Datei hochladen</CardTitle>
            <CardDescription>Laden Sie eine neue Datei hoch</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Input
                placeholder="Dateiname (z.B. dokument.pdf)"
                value={uploadName}
                onChange={(e) => setUploadName(e.target.value)}
              />
            </div>
            <div className="border-2 border-dashed rounded-md p-6 text-center">
              <p className="text-muted-foreground">
                Ziehen Sie Dateien hierher oder klicken Sie, um Dateien auszuwählen
              </p>
              <Input
                type="file"
                className="mt-4"
                id="file-upload"
                onChange={(e) => {
                  if (e.target.files && e.target.files[0]) {
                    setSelectedFile(e.target.files[0])
                    setUploadName(e.target.files[0].name)
                  }
                }}
              />
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button
              variant="outline"
              onClick={() => {
                setIsUploading(false)
                setUploadName("")
              }}
            >
              Abbrechen
            </Button>
            <Button onClick={handleFileUpload}>Hochladen</Button>
          </CardFooter>
        </Card>
      )}

<div className="bg-card rounded-md border">
        <div className="grid grid-cols-12 p-4 font-medium border-b">
          <div className="col-span-6">Name</div>
          <div className="col-span-2">Größe</div>
          <div className="col-span-2">Typ</div>
          <div className="col-span-2">Datum</div>
        </div>

{files.map((file) => (
          <div key={file.id} className="grid grid-cols-12 p-4 items-center border-b hover:bg-muted/50">
            <div className="col-span-6 flex items-center">
              {getFileIcon(file.type)}
              <span className="ml-2">{file.name}</span>
            </div>
            <div className="col-span-2">{file.size}</div>
            <div className="col-span-2">{file.type}</div>
            <div className="col-span-1">{file.date}</div>
            <div className="col-span-1 flex justify-end space-x-2">
              <Button variant="ghost" size="icon">
                <Download className="h-4 w-4" />
              </Button>
              <Button variant="ghost" size="icon" onClick={() => handleDeleteFile(file.id)}>
                <Trash className="h-4 w-4" />
              </Button>
            </div>
          </div>
        ))}

{files.length === 0 && (
          <div className="text-center py-10">
            <p className="text-muted-foreground">Keine Dateien vorhanden. Laden Sie eine Datei hoch.</p>
          </div>
        )}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/admin/private/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Plus, Edit, Trash, Lock } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface PrivateNote {
  id: string
  title: string
  content: string
  date: string
}

export default function PrivatePage() {
  const [notes, setNotes] = useState<PrivateNote[]>([])

const [newNote, setNewNote] = useState({ title: "", content: "" })
  const [editingNote, setEditingNote] = useState<PrivateNote | null>(null)
  const [isAdding, setIsAdding] = useState(false)
  const [isEditing, setIsEditing] = useState(false)

const { toast } = useToast()

const handleAddNote = () => {
    if (newNote.title.trim() === "" || newNote.content.trim() === "") {
      toast({
        title: "Fehler",
        description: "Titel und Inhalt dürfen nicht leer sein.",
        variant: "destructive",
      })
      return
    }

const date = new Date()
    const formattedDate = `${date.getDate().toString().padStart(2, "0")}.${(date.getMonth() + 1).toString().padStart(2, "0")}.${date.getFullYear()}`

const note: PrivateNote = {
      id: Date.now().toString(),
      title: newNote.title,
      content: newNote.content,
      date: formattedDate,
    }

setNotes([note, ...notes])
    setNewNote({ title: "", content: "" })
    setIsAdding(false)

toast({
      title: "Private Notiz erstellt",
      description: "Die private Notiz wurde erfolgreich erstellt.",
    })
  }

const handleEditNote = () => {
    if (!editingNote) return

if (editingNote.title.trim() === "" || editingNote.content.trim() === "") {
      toast({
        title: "Fehler",
        description: "Titel und Inhalt dürfen nicht leer sein.",
        variant: "destructive",
      })
      return
    }

setNotes(notes.map((note) => (note.id === editingNote.id ? editingNote : note)))

setEditingNote(null)
    setIsEditing(false)

toast({
      title: "Private Notiz aktualisiert",
      description: "Die private Notiz wurde erfolgreich aktualisiert.",
    })
  }

const handleDeleteNote = (id: string) => {
    setNotes(notes.filter((note) => note.id !== id))

toast({
      title: "Private Notiz gelöscht",
      description: "Die private Notiz wurde erfolgreich gelöscht.",
    })
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div className="flex items-center">
          <h1 className="text-2xl font-bold">Privater Bereich</h1>
          <Lock className="ml-2 h-5 w-5 text-yellow-500" />
        </div>
        <Button onClick={() => setIsAdding(true)} disabled={isAdding}>
          <Plus className="mr-2 h-4 w-4" /> Neue private Notiz
        </Button>
      </div>

<p className="text-muted-foreground">
        Dieser Bereich ist nur für Sie sichtbar. Hier können Sie private Notizen und Informationen speichern.
      </p>

{isAdding && (
        <Card>
          <CardHeader>
            <CardTitle>Neue private Notiz erstellen</CardTitle>
            <CardDescription>Fügen Sie eine neue private Notiz hinzu</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Input
                placeholder="Titel"
                value={newNote.title}
                onChange={(e) => setNewNote({ ...newNote, title: e.target.value })}
              />
            </div>
            <div className="space-y-2">
              <Textarea
                placeholder="Inhalt"
                className="min-h-[150px]"
                value={newNote.content}
                onChange={(e) => setNewNote({ ...newNote, content: e.target.value })}
              />
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button variant="outline" onClick={() => setIsAdding(false)}>
              Abbrechen
            </Button>
            <Button onClick={handleAddNote}>Speichern</Button>
          </CardFooter>
        </Card>
      )}

{isEditing && editingNote && (
        <Card>
          <CardHeader>
            <CardTitle>Private Notiz bearbeiten</CardTitle>
            <CardDescription>Bearbeiten Sie die ausgewählte private Notiz</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Input
                placeholder="Titel"
                value={editingNote.title}
                onChange={(e) => setEditingNote({ ...editingNote, title: e.target.value })}
              />
            </div>
            <div className="space-y-2">
              <Textarea
                placeholder="Inhalt"
                className="min-h-[150px]"
                value={editingNote.content}
                onChange={(e) => setEditingNote({ ...editingNote, content: e.target.value })}
              />
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button
              variant="outline"
              onClick={() => {
                setIsEditing(false)
                setEditingNote(null)
              }}
            >
              Abbrechen
            </Button>
            <Button onClick={handleEditNote}>Aktualisieren</Button>
          </CardFooter>
        </Card>
      )}

<div className="grid gap-4 md:grid-cols-2">
        {notes.map((note) => (
          <Card key={note.id}>
            <CardHeader>
              <CardTitle>{note.title}</CardTitle>
              <CardDescription>{note.date}</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="whitespace-pre-line">{note.content}</p>
            </CardContent>
            <CardFooter className="flex justify-end space-x-2">
              <Button
                variant="outline"
                size="icon"
                onClick={() => {
                  setEditingNote(note)
                  setIsEditing(true)
                }}
              >
                <Edit className="h-4 w-4" />
              </Button>
              <Button variant="outline" size="icon" onClick={() => handleDeleteNote(note.id)}>
                <Trash className="h-4 w-4" />
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>

{notes.length === 0 && !isAdding && (
        <div className="text-center py-10">
          <p className="text-muted-foreground">
            Keine privaten Notizen vorhanden. Erstellen Sie eine neue private Notiz.
          </p>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/student/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { FileText, Users, FolderOpen } from "lucide-react"

export default function StudentDashboard() {
  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Schüler Dashboard</h1>
      <p className="text-muted-foreground">
        Willkommen im Schülerbereich. Hier können Sie auf Notizen, Klassenrat-Informationen und Dateien zugreifen.
      </p>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Notizen</CardTitle>
            <FileText className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">0</div>
            <p className="text-xs text-muted-foreground">Verfügbare Notizen</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Klassenrat</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">0</div>
            <p className="text-xs text-muted-foreground">Aktive Themen</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Dateien</CardTitle>
            <FolderOpen className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">0</div>
            <p className="text-xs text-muted-foreground">Verfügbare Dateien</p>
          </CardContent>
        </Card>
      </div>

<div className="grid gap-4 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Neueste Notizen</CardTitle>
            <CardDescription>Die neuesten Notizen</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-center py-6">
              <p className="text-muted-foreground">Keine Notizen vorhanden</p>
            </div>
          </CardContent>
        </Card>

<Card>
          <CardHeader>
            <CardTitle>Klassenrat Themen</CardTitle>
            <CardDescription>Aktuelle Themen im Klassenrat</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="text-center py-6">
              <p className="text-muted-foreground">Keine Klassenrat-Themen vorhanden</p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/student/notes/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { store } from "@/lib/store"

export default function StudentNotesPage() {
  const [notes, setNotes] = useState([])

// Lade die Notizen beim ersten Rendern
  useEffect(() => {
    setNotes(store.teacherNotes)
  }, [])

return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold text-brand-yellow">Notizen</h1>
      <p className="text-muted-foreground">Hier findest du alle Notizen, die vom Lehrer bereitgestellt wurden.</p>

{notes.length === 0 && (
        <div className="text-center py-10 bg-gradient-to-r from-brand-blue/5 to-transparent rounded-lg border border-brand-blue/20 p-8">
          <p className="text-muted-foreground">Keine Notizen vorhanden.</p>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/student/council/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { store } from "@/lib/store"

export default function StudentCouncilPage() {
  const [items, setItems] = useState([])

// Lade die Klassenrat-Themen beim ersten Rendern
  useEffect(() => {
    setItems(store.councilItems)
  }, [])

return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold text-brand-yellow">Klassenrat</h1>
      <p className="text-muted-foreground">Hier findest du alle aktuellen Themen des Klassenrats.</p>

{items.length === 0 && (
        <div className="text-center py-10 bg-gradient-to-r from-brand-yellow/5 to-transparent rounded-lg border border-brand-yellow/20 p-8">
          <p className="text-muted-foreground">Keine Klassenrat-Themen vorhanden.</p>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/student/files/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { FileText, Download, Plus, Trash } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface File {
  id: string
  name: string
  size: string
  type: string
  date: string
  url: string
  isStudent?: boolean
}

export default function StudentFilesPage() {
  const [files, setFiles] = useState<File[]>([])
  const [isUploading, setIsUploading] = useState(false)
  const [selectedFile, setSelectedFile] = useState<File | null>(null)
  const [uploadName, setUploadName] = useState("")
  const { toast } = useToast()

const formatFileSize = (bytes: number): string => {
    if (bytes === 0) return "0 Bytes"

const k = 1024
    const sizes = ["Bytes", "KB", "MB", "GB"]
    const i = Math.floor(Math.log(bytes) / Math.log(k))

return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i]
  }

const handleFileUpload = () => {
    if (!selectedFile) {
      toast({
        title: "Fehler",
        description: "Bitte wähle eine Datei aus.",
        variant: "destructive",
      })
      return
    }

const date = new Date()
    const formattedDate = `${date.getDate().toString().padStart(2, "0")}.${(date.getMonth() + 1).toString().padStart(2, "0")}.${date.getFullYear()}`

const fileExtension = selectedFile.name.split(".").pop() || ""

setFiles([newFile, ...files])
    setSelectedFile(null)
    setUploadName("")
    setIsUploading(false)

toast({
      title: "Datei hochgeladen",
      description: "Deine Datei wurde erfolgreich hochgeladen.",
    })
  }

const handleDeleteFile = (id: string) => {
    setFiles(files.filter((file) => file.id !== id))

toast({
      title: "Datei gelöscht",
      description: "Die Datei wurde erfolgreich gelöscht.",
    })
  }

const getFileIcon = (type: string) => {
    return <FileText className="h-6 w-6" />
  }

<p className="text-muted-foreground">
        Hier findest du alle Dateien, die vom Lehrer bereitgestellt wurden. Du kannst auch eigene Dateien hochladen.
      </p>

{isUploading && (
        <Card>
          <CardHeader>
            <CardTitle>Datei hochladen</CardTitle>
            <CardDescription>Lade eine neue Datei hoch</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="border-2 border-dashed rounded-md p-6 text-center">
              <p className="text-muted-foreground">Ziehe Dateien hierher oder klicke, um Dateien auszuwählen</p>
              <Input
                type="file"
                className="mt-4"
                id="file-upload"
                onChange={(e) => {
                  if (e.target.files && e.target.files[0]) {
                    setSelectedFile(e.target.files[0])
                    setUploadName(e.target.files[0].name)
                  }
                }}
              />
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button
              variant="outline"
              onClick={() => {
                setIsUploading(false)
                setSelectedFile(null)
                setUploadName("")
              }}
            >
              Abbrechen
            </Button>
            <Button onClick={handleFileUpload}>Hochladen</Button>
          </CardFooter>
        </Card>
      )}

{files.map((file) => (
          <div key={file.id} className="grid grid-cols-12 p-4 items-center border-b hover:bg-muted/50">
            <div className="col-span-6 flex items-center">
              {getFileIcon(file.type)}
              <span className="ml-2">
                {file.name}
                {file.isStudent && <span className="ml-2 text-xs text-blue-500">(Von dir)</span>}
              </span>
            </div>
            <div className="col-span-2">{file.size}</div>
            <div className="col-span-2">{file.type}</div>
            <div className="col-span-1">{file.date}</div>
            <div className="col-span-1 flex justify-end space-x-2">
              <Button variant="ghost" size="icon">
                <Download className="h-4 w-4" />
              </Button>
              {file.isStudent && (
                <Button variant="ghost" size="icon" onClick={() => handleDeleteFile(file.id)}>
                  <Trash className="h-4 w-4" />
                </Button>
              )}
            </div>
          </div>
        ))}

{files.length === 0 && (
          <div className="text-center py-10">
            <p className="text-muted-foreground">
              Keine Dateien vorhanden. Lade eine Datei hoch oder warte auf Dateien vom Lehrer.
            </p>
          </div>
        )}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

--card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

--popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

--primary: 47 100% 50%; /* Gelb als Primärfarbe */
    --primary-foreground: 240 5.9% 10%;

--secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

--muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

--accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

--border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 47 100% 50%; /* Gelb als Ring-Farbe */

--radius: 0.5rem;
  }

.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

--card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

--popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

--primary: 47 100% 50%; /* Gelb als Primärfarbe */
    --primary-foreground: 240 5.9% 10%;

--secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

--muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;

--accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

--border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 47 100% 50%; /* Gelb als Ring-Farbe */
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Farbenfrohe Anpassungen */
.card {
  @apply transition-all duration-300 hover:shadow-lg;
}

.button-primary {
  @apply bg-brand-yellow text-black hover:bg-brand-yellow/90;
}

.button-secondary {
  @apply bg-brand-blue text-white hover:bg-brand-blue/90;
}

.button-success {
  @apply bg-brand-green text-white hover:bg-brand-green/90;
}

.button-danger {
  @apply bg-brand-red text-white hover:bg-brand-red/90;
}

.gradient-bg {
  @apply bg-gradient-to-r from-brand-yellow/20 via-brand-blue/10 to-transparent;
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Klassenverwaltungssystem",
  description: "Ein System zur Verwaltung von Klasseninformationen",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="de" suppressHydrationWarning>
      <body className={`${inter.className} dark`}>
        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} disableTransitionOnChange>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes/dist/types"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

[V0_FILE]typescript:file="lib/utils.ts" isQuickEdit="true" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

[V0_FILE]typescript:file="hooks/use-toast.ts" isQuickEdit="true" isMerged="true"
// Simplified toast hook for the demo
export function useToast() {
  return {
    toast: ({ title, description, variant }: { title: string; description: string; variant?: string }) => {
      console.log(`Toast: ${title} - ${description} (${variant || "default"})`)
      // In a real app, this would show a toast notification
      alert(`${title}\n${description}`)
    },
  }
}

[V0_FILE]typescriptreact:file="app/dashboard/admin/student-notes/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Trash, Lock, Unlock } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface Note {
  id: string
  title: string
  content: string
  date: string
  studentName: string
  password?: string
  isLocked?: boolean
}

export default function StudentNotesPage() {
  // In a real app, this would be fetched from an API
  const [notes, setNotes] = useState<Note[]>([])
  const [viewPassword, setViewPassword] = useState<string>("")
  const [showPasswordInput, setShowPasswordInput] = useState<string | null>(null)

const { toast } = useToast()

const handleDeleteNote = (id: string) => {
    setNotes(notes.filter((note) => note.id !== id))

toast({
      title: "Notiz gelöscht",
      description: "Die Schülernotiz wurde erfolgreich gelöscht.",
    })
  }

const handleUnlockNote = (id: string) => {
    const note = notes.find((note) => note.id === id)

if (!note || !note.password) return

if (viewPassword !== note.password) {
      toast({
        title: "Falsches Passwort",
        description: "Das eingegebene Passwort ist falsch.",
        variant: "destructive",
      })
      return
    }

setNotes(notes.map((note) => (note.id === id ? { ...note, isLocked: false } : note)))

setShowPasswordInput(null)
    setViewPassword("")

toast({
      title: "Notiz entsperrt",
      description: "Die Notiz wurde erfolgreich entsperrt.",
    })
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">Schülernotizen</h1>
      </div>

<p className="text-muted-foreground">
        Hier sehen Sie alle Notizen, die von Schülern erstellt wurden. Sie können diese verwalten und bei Bedarf
        löschen. Passwortgeschützte Notizen können mit dem richtigen Passwort entsperrt werden.
      </p>

<div className="grid gap-4 md:grid-cols-2">
        {notes.map((note) => (
          <Card key={note.id}>
            <CardHeader>
              <div className="flex justify-between items-center">
                <CardTitle>{note.title}</CardTitle>
                {note.isLocked ? (
                  <Lock className="h-4 w-4 text-yellow-500" />
                ) : (
                  <Unlock className="h-4 w-4 text-green-500" />
                )}
              </div>
              <CardDescription>
                <div className="flex justify-between">
                  <span>Von: {note.studentName}</span>
                  <span>{note.date}</span>
                </div>
              </CardDescription>
            </CardHeader>
            <CardContent>
              {note.isLocked ? (
                <div className="text-center py-4">
                  {showPasswordInput === note.id ? (
                    <div className="space-y-4">
                      <p className="text-muted-foreground">Diese Notiz ist passwortgeschützt.</p>
                      <div className="flex space-x-2">
                        <Input
                          type="password"
                          placeholder="Passwort eingeben"
                          value={viewPassword}
                          onChange={(e) => setViewPassword(e.target.value)}
                        />
                        <Button onClick={() => handleUnlockNote(note.id)}>Entsperren</Button>
                      </div>
                    </div>
                  ) : (
                    <div>
                      <p className="text-muted-foreground mb-4">Diese Notiz ist passwortgeschützt.</p>
                      <Button onClick={() => setShowPasswordInput(note.id)}>Passwort eingeben</Button>
                    </div>
                  )}
                </div>
              ) : (
                <p className="whitespace-pre-line">{note.content}</p>
              )}
            </CardContent>
            <CardFooter className="flex justify-end">
              <Button variant="outline" size="icon" onClick={() => handleDeleteNote(note.id)}>
                <Trash className="h-4 w-4" />
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>

{notes.length === 0 && (
        <div className="text-center py-10">
          <p className="text-muted-foreground">Keine Schülernotizen vorhanden.</p>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/admin/chats/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Plus, MessageSquare, Lock, Unlock, Trash } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import Link from "next/link"
import { store, addChatRoom, updateChatRoom, deleteChatRoom, type ChatRoom } from "@/lib/store"

export default function ChatsPage() {
  const [chatRooms, setChatRooms] = useState<ChatRoom[]>([])
  const [isCreating, setIsCreating] = useState(false)
  const [newChat, setNewChat] = useState({ title: "", description: "" })

const { toast } = useToast()

// Lade die Chat-Räume beim ersten Rendern
  useEffect(() => {
    setChatRooms(store.chatRooms)
  }, [])

const handleCreateChat = () => {
    if (newChat.title.trim() === "" || newChat.description.trim() === "") {
      toast({
        title: "Fehler",
        description: "Titel und Beschreibung dürfen nicht leer sein.",
        variant: "destructive",
      })
      return
    }

const date = new Date()
    const formattedDate = `${date.getDate().toString().padStart(2, "0")}.${(date.getMonth() + 1).toString().padStart(2, "0")}.${date.getFullYear()}`

const chatRoom: ChatRoom = {
      id: Date.now().toString(),
      title: newChat.title,
      description: newChat.description,
      date: formattedDate,
      isOpen: true, // Chats sind standardmäßig geöffnet
      messageCount: 0,
    }

// Füge den Chat zum Store hinzu und aktualisiere den lokalen Zustand
    const updatedChats = addChatRoom(chatRoom)
    setChatRooms(updatedChats)

setNewChat({ title: "", description: "" })
    setIsCreating(false)

toast({
      title: "Chat erstellt",
      description: "Der Chat wurde erfolgreich erstellt und ist für Schüler sichtbar.",
    })
  }

const toggleChatStatus = (id: string) => {
    const chat = chatRooms.find((c) => c.id === id)
    if (!chat) return

const newStatus = !chat.isOpen

// Aktualisiere den Chat im Store und im lokalen Zustand
    const updatedChats = updateChatRoom(id, { isOpen: newStatus })
    setChatRooms(updatedChats)

toast({
      title: newStatus ? "Chat geöffnet" : "Chat geschlossen",
      description: `Der Chat "${chat.title}" wurde ${newStatus ? "geöffnet" : "geschlossen"} und ist ${newStatus ? "jetzt" : "nicht mehr"} für Schüler sichtbar.`,
    })
  }

const handleDeleteChat = (id: string) => {
    // Lösche den Chat aus dem Store und aktualisiere den lokalen Zustand
    const updatedChats = deleteChatRoom(id)
    setChatRooms(updatedChats)

toast({
      title: "Chat gelöscht",
      description: "Der Chat wurde erfolgreich gelöscht.",
    })
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-brand-yellow">Chat-Diskussionen</h1>
        <Button
          onClick={() => setIsCreating(true)}
          disabled={isCreating}
          className="bg-brand-yellow text-black hover:bg-brand-yellow/90"
        >
          <Plus className="mr-2 h-4 w-4" /> Neuen Chat erstellen
        </Button>
      </div>

<p className="text-muted-foreground">
        Hier können Sie Chat-Diskussionen zu verschiedenen Themen erstellen und verwalten. Schüler können in offenen
        Chats Nachrichten schreiben. Neue Chats sind automatisch für Schüler sichtbar.
      </p>

{isCreating && (
        <Card className="border-brand-yellow shadow-lg">
          <CardHeader className="bg-gradient-to-r from-brand-yellow/20 to-transparent">
            <CardTitle>Neuen Chat erstellen</CardTitle>
            <CardDescription>Erstellen Sie einen neuen Chat für eine Diskussion</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Input
                placeholder="Titel"
                value={newChat.title}
                onChange={(e) => setNewChat({ ...newChat, title: e.target.value })}
                className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
              />
            </div>
            <div className="space-y-2">
              <Input
                placeholder="Beschreibung"
                value={newChat.description}
                onChange={(e) => setNewChat({ ...newChat, description: e.target.value })}
                className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
              />
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button
              variant="outline"
              onClick={() => setIsCreating(false)}
              className="border-brand-yellow/50 text-brand-yellow hover:bg-brand-yellow/10"
            >
              Abbrechen
            </Button>
            <Button onClick={handleCreateChat} className="bg-brand-yellow text-black hover:bg-brand-yellow/90">
              Chat erstellen
            </Button>
          </CardFooter>
        </Card>
      )}

<div className="grid gap-4 md:grid-cols-2">
        {chatRooms.map((chat) => (
          <Card
            key={chat.id}
            className={`${chat.isOpen ? "border-brand-green border-l-4" : "border-brand-red border-l-4 opacity-75"} hover:shadow-lg transition-shadow duration-200`}
          >
            <CardHeader
              className={`bg-gradient-to-r ${chat.isOpen ? "from-brand-green/10" : "from-brand-red/10"} to-transparent`}
            >
              <div className="flex justify-between items-center">
                <CardTitle className="flex items-center">
                  <MessageSquare className={`mr-2 h-5 w-5 ${chat.isOpen ? "text-brand-green" : "text-brand-red"}`} />
                  {chat.title}
                </CardTitle>
                <div
                  className={`px-2 py-1 text-xs rounded-full ${chat.isOpen ? "bg-brand-green/20 text-brand-green" : "bg-brand-red/20 text-brand-red"}`}
                >
                  {chat.isOpen ? "Offen" : "Geschlossen"}
                </div>
              </div>
              <CardDescription>{chat.date}</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="mb-2">{chat.description}</p>
              <p className="text-sm text-muted-foreground">{chat.messageCount} Nachrichten</p>
            </CardContent>
            <CardFooter className="flex justify-between">
              <div>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => toggleChatStatus(chat.id)}
                  className={
                    chat.isOpen
                      ? "border-brand-red/50 text-brand-red hover:bg-brand-red/10"
                      : "border-brand-green/50 text-brand-green hover:bg-brand-green/10"
                  }
                >
                  {chat.isOpen ? (
                    <>
                      <Lock className="mr-2 h-4 w-4" />
                      Schließen
                    </>
                  ) : (
                    <>
                      <Unlock className="mr-2 h-4 w-4" />
                      Öffnen
                    </>
                  )}
                </Button>
              </div>
              <div className="flex space-x-2">
                <Link href={`/dashboard/admin/chats/${chat.id}`}>
                  <Button size="sm" className="bg-brand-blue text-white hover:bg-brand-blue/90">
                    Öffnen
                  </Button>
                </Link>
                <Button
                  variant="outline"
                  size="icon"
                  onClick={() => handleDeleteChat(chat.id)}
                  className="border-brand-red/50 text-brand-red hover:bg-brand-red/10"
                >
                  <Trash className="h-4 w-4" />
                </Button>
              </div>
            </CardFooter>
          </Card>
        ))}
      </div>

{chatRooms.length === 0 && !isCreating && (
        <div className="text-center py-10 bg-gradient-to-r from-brand-yellow/5 to-transparent rounded-lg border border-brand-yellow/20 p-8">
          <p className="text-muted-foreground">Keine Chat-Diskussionen vorhanden. Erstellen Sie einen neuen Chat.</p>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/student/chats/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { MessageSquare, Bell } from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { store, getChatMessages } from "@/lib/store"

export default function StudentChatsPage() {
  const [chatRooms, setChatRooms] = useState([])

// Lade die offenen Chat-Räume beim ersten Rendern
  useEffect(() => {
    // Filtere nur offene Chats
    const openChats = store.chatRooms
      .filter((chat) => chat.isOpen)
      .map((chat) => {
        const messages = getChatMessages(chat.id)
        // Prüfe, ob es neue Nachrichten vom Lehrer gibt
        const hasNewMessages = messages.some((msg) => msg.isTeacher)

return {
          ...chat,
          hasNewMessages,
        }
      })

setChatRooms(openChats)
  }, [])

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">Chat-Diskussionen</h1>
      </div>

<p className="text-muted-foreground">
        Hier findest du alle Chat-Diskussionen, die von deinem Lehrer erstellt wurden. Du kannst an offenen Chats
        teilnehmen.
      </p>

<div className="grid gap-4 md:grid-cols-2">
        {chatRooms.map((chat) => (
          <Card key={chat.id} className={chat.hasNewMessages ? "border-green-500 shadow-md" : ""}>
            <CardHeader>
              <div className="flex justify-between items-center">
                <CardTitle className="flex items-center">
                  <MessageSquare className="mr-2 h-5 w-5" />
                  {chat.title}
                  {chat.hasNewMessages && <Bell className="ml-2 h-4 w-4 text-green-500 animate-pulse" />}
                </CardTitle>
                <div className="px-2 py-1 text-xs rounded-full bg-green-500/20 text-green-500">Offen</div>
              </div>
              <CardDescription>{chat.date}</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="mb-2">{chat.description}</p>
              <p className="text-sm text-muted-foreground">{chat.messageCount} Nachrichten</p>
              {chat.hasNewMessages && (
                <p className="text-sm text-green-500 font-medium mt-2">Neue Nachrichten vom Lehrer!</p>
              )}
            </CardContent>
            <CardFooter className="flex justify-end">
              <Link href={`/dashboard/student/chats/${chat.id}`}>
                <Button size="sm" className={chat.hasNewMessages ? "bg-green-600 hover:bg-green-700" : ""}>
                  Teilnehmen
                </Button>
              </Link>
            </CardFooter>
          </Card>
        ))}
      </div>

{chatRooms.length === 0 && (
        <div className="text-center py-10">
          <p className="text-muted-foreground">Keine offenen Chat-Diskussionen vorhanden.</p>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/admin/private-files/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Plus, FileText, Download, Trash, Lock } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface File {
  id: string
  name: string
  size: string
  type: string
  date: string
  url: string
}

export default function PrivateFilesPage() {
  const [files, setFiles] = useState<File[]>([])

const [isUploading, setIsUploading] = useState(false)
  const [selectedFile, setSelectedFile] = useState<File | null>(null)
  const [uploadName, setUploadName] = useState("")
  const { toast } = useToast()

const formatFileSize = (bytes: number): string => {
    if (bytes === 0) return "0 Bytes"

const k = 1024
    const sizes = ["Bytes", "KB", "MB", "GB"]
    const i = Math.floor(Math.log(bytes) / Math.log(k))

return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i]
  }

const date = new Date()
    const formattedDate = `${date.getDate().toString().padStart(2, "0")}.${(date.getMonth() + 1).toString().padStart(2, "0")}.${date.getFullYear()}`

const fileExtension = selectedFile.name.split(".").pop() || ""

setFiles([newFile, ...files])
    setSelectedFile(null)
    setUploadName("")
    setIsUploading(false)

toast({
      title: "Private Datei hochgeladen",
      description: "Die private Datei wurde erfolgreich hochgeladen.",
    })
  }

const handleDeleteFile = (id: string) => {
    setFiles(files.filter((file) => file.id !== id))

toast({
      title: "Datei gelöscht",
      description: "Die Datei wurde erfolgreich gelöscht.",
    })
  }

const getFileIcon = (type: string) => {
    return <FileText className="h-6 w-6" />
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div className="flex items-center">
          <h1 className="text-2xl font-bold">Private Dateien</h1>
          <Lock className="ml-2 h-5 w-5 text-yellow-500" />
        </div>
        <Button onClick={() => setIsUploading(true)} disabled={isUploading}>
          <Plus className="mr-2 h-4 w-4" /> Datei hochladen
        </Button>
      </div>

<p className="text-muted-foreground">
        Dieser Bereich ist nur für Sie sichtbar. Hier können Sie private Dateien hochladen und verwalten, die für
        Schüler nicht zugänglich sind.
      </p>

{isUploading && (
        <Card>
          <CardHeader>
            <CardTitle>Private Datei hochladen</CardTitle>
            <CardDescription>Laden Sie eine neue private Datei hoch</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="border-2 border-dashed rounded-md p-6 text-center">
              <p className="text-muted-foreground">
                Ziehen Sie Dateien hierher oder klicken Sie, um Dateien auszuwählen
              </p>
              <Input
                type="file"
                className="mt-4"
                id="file-upload"
                onChange={(e) => {
                  if (e.target.files && e.target.files[0]) {
                    setSelectedFile(e.target.files[0])
                    setUploadName(e.target.files[0].name)
                  }
                }}
              />
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button
              variant="outline"
              onClick={() => {
                setIsUploading(false)
                setSelectedFile(null)
                setUploadName("")
              }}
            >
              Abbrechen
            </Button>
            <Button onClick={handleFileUpload}>Hochladen</Button>
          </CardFooter>
        </Card>
      )}

{files.length === 0 && (
          <div className="text-center py-10">
            <p className="text-muted-foreground">Keine privaten Dateien vorhanden. Laden Sie eine Datei hoch.</p>
          </div>
        )}
      </div>
    </div>
  )
}

[V0_FILE]typescript:file="tailwind.config.ts" isEdit="true" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        // Farben aus dem Logo und zusätzliche farbenfrohe Akzente
        brand: {
          yellow: "#FFD700", // Die gelbe Farbe aus dem Logo
          blue: "#4299E1", // Hellblau für Akzente
          green: "#48BB78", // Grün für Erfolg/Abgeschlossen
          red: "#F56565", // Rot für Fehler/Löschen
          purple: "#9F7AEA", // Lila für besondere Elemente
          orange: "#ED8936", // Orange für Warnungen
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export default function Home() {
  return (
    <div className="min-h-screen bg-background flex flex-col">
      <header className="border-b">
        <div className="container flex h-16 items-center px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-4">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/KLASSE-sK9czWdcQvhnTcLcnkEwQSSF46ghht.png"
              alt="Klasse Logo"
              width={40}
              height={40}
              className="rounded-full"
            />
            <h1 className="text-lg font-semibold">AB2B Klassenverwaltung</h1>
          </div>
        </div>
      </header>
      <main className="flex-1 container py-10 px-4 sm:px-6 lg:px-8">
        <div className="max-w-md mx-auto space-y-6">
          <div className="flex justify-center mb-8">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/KLASSE-sK9czWdcQvhnTcLcnkEwQSSF46ghht.png"
              alt="Klasse Logo"
              width={200}
              height={200}
              className="rounded-full"
            />
          </div>
          <Card className="w-full">
            <CardHeader>
              <CardTitle>Willkommen</CardTitle>
              <CardDescription>
                Bitte melden Sie sich an, um auf das Klassenverwaltungssystem zuzugreifen.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <p className="text-sm text-muted-foreground">Dieses System bietet Zugang zu:</p>
                <ul className="list-disc pl-5 text-sm text-muted-foreground space-y-1">
                  <li>Notizen</li>
                  <li>Klassenrat Informationen</li>
                  <li>Dateien für die Klasse</li>
                  <li>Privater Bereich für Lehrer</li>
                </ul>
              </div>
            </CardContent>
            <CardFooter>
              <div className="w-full space-y-2">
                <Link href="/login" className="w-full">
                  <Button className="w-full bg-brand-yellow text-black hover:bg-brand-yellow/90">Anmelden</Button>
                </Link>
              </div>
            </CardFooter>
          </Card>
        </div>
      </main>
      <footer className="border-t py-6">
        <div className="container flex flex-col items-center justify-between gap-4 md:flex-row">
          <p className="text-center text-sm text-muted-foreground md:text-left">
            © {new Date().getFullYear()} AB2B Klassenverwaltungssystem. Alle Rechte vorbehalten.
          </p>
        </div>
      </footer>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/student/settings/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/hooks/use-toast"
import { store } from "@/lib/store"

export default function StudentSettingsPage() {
  const [username, setUsername] = useState("")
  const [newUsername, setNewUsername] = useState("")
  const [usernamePassword, setUsernamePassword] = useState("")
  const [currentPassword, setCurrentPassword] = useState("")
  const [newPassword, setNewPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)

const { toast } = useToast()

useEffect(() => {
    // Setze den Benutzernamen, wenn ein Benutzer angemeldet ist
    if (store.currentUser) {
      setUsername(store.currentUser.username)
      setNewUsername(store.currentUser.username)
    }
  }, [])

const handleUpdateUsername = (e: React.FormEvent) => {
    e.preventDefault()

if (newUsername.trim() === "") {
      toast({
        title: "Fehler",
        description: "Der Benutzername darf nicht leer sein.",
        variant: "destructive",
      })
      return
    }

if (newUsername === username) {
      toast({
        title: "Hinweis",
        description: "Der neue Benutzername ist identisch mit dem aktuellen Namen.",
      })
      return
    }

setIsLoading(true)

// Versuche, den Benutzernamen zu ändern
    const result = store.changeUsername(username, newUsername, usernamePassword)

if (result.success) {
      toast({
        title: "Benutzername aktualisiert",
        description: result.message,
      })
      setUsername(newUsername)
      setUsernamePassword("")
    } else {
      toast({
        title: "Fehler",
        description: result.message,
        variant: "destructive",
      })
    }

setIsLoading(false)
  }

const handleUpdatePassword = (e: React.FormEvent) => {
    e.preventDefault()

if (newPassword !== confirmPassword) {
      toast({
        title: "Fehler",
        description: "Die Passwörter stimmen nicht überein.",
        variant: "destructive",
      })
      return
    }

setIsLoading(true)

// Versuche, das Passwort zu ändern
    const success = store.changePassword(username, currentPassword, newPassword)

if (success) {
      toast({
        title: "Passwort aktualisiert",
        description: "Dein Passwort wurde erfolgreich aktualisiert.",
      })
      setCurrentPassword("")
      setNewPassword("")
      setConfirmPassword("")
    } else {
      toast({
        title: "Fehler",
        description: "Das aktuelle Passwort ist nicht korrekt.",
        variant: "destructive",
      })
    }

setIsLoading(false)
  }

return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold text-brand-yellow">Einstellungen</h1>

<div className="grid gap-6">
        <Card className="border-brand-yellow shadow-lg">
          <CardHeader className="bg-gradient-to-r from-brand-yellow/20 to-transparent">
            <CardTitle>Benutzername ändern</CardTitle>
            <CardDescription>Ändere deinen Benutzernamen</CardDescription>
          </CardHeader>
          <form onSubmit={handleUpdateUsername}>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="current-username">Aktueller Benutzername</Label>
                <Input id="current-username" value={username} disabled className="bg-muted" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="new-username">Neuer Benutzername</Label>
                <Input
                  id="new-username"
                  value={newUsername}
                  onChange={(e) => setNewUsername(e.target.value)}
                  required
                  className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="username-password">Passwort zur Bestätigung</Label>
                <Input
                  id="username-password"
                  type="password"
                  value={usernamePassword}
                  onChange={(e) => setUsernamePassword(e.target.value)}
                  required
                  className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                />
              </div>
            </CardContent>
            <CardFooter>
              <Button
                type="submit"
                disabled={isLoading}
                className="bg-brand-yellow text-black hover:bg-brand-yellow/90"
              >
                {isLoading ? "Wird aktualisiert..." : "Benutzername aktualisieren"}
              </Button>
            </CardFooter>
          </form>
        </Card>

<Card className="border-brand-yellow shadow-lg">
          <CardHeader className="bg-gradient-to-r from-brand-yellow/20 to-transparent">
            <CardTitle>Passwort ändern</CardTitle>
            <CardDescription>Ändere dein Passwort</CardDescription>
          </CardHeader>
          <form onSubmit={handleUpdatePassword}>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="current-password">Aktuelles Passwort</Label>
                <Input
                  id="current-password"
                  type="password"
                  value={currentPassword}
                  onChange={(e) => setCurrentPassword(e.target.value)}
                  required
                  className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="new-password">Neues Passwort</Label>
                <Input
                  id="new-password"
                  type="password"
                  value={newPassword}
                  onChange={(e) => setNewPassword(e.target.value)}
                  required
                  className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="confirm-password">Passwort bestätigen</Label>
                <Input
                  id="confirm-password"
                  type="password"
                  value={confirmPassword}
                  onChange={(e) => setConfirmPassword(e.target.value)}
                  required
                  className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                />
              </div>
            </CardContent>
            <CardFooter>
              <Button
                type="submit"
                disabled={isLoading}
                className="bg-brand-yellow text-black hover:bg-brand-yellow/90"
              >
                {isLoading ? "Wird aktualisiert..." : "Passwort aktualisieren"}
              </Button>
            </CardFooter>
          </form>
        </Card>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/admin/settings/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/hooks/use-toast"
import { store } from "@/lib/store"

export default function SettingsPage() {
  const [username, setUsername] = useState(store.users.admin.username)
  const [newUsername, setNewUsername] = useState(store.users.admin.username)
  const [usernamePassword, setUsernamePassword] = useState("")
  const [currentPassword, setCurrentPassword] = useState("")
  const [newPassword, setNewPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)

const { toast } = useToast()

const handleUpdateUsername = (e: React.FormEvent) => {
    e.preventDefault()

if (newUsername.trim() === "") {
      toast({
        title: "Fehler",
        description: "Der Benutzername darf nicht leer sein.",
        variant: "destructive",
      })
      return
    }

if (newUsername === username) {
      toast({
        title: "Hinweis",
        description: "Der neue Benutzername ist identisch mit dem aktuellen Namen.",
      })
      return
    }

setIsLoading(true)

// Versuche, den Benutzernamen zu ändern
    const result = store.changeUsername(username, newUsername, usernamePassword)

setIsLoading(false)
  }

const handleUpdatePassword = (e: React.FormEvent) => {
    e.preventDefault()

setIsLoading(true)

// Versuche, das Passwort zu ändern
    const success = store.changePassword(username, currentPassword, newPassword)

if (success) {
      toast({
        title: "Passwort aktualisiert",
        description: "Ihr Passwort wurde erfolgreich aktualisiert.",
      })
      setCurrentPassword("")
      setNewPassword("")
      setConfirmPassword("")
    } else {
      toast({
        title: "Fehler",
        description: "Das aktuelle Passwort ist nicht korrekt.",
        variant: "destructive",
      })
    }

setIsLoading(false)
  }

return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold text-brand-yellow">Einstellungen</h1>

<div className="grid gap-6">
        <Card className="border-brand-yellow shadow-lg">
          <CardHeader className="bg-gradient-to-r from-brand-yellow/20 to-transparent">
            <CardTitle>Benutzername ändern</CardTitle>
            <CardDescription>Ändern Sie Ihren Benutzernamen</CardDescription>
          </CardHeader>
          <form onSubmit={handleUpdateUsername}>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="current-username">Aktueller Benutzername</Label>
                <Input id="current-username" value={username} disabled className="bg-muted" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="new-username">Neuer Benutzername</Label>
                <Input
                  id="new-username"
                  value={newUsername}
                  onChange={(e) => setNewUsername(e.target.value)}
                  required
                  className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="username-password">Passwort zur Bestätigung</Label>
                <Input
                  id="username-password"
                  type="password"
                  value={usernamePassword}
                  onChange={(e) => setUsernamePassword(e.target.value)}
                  required
                  className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                />
              </div>
            </CardContent>
            <CardFooter>
              <Button
                type="submit"
                disabled={isLoading}
                className="bg-brand-yellow text-black hover:bg-brand-yellow/90"
              >
                {isLoading ? "Wird aktualisiert..." : "Benutzername aktualisieren"}
              </Button>
            </CardFooter>
          </form>
        </Card>

<Card className="border-brand-yellow shadow-lg">
          <CardHeader className="bg-gradient-to-r from-brand-yellow/20 to-transparent">
            <CardTitle>Passwort ändern</CardTitle>
            <CardDescription>Ändern Sie Ihr Passwort</CardDescription>
          </CardHeader>
          <form onSubmit={handleUpdatePassword}>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="current-password">Aktuelles Passwort</Label>
                <Input
                  id="current-password"
                  type="password"
                  value={currentPassword}
                  onChange={(e) => setCurrentPassword(e.target.value)}
                  required
                  className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="new-password">Neues Passwort</Label>
                <Input
                  id="new-password"
                  type="password"
                  value={newPassword}
                  onChange={(e) => setNewPassword(e.target.value)}
                  required
                  className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="confirm-password">Passwort bestätigen</Label>
                <Input
                  id="confirm-password"
                  type="password"
                  value={confirmPassword}
                  onChange={(e) => setConfirmPassword(e.target.value)}
                  required
                  className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                />
              </div>
            </CardContent>
            <CardFooter>
              <Button
                type="submit"
                disabled={isLoading}
                className="bg-brand-yellow text-black hover:bg-brand-yellow/90"
              >
                {isLoading ? "Wird aktualisiert..." : "Passwort aktualisieren"}
              </Button>
            </CardFooter>
          </form>
        </Card>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isEdit="true" isMerged="true"
"use client"

import type { ReactNode } from "react"
import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { usePathname, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Menu, User, FileText, Users, Settings, LogOut, MessageSquare } from "lucide-react"

export default function DashboardLayout({
  children,
}: {
  children: ReactNode
}) {
  const [isAdmin, setIsAdmin] = useState(false)
  const pathname = usePathname()
  const router = useRouter()

useEffect(() => {
    // In a real app, this would check the user's session
    setIsAdmin(pathname.includes("/admin"))
  }, [pathname])

const handleLogout = () => {
    router.push("/login")
  }

const NavItems = () => (
    <div className="space-y-1">
      {isAdmin ? (
        <>
          <Link href="/dashboard/admin">
            <Button variant={pathname === "/dashboard/admin" ? "default" : "ghost"} className="w-full justify-start">
              <FileText className="mr-2 h-4 w-4" />
              Dashboard
            </Button>
          </Link>
          <Link href="/dashboard/admin/notes">
            <Button
              variant={pathname === "/dashboard/admin/notes" ? "default" : "ghost"}
              className="w-full justify-start"
            >
              <FileText className="mr-2 h-4 w-4" />
              Notizen
            </Button>
          </Link>
          <Link href="/dashboard/admin/student-notes">
            <Button
              variant={pathname.startsWith("/dashboard/admin/student-notes") ? "default" : "ghost"}
              className="w-full justify-start"
            >
              <FileText className="mr-2 h-4 w-4" />
              Schülernotizen
            </Button>
          </Link>
          <Link href="/dashboard/admin/council">
            <Button
              variant={pathname === "/dashboard/admin/council" ? "default" : "ghost"}
              className="w-full justify-start"
            >
              <Users className="mr-2 h-4 w-4" />
              Klassenrat
            </Button>
          </Link>
          <Link href="/dashboard/admin/chats">
            <Button
              variant={pathname.startsWith("/dashboard/admin/chats") ? "default" : "ghost"}
              className="w-full justify-start"
            >
              <MessageSquare className="mr-2 h-4 w-4" />
              Chats
            </Button>
          </Link>
          <Link href="/dashboard/admin/files">
            <Button
              variant={pathname === "/dashboard/admin/files" ? "default" : "ghost"}
              className="w-full justify-start"
            >
              <FileText className="mr-2 h-4 w-4" />
              Dateien
            </Button>
          </Link>
          <Link href="/dashboard/admin/private">
            <Button
              variant={pathname === "/dashboard/admin/private" ? "default" : "ghost"}
              className="w-full justify-start"
            >
              <User className="mr-2 h-4 w-4" />
              Privater Bereich
            </Button>
          </Link>
          <Link href="/dashboard/admin/private-files">
            <Button
              variant={pathname === "/dashboard/admin/private-files" ? "default" : "ghost"}
              className="w-full justify-start"
            >
              <FileText className="mr-2 h-4 w-4" />
              Private Dateien
            </Button>
          </Link>
          <Link href="/dashboard/admin/settings">
            <Button
              variant={pathname === "/dashboard/admin/settings" ? "default" : "ghost"}
              className="w-full justify-start"
            >
              <Settings className="mr-2 h-4 w-4" />
              Einstellungen
            </Button>
          </Link>
        </>
      ) : (
        <>
          <Link href="/dashboard/student">
            <Button variant={pathname === "/dashboard/student" ? "default" : "ghost"} className="w-full justify-start">
              <FileText className="mr-2 h-4 w-4" />
              Dashboard
            </Button>
          </Link>
          <Link href="/dashboard/student/notes">
            <Button
              variant={pathname === "/dashboard/student/notes" ? "default" : "ghost"}
              className="w-full justify-start"
            >
              <FileText className="mr-2 h-4 w-4" />
              Notizen
            </Button>
          </Link>
          <Link href="/dashboard/student/my-notes">
            <Button
              variant={pathname === "/dashboard/student/my-notes" ? "default" : "ghost"}
              className="w-full justify-start"
            >
              <FileText className="mr-2 h-4 w-4" />
              Meine Notizen
            </Button>
          </Link>
          <Link href="/dashboard/student/council">
            <Button
              variant={pathname === "/dashboard/student/council" ? "default" : "ghost"}
              className="w-full justify-start"
            >
              <Users className="mr-2 h-4 w-4" />
              Klassenrat
            </Button>
          </Link>
          <Link href="/dashboard/student/chats">
            <Button
              variant={pathname.startsWith("/dashboard/student/chats") ? "default" : "ghost"}
              className="w-full justify-start"
            >
              <MessageSquare className="mr-2 h-4 w-4" />
              Chats
            </Button>
          </Link>
          <Link href="/dashboard/student/files">
            <Button
              variant={pathname === "/dashboard/student/files" ? "default" : "ghost"}
              className="w-full justify-start"
            >
              <FileText className="mr-2 h-4 w-4" />
              Dateien
            </Button>
          </Link>
          <Link href="/dashboard/student/settings">
            <Button
              variant={pathname === "/dashboard/student/settings" ? "default" : "ghost"}
              className="w-full justify-start"
            >
              <Settings className="mr-2 h-4 w-4" />
              Einstellungen
            </Button>
          </Link>
        </>
      )}
      <Button variant="ghost" className="w-full justify-start text-brand-red" onClick={handleLogout}>
        <LogOut className="mr-2 h-4 w-4" />
        Abmelden
      </Button>
    </div>
  )

return (
    <div className="min-h-screen bg-background flex flex-col">
      <header className="border-b bg-gradient-to-r from-brand-yellow/10 to-transparent">
        <div className="container flex h-16 items-center px-4 sm:px-6 lg:px-8">
          <Sheet>
            <SheetTrigger asChild>
              <Button variant="outline" size="icon" className="mr-4 md:hidden">
                <Menu className="h-4 w-4" />
                <span className="sr-only">Toggle navigation menu</span>
              </Button>
            </SheetTrigger>
            <SheetContent side="left" className="w-64 bg-gradient-to-b from-brand-yellow/5 to-transparent">
              <div className="py-4">
                <div className="flex items-center justify-center mb-6">
                  <Image
                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/KLASSE-sK9czWdcQvhnTcLcnkEwQSSF46ghht.png"
                    alt="Klasse Logo"
                    width={100}
                    height={100}
                    className="rounded-full shadow-md"
                  />
                </div>
                <h2 className="text-lg font-semibold mb-4 text-brand-yellow">
                  {isAdmin ? "Admin Bereich" : "Schüler Bereich"}
                </h2>
                <NavItems />
              </div>
            </SheetContent>
          </Sheet>
          <div className="flex items-center gap-4">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/KLASSE-sK9czWdcQvhnTcLcnkEwQSSF46ghht.png"
              alt="Klasse Logo"
              width={40}
              height={40}
              className="rounded-full shadow-md hidden md:block"
            />
            <h1 className="text-lg font-semibold text-brand-yellow">AB2B Klassenverwaltung</h1>
          </div>
        </div>
      </header>
      <div className="flex-1 flex">
        <aside className="hidden md:flex w-64 flex-col border-r p-4 bg-gradient-to-b from-brand-yellow/5 to-transparent">
          <div className="flex items-center justify-center mb-6">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/KLASSE-sK9czWdcQvhnTcLcnkEwQSSF46ghht.png"
              alt="Klasse Logo"
              width={120}
              height={120}
              className="rounded-full shadow-md"
            />
          </div>
          <h2 className="text-lg font-semibold mb-4 text-brand-yellow">
            {isAdmin ? "Admin Bereich" : "Schüler Bereich"}
          </h2>
          <NavItems />
        </aside>
        <main className="flex-1 p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-transparent to-brand-yellow/5">
          {children}
        </main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/student/my-notes/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Plus, Edit, Trash, Lock, Unlock, Eye, EyeOff } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { store } from "@/lib/store"

interface Note {
  id: string
  title: string
  content: string
  date: string
  studentName: string
  password: string
  isLocked: boolean
}

export default function MyNotesPage() {
  const [notes, setNotes] = useState<Note[]>([])
  const [newNote, setNewNote] = useState({
    title: "",
    content: "",
    studentName: "",
    password: "",
    confirmPassword: "",
  })
  const [editingNote, setEditingNote] = useState<Note | null>(null)
  const [isAdding, setIsAdding] = useState(false)
  const [isEditing, setIsEditing] = useState(false)
  const [viewPassword, setViewPassword] = useState<string>("")
  const [showPasswordInput, setShowPasswordInput] = useState<string | null>(null)
  const [showPassword, setShowPassword] = useState(false)

const { toast } = useToast()

useEffect(() => {
    // Setze den Benutzernamen, wenn ein Benutzer angemeldet ist
    if (store.currentUser) {
      setNewNote((prev) => ({
        ...prev,
        studentName: store.currentUser?.username || "Schüler",
      }))
    }
  }, [])

if (newNote.password.trim() === "") {
      toast({
        title: "Fehler",
        description: "Bitte gib ein Passwort ein, um deine Notiz zu schützen.",
        variant: "destructive",
      })
      return
    }

if (newNote.password !== newNote.confirmPassword) {
      toast({
        title: "Fehler",
        description: "Die Passwörter stimmen nicht überein.",
        variant: "destructive",
      })
      return
    }

const date = new Date()
    const formattedDate = `${date.getDate().toString().padStart(2, "0")}.${(date.getMonth() + 1).toString().padStart(2, "0")}.${date.getFullYear()}`

const note: Note = {
      id: Date.now().toString(),
      title: newNote.title,
      content: newNote.content,
      date: formattedDate,
      studentName: newNote.studentName || store.currentUser?.username || "Schüler",
      password: newNote.password,
      isLocked: true,
    }

setNotes([note, ...notes])
    setNewNote({
      title: "",
      content: "",
      studentName: store.currentUser?.username || "Schüler",
      password: "",
      confirmPassword: "",
    })
    setIsAdding(false)

toast({
      title: "Notiz erstellt",
      description: "Deine Notiz wurde erfolgreich erstellt und mit einem Passwort geschützt.",
    })
  }

const handleEditNote = () => {
    if (!editingNote) return

setNotes(notes.map((note) => (note.id === editingNote.id ? editingNote : note)))

setEditingNote(null)
    setIsEditing(false)

toast({
      title: "Notiz aktualisiert",
      description: "Deine Notiz wurde erfolgreich aktualisiert.",
    })
  }

const handleDeleteNote = (id: string) => {
    setNotes(notes.filter((note) => note.id !== id))

toast({
      title: "Notiz gelöscht",
      description: "Die Notiz wurde erfolgreich gelöscht.",
    })
  }

const handleUnlockNote = (id: string) => {
    const note = notes.find((note) => note.id === id)

if (!note) return

setNotes(notes.map((note) => (note.id === id ? { ...note, isLocked: false } : note)))

setShowPasswordInput(null)
    setViewPassword("")

toast({
      title: "Notiz entsperrt",
      description: "Die Notiz wurde erfolgreich entsperrt.",
    })
  }

const handleLockNote = (id: string) => {
    setNotes(notes.map((note) => (note.id === id ? { ...note, isLocked: true } : note)))

toast({
      title: "Notiz gesperrt",
      description: "Die Notiz wurde erfolgreich gesperrt.",
    })
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-brand-yellow">Meine Notizen</h1>
        <Button
          onClick={() => setIsAdding(true)}
          disabled={isAdding}
          className="bg-brand-yellow text-black hover:bg-brand-yellow/90"
        >
          <Plus className="mr-2 h-4 w-4" /> Neue Notiz
        </Button>
      </div>

<p className="text-muted-foreground">
        Hier kannst du deine persönlichen Notizen erstellen und verwalten. Jede Notiz wird mit einem Passwort geschützt.
      </p>

{isAdding && (
        <Card className="border-brand-yellow shadow-lg">
          <CardHeader className="bg-gradient-to-r from-brand-yellow/20 to-transparent">
            <CardTitle>Neue Notiz erstellen</CardTitle>
            <CardDescription>Füge eine neue Notiz hinzu und schütze sie mit einem Passwort</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Input
                placeholder="Dein Name"
                value={newNote.studentName}
                onChange={(e) => setNewNote({ ...newNote, studentName: e.target.value })}
                className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
              />
            </div>
            <div className="space-y-2">
              <Input
                placeholder="Titel"
                value={newNote.title}
                onChange={(e) => setNewNote({ ...newNote, title: e.target.value })}
                className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
              />
            </div>
            <div className="space-y-2">
              <Textarea
                placeholder="Inhalt"
                className="min-h-[150px] border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                value={newNote.content}
                onChange={(e) => setNewNote({ ...newNote, content: e.target.value })}
              />
            </div>
            <div className="space-y-2">
              <div className="flex items-center space-x-2">
                <Input
                  type={showPassword ? "text" : "password"}
                  placeholder="Passwort"
                  value={newNote.password}
                  onChange={(e) => setNewNote({ ...newNote, password: e.target.value })}
                  className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                />
                <Button
                  variant="outline"
                  size="icon"
                  onClick={() => setShowPassword(!showPassword)}
                  type="button"
                  className="border-brand-yellow/50"
                >
                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </Button>
              </div>
            </div>
            <div className="space-y-2">
              <Input
                type={showPassword ? "text" : "password"}
                placeholder="Passwort bestätigen"
                value={newNote.confirmPassword}
                onChange={(e) => setNewNote({ ...newNote, confirmPassword: e.target.value })}
                className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
              />
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button
              variant="outline"
              onClick={() => setIsAdding(false)}
              className="border-brand-yellow/50 text-brand-yellow hover:bg-brand-yellow/10"
            >
              Abbrechen
            </Button>
            <Button onClick={handleAddNote} className="bg-brand-yellow text-black hover:bg-brand-yellow/90">
              Speichern
            </Button>
          </CardFooter>
        </Card>
      )}

{isEditing && editingNote && (
        <Card className="border-brand-yellow shadow-lg">
          <CardHeader className="bg-gradient-to-r from-brand-yellow/20 to-transparent">
            <CardTitle>Notiz bearbeiten</CardTitle>
            <CardDescription>Bearbeite deine Notiz</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Input
                placeholder="Titel"
                value={editingNote.title}
                onChange={(e) => setEditingNote({ ...editingNote, title: e.target.value })}
                className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
              />
            </div>
            <div className="space-y-2">
              <Textarea
                placeholder="Inhalt"
                className="min-h-[150px] border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
                value={editingNote.content}
                onChange={(e) => setEditingNote({ ...editingNote, content: e.target.value })}
              />
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button
              variant="outline"
              onClick={() => {
                setIsEditing(false)
                setEditingNote(null)
              }}
              className="border-brand-yellow/50 text-brand-yellow hover:bg-brand-yellow/10"
            >
              Abbrechen
            </Button>
            <Button onClick={handleEditNote} className="bg-brand-yellow text-black hover:bg-brand-yellow/90">
              Aktualisieren
            </Button>
          </CardFooter>
        </Card>
      )}

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {notes.map((note) => (
          <Card key={note.id} className="border-brand-purple border-l-4 hover:shadow-lg transition-shadow duration-200">
            <CardHeader className="bg-gradient-to-r from-brand-purple/10 to-transparent">
              <div className="flex justify-between items-center">
                <CardTitle className="text-brand-purple">{note.title}</CardTitle>
                {note.isLocked ? (
                  <Lock className="h-4 w-4 text-brand-yellow" />
                ) : (
                  <Unlock className="h-4 w-4 text-brand-green" />
                )}
              </div>
              <CardDescription>
                <div className="flex justify-between">
                  <span>{note.studentName}</span>
                  <span>{note.date}</span>
                </div>
              </CardDescription>
            </CardHeader>
            <CardContent>
              {note.isLocked ? (
                <div className="text-center py-4">
                  {showPasswordInput === note.id ? (
                    <div className="space-y-4">
                      <p className="text-muted-foreground">Diese Notiz ist passwortgeschützt.</p>
                      <div className="flex space-x-2">
                        <Input
                          type="password"
                          placeholder="Passwort eingeben"
                          value={viewPassword}
                          onChange={(e) => setViewPassword(e.target.value)}
                          className="border-brand-purple/50 focus-visible:ring-brand-purple/50"
                        />
                        <Button
                          onClick={() => handleUnlockNote(note.id)}
                          className="bg-brand-purple text-white hover:bg-brand-purple/90"
                        >
                          Entsperren
                        </Button>
                      </div>
                    </div>
                  ) : (
                    <div>
                      <p className="text-muted-foreground mb-4">Diese Notiz ist passwortgeschützt.</p>
                      <Button
                        onClick={() => setShowPasswordInput(note.id)}
                        className="bg-brand-purple text-white hover:bg-brand-purple/90"
                      >
                        Passwort eingeben
                      </Button>
                    </div>
                  )}
                </div>
              ) : (
                <>
                  <p className="whitespace-pre-line">{note.content}</p>
                </>
              )}
            </CardContent>
            <CardFooter className="flex justify-end space-x-2">
              {!note.isLocked && (
                <>
                  <Button
                    variant="outline"
                    size="icon"
                    onClick={() => {
                      setEditingNote(note)
                      setIsEditing(true)
                    }}
                    className="border-brand-purple/50 text-brand-purple hover:bg-brand-purple/10"
                  >
                    <Edit className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="outline"
                    size="icon"
                    onClick={() => handleLockNote(note.id)}
                    className="border-brand-yellow/50 text-brand-yellow hover:bg-brand-yellow/10"
                  >
                    <Lock className="h-4 w-4" />
                  </Button>
                </>
              )}
              <Button
                variant="outline"
                size="icon"
                onClick={() => handleDeleteNote(note.id)}
                className="border-brand-red/50 text-brand-red hover:bg-brand-red/10"
              >
                <Trash className="h-4 w-4" />
              </Button>
            </CardFooter>
          </Card>
        ))}
      </div>

{notes.length === 0 && !isAdding && (
        <div className="text-center py-10 bg-gradient-to-r from-brand-purple/5 to-transparent rounded-lg border border-brand-purple/20 p-8">
          <p className="text-muted-foreground">Keine Notizen vorhanden. Erstelle eine neue Notiz.</p>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useToast } from "@/hooks/use-toast"
import { store } from "@/lib/store"

export default function LoginPage() {
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()
  const { toast } = useToast()

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

try {
      // Admin Login
      if (username === store.users.admin.username && password === store.users.admin.password) {
        toast({
          title: "Erfolgreich angemeldet",
          description: "Willkommen zurück, Admin!",
        })
        router.push("/dashboard/admin")
        return
      }

// Schüler Login
      const studentUser = Object.values(store.users.students).find(
        (student) => student.username.toLowerCase() === username.toLowerCase(),
      )

if (studentUser && studentUser.password === password) {
        // Setze den aktuellen Benutzer im Store
        store.currentUser = {
          username: studentUser.username,
          isAdmin: false,
        }

toast({
          title: "Erfolgreich angemeldet",
          description: `Willkommen zurück, ${studentUser.username}!`,
        })
        router.push("/dashboard/student")
        return
      }

// Fehlgeschlagene Anmeldung
      toast({
        title: "Anmeldung fehlgeschlagen",
        description: "Ungültiger Benutzername oder Passwort.",
        variant: "destructive",
      })
    } catch (error) {
      toast({
        title: "Fehler",
        description: "Bei der Anmeldung ist ein Fehler aufgetreten.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4 bg-gradient-to-br from-brand-yellow/5 to-transparent">
      <Card className="w-full max-w-md border-brand-yellow shadow-lg">
        <CardHeader className="bg-gradient-to-r from-brand-yellow/20 to-transparent">
          <CardTitle className="text-brand-yellow">Anmelden</CardTitle>
          <CardDescription>Geben Sie Ihre Anmeldedaten ein, um auf das System zuzugreifen.</CardDescription>
        </CardHeader>
        <form onSubmit={handleLogin}>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="username">Benutzername</Label>
              <Input
                id="username"
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                required
                className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="password">Passwort</Label>
              <Input
                id="password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                className="border-brand-yellow/50 focus-visible:ring-brand-yellow/50"
              />
            </div>
            <div className="text-sm text-muted-foreground">
              <p>Verfügbare Benutzer:</p>
              <p>Admin: {store.users.admin.username}</p>
              <p>Schüler: schüler1 bis schüler17 / Sekro@2025</p>
            </div>
          </CardContent>
          <CardFooter>
            <Button
              type="submit"
              className="w-full bg-brand-yellow text-black hover:bg-brand-yellow/90"
              disabled={isLoading}
            >
              {isLoading ? "Anmeldung läuft..." : "Anmelden"}
            </Button>
          </CardFooter>
        </form>
      </Card>
    </div>
  )
}

[V0_FILE]typescript:file="lib/store.ts" isEdit="true"
// Zentraler Speicher für die Anwendungsdaten
// In einer echten Anwendung würde dies durch eine Datenbank ersetzt werden

// Benutzer-Daten
export interface User {
  username: string
  password: string
}

export interface CurrentUser {
  username: string
  isAdmin: boolean
}

// Chat-Daten
export interface ChatRoom {
  id: string
  title: string
  description: string
  date: string
  isOpen: boolean
  messageCount: number
}

export interface ChatMessage {
  id: string
  content: string
  sender: string
  timestamp: string
  isTeacher: boolean
  isEdited?: boolean
}

// Notizen-Daten
export interface Note {
  id: string
  title: string
  content: string
  date: string
}

export interface StudentNote {
  id: string
  title: string
  content: string
  date: string
  studentName: string
  password?: string
  isLocked?: boolean
}

// Klassenrat-Daten
export interface CouncilItem {
  id: string
  title: string
  description: string
  date: string
  status: "offen" | "in Bearbeitung" | "abgeschlossen"
}

// Erstelle 17 Schülerbenutzer
const createStudentUsers = () => {
  const students: Record<string, User> = {}
  for (let i = 1; i <= 17; i++) {
    const username = `schüler${i}`
    students[username] = {
      username,
      password: "Sekro@2025",
    }
  }
  return students
}

// Globale Datenspeicher
export const store = {
  users: {
    admin: {
      username: "Gafner",
      password: "Gafner@2025",
    },
    students: createStudentUsers(),
  },
  currentUser: null as CurrentUser | null,
  chatRooms: [] as ChatRoom[],
  chatMessages: {} as Record<string, ChatMessage[]>,
  teacherNotes: [] as Note[],
  studentNotes: [] as StudentNote[],
  councilItems: [] as CouncilItem[],

// Methode zum Ändern des Passworts
  changePassword(username: string, currentPassword: string, newPassword: string): boolean {
    // Admin Passwort ändern
    if (username === this.users.admin.username) {
      if (this.users.admin.password === currentPassword) {
        this.users.admin.password = newPassword
        return true
      }
      return false
    }

// Schüler Passwort ändern
    if (this.users.students[username]) {
      if (this.users.students[username].password === currentPassword) {
        this.users.students[username].password = newPassword
        return true
      }
      return false
    }

return false
  },

// Methode zum Ändern des Benutzernamens
  changeUsername(oldUsername: string, newUsername: string, password: string): { success: boolean; message: string } {
    // Prüfen, ob der neue Benutzername bereits existiert
    if (this.users.admin.username === newUsername || this.users.students[newUsername]) {
      return {
        success: false,
        message: "Dieser Benutzername ist bereits vergeben. Bitte wähle einen anderen Namen.",
      }
    }

// Admin Benutzername ändern
    if (oldUsername === this.users.admin.username) {
      if (this.users.admin.password === password) {
        this.users.admin.username = newUsername

// Aktualisiere den aktuellen Benutzer, falls angemeldet
        if (this.currentUser && this.currentUser.username === oldUsername) {
          this.currentUser.username = newUsername
        }

return {
          success: true,
          message: "Benutzername erfolgreich geändert.",
        }
      }
      return {
        success: false,
        message: "Das eingegebene Passwort ist nicht korrekt.",
      }
    }

// Schüler Benutzername ändern
    if (this.users.students[oldUsername]) {
      if (this.users.students[oldUsername].password === password) {
        // Erstelle einen neuen Eintrag mit dem neuen Benutzernamen
        this.users.students[newUsername] = {
          username: newUsername,
          password: this.users.students[oldUsername].password,
        }

// Lösche den alten Eintrag
        delete this.users.students[oldUsername]

// Aktualisiere den aktuellen Benutzer, falls angemeldet
        if (this.currentUser && this.currentUser.username === oldUsername) {
          this.currentUser.username = newUsername
        }

// Aktualisiere alle Nachrichten, die von diesem Benutzer gesendet wurden
        Object.keys(this.chatMessages).forEach((chatId) => {
          this.chatMessages[chatId] = this.chatMessages[chatId].map((message) => {
            if (message.sender === oldUsername) {
              return { ...message, sender: newUsername }
            }
            return message
          })
        })

// Aktualisiere alle Notizen, die von diesem Benutzer erstellt wurden
        this.studentNotes = this.studentNotes.map((note) => {
          if (note.studentName === oldUsername) {
            return { ...note, studentName: newUsername }
          }
          return note
        })

return {
      success: false,
      message: "Benutzer nicht gefunden.",
    }
  },
}

// Hilfsfunktionen für den Datenzugriff
export const addChatRoom = (chatRoom: ChatRoom) => {
  store.chatRooms = [chatRoom, ...store.chatRooms]
  return [...store.chatRooms]
}

export const updateChatRoom = (id: string, updates: Partial<ChatRoom>) => {
  store.chatRooms = store.chatRooms.map((chat) => (chat.id === id ? { ...chat, ...updates } : chat))
  return [...store.chatRooms]
}

export const deleteChatRoom = (id: string) => {
  store.chatRooms = store.chatRooms.filter((chat) => chat.id !== id)
  return [...store.chatRooms]
}

export const addChatMessage = (chatId: string, message: ChatMessage) => {
  if (!store.chatMessages[chatId]) {
    store.chatMessages[chatId] = []
  }
  store.chatMessages[chatId] = [...store.chatMessages[chatId], message]

// Aktualisiere die Nachrichtenanzahl im Chat
  const chatIndex = store.chatRooms.findIndex((chat) => chat.id === chatId)
  if (chatIndex !== -1) {
    store.chatRooms[chatIndex].messageCount = store.chatMessages[chatId].length
  }

return [...store.chatMessages[chatId]]
}

export const updateChatMessage = (chatId: string, messageId: string, updates: Partial<ChatMessage>) => {
  if (!store.chatMessages[chatId]) {
    return []
  }

store.chatMessages[chatId] = store.chatMessages[chatId].map((message) =>
    message.id === messageId ? { ...message, ...updates, isEdited: true } : message,
  )

return [...store.chatMessages[chatId]]
}

export const deleteChatMessage = (chatId: string, messageId: string) => {
  if (!store.chatMessages[chatId]) {
    return []
  }

store.chatMessages[chatId] = store.chatMessages[chatId].filter((message) => message.id !== messageId)

return [...store.chatMessages[chatId]]
}

export const getChatMessages = (chatId: string) => {
  return store.chatMessages[chatId] || []
}

export const addTeacherNote = (note: Note) => {
  store.teacherNotes = [note, ...store.teacherNotes]
  return [...store.teacherNotes]
}

export const updateTeacherNote = (id: string, updates: Partial<Note>) => {
  store.teacherNotes = store.teacherNotes.map((note) => (note.id === id ? { ...note, ...updates } : note))
  return [...store.teacherNotes]
}

export const deleteTeacherNote = (id: string) => {
  store.teacherNotes = store.teacherNotes.filter((note) => note.id !== id)
  return [...store.teacherNotes]
}

export const addStudentNote = (note: StudentNote) => {
  store.studentNotes = [note, ...store.studentNotes]
  return [...store.studentNotes]
}

export const updateStudentNote = (id: string, updates: Partial<StudentNote>) => {
  store.studentNotes = store.studentNotes.map((note) => (note.id === id ? { ...note, ...updates } : note))
  return [...store.studentNotes]
}

export const deleteStudentNote = (id: string) => {
  store.studentNotes = store.studentNotes.filter((note) => note.id !== id)
  return [...store.studentNotes]
}

export const addCouncilItem = (item: CouncilItem) => {
  store.councilItems = [item, ...store.councilItems]
  return [...store.councilItems]
}

export const updateCouncilItem = (id: string, updates: Partial<CouncilItem>) => {
  store.councilItems = store.councilItems.map((item) => (item.id === id ? { ...item, ...updates } : item))
  return [...store.councilItems]
}

export const deleteCouncilItem = (id: string) => {
  store.councilItems = store.councilItems.filter((item) => item.id !== id)
  return [...store.councilItems]
}

[V0_FILE]typescriptreact:file="app/dashboard/admin/chats/[id]/page.tsx" isEdit="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Send, ArrowLeft, Lock, Trash } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import Link from "next/link"
import {
  store,
  updateChatRoom,
  addChatMessage,
  getChatMessages,
  deleteChatMessage,
  type ChatMessage,
} from "@/lib/store"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"

export default function ChatRoomPage() {
  const params = useParams()
  const router = useRouter()
  const chatId = params.id as string

// Finde den Chat aus dem Store
  const [chat, setChat] = useState(() => store.chatRooms.find((c) => c.id === chatId))
  const [messages, setMessages] = useState<ChatMessage[]>([])
  const [newMessage, setNewMessage] = useState("")
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const { toast } = useToast()

// State für den Dialog zum Löschen von Nachrichten
  const [messageToDelete, setMessageToDelete] = useState<string | null>(null)
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)

// Lade den Chat und die Nachrichten beim ersten Rendern
  useEffect(() => {
    const currentChat = store.chatRooms.find((c) => c.id === chatId)
    if (!currentChat) {
      toast({
        title: "Chat nicht gefunden",
        description: "Der Chat existiert nicht oder wurde gelöscht.",
        variant: "destructive",
      })
      router.push("/dashboard/admin/chats")
      return
    }

setChat(currentChat)
    setMessages(getChatMessages(chatId))
  }, [chatId, router])

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

useEffect(() => {
    scrollToBottom()
  }, [messages])

const handleSendMessage = () => {
    if (!chat) return
    if (newMessage.trim() === "") return

if (!chat.isOpen) {
      toast({
        title: "Chat geschlossen",
        description: "Dieser Chat ist geschlossen und es können keine neuen Nachrichten gesendet werden.",
        variant: "destructive",
      })
      return
    }

const now = new Date()
    const formattedTime = `${now.getDate().toString().padStart(2, "0")}.${(now.getMonth() + 1).toString().padStart(2, "0")}.${now.getFullYear()}, ${now.getHours().toString().padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}`

const message: ChatMessage = {
      id: Date.now().toString(),
      content: newMessage,
      sender: store.users.admin.username,
      timestamp: formattedTime,
      isTeacher: true,
    }

// Füge die Nachricht zum Store hinzu und aktualisiere den lokalen Zustand
    const updatedMessages = addChatMessage(chatId, message)
    setMessages(updatedMessages)

// Aktualisiere den Chat mit der neuen Nachrichtenanzahl
    setChat(store.chatRooms.find((c) => c.id === chatId))

setNewMessage("")

toast({
      title: "Nachricht gesendet",
      description: "Ihre Nachricht wurde gesendet und ist für Schüler sichtbar.",
    })
  }

const handleDeleteMessage = (messageId: string) => {
    setMessageToDelete(messageId)
    setShowDeleteDialog(true)
  }

const confirmDeleteMessage = () => {
    if (!messageToDelete) return

// Lösche die Nachricht aus dem Store und aktualisiere den lokalen Zustand
    const updatedMessages = deleteChatMessage(chatId, messageToDelete)
    setMessages(updatedMessages)

// Aktualisiere den Chat mit der neuen Nachrichtenanzahl
    setChat(store.chatRooms.find((c) => c.id === chatId))

toast({
      title: "Nachricht gelöscht",
      description: "Die Nachricht wurde erfolgreich gelöscht.",
    })

setMessageToDelete(null)
    setShowDeleteDialog(false)
  }

const toggleChatStatus = () => {
    if (!chat) return

const newStatus = !chat.isOpen

// Aktualisiere den Chat im Store
    updateChatRoom(chatId, { isOpen: newStatus })

// Aktualisiere den lokalen Zustand
    setChat({ ...chat, isOpen: newStatus })

toast({
      title: newStatus ? "Chat geöffnet" : "Chat geschlossen",
      description: `Der Chat wurde ${newStatus ? "geöffnet" : "geschlossen"} und ist ${newStatus ? "jetzt" : "nicht mehr"} für Schüler sichtbar.`,
    })
  }

if (!chat) {
    return (
      <div className="text-center py-10">
        <p className="text-muted-foreground">Chat wird geladen...</p>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div className="flex items-center">
          <Link href="/dashboard/admin/chats">
            <Button variant="ghost" size="icon" className="mr-2">
              <ArrowLeft className="h-5 w-5" />
            </Button>
          </Link>
          <h1 className="text-2xl font-bold">{chat.title}</h1>
        </div>
        <Button variant="outline" onClick={toggleChatStatus}>
          {chat.isOpen ? (
            <>
              <Lock className="mr-2 h-4 w-4" />
              Chat schließen
            </>
          ) : (
            <>
              <Lock className="mr-2 h-4 w-4" />
              Chat öffnen
            </>
          )}
        </Button>
      </div>

<p className="text-muted-foreground">{chat.description}</p>

<Card className="mb-4">
        <CardHeader className="pb-3">
          <CardTitle>Chat-Verlauf</CardTitle>
          <CardDescription>
            <div
              className={`inline-block px-2 py-1 text-xs rounded-full ${chat.isOpen ? "bg-green-500/20 text-green-500" : "bg-red-500/20 text-red-500"}`}
            >
              {chat.isOpen ? "Offen" : "Geschlossen"}
            </div>
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4 max-h-[500px] overflow-y-auto p-1">
            {messages.length === 0 && (
              <div className="text-center py-6">
                <p className="text-muted-foreground">Keine Nachrichten vorhanden. Beginnen Sie die Konversation.</p>
              </div>
            )}

{messages.map((message) => (
              <div key={message.id} className={`flex flex-col ${message.isTeacher ? "items-end" : "items-start"}`}>
                <div
                  className={`max-w-[80%] rounded-lg p-3 ${
                    message.isTeacher ? "bg-primary text-primary-foreground" : "bg-secondary"
                  }`}
                >
                  <div className="flex justify-between items-center mb-1">
                    <p className="text-sm font-medium">{message.sender}</p>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-6 w-6 -mr-1 -mt-1 text-red-500 hover:text-red-700 hover:bg-transparent"
                      onClick={() => handleDeleteMessage(message.id)}
                    >
                      <Trash className="h-3.5 w-3.5" />
                    </Button>
                  </div>
                  <p className="whitespace-pre-line">{message.content}</p>
                  <div className="flex justify-between items-center mt-1">
                    <p className="text-xs opacity-70">{message.timestamp}</p>
                    {message.isEdited && <p className="text-xs opacity-70 italic">(bearbeitet)</p>}
                  </div>
                </div>
              </div>
            ))}
            <div ref={messagesEndRef} />
          </div>
        </CardContent>
        <CardFooter>
          <div className="flex w-full space-x-2">
            <Input
              placeholder={chat.isOpen ? "Nachricht eingeben..." : "Chat ist geschlossen"}
              value={newMessage}
              onChange={(e) => setNewMessage(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter" && !e.shiftKey) {
                  e.preventDefault()
                  handleSendMessage()
                }
              }}
              disabled={!chat.isOpen}
            />
            <Button onClick={handleSendMessage} disabled={!chat.isOpen || newMessage.trim() === ""}>
              <Send className="h-4 w-4" />
            </Button>
          </div>
        </CardFooter>
      </Card>

{/* Dialog zum Bestätigen des Löschens einer Nachricht */}
      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Nachricht löschen</AlertDialogTitle>
            <AlertDialogDescription>
              Möchten Sie diese Nachricht wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Abbrechen</AlertDialogCancel>
            <AlertDialogAction onClick={confirmDeleteMessage} className="bg-red-500 hover:bg-red-600">
              <Trash className="mr-2 h-4 w-4" />
              Löschen
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/student/chats/[id]/page.tsx" isEdit="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Send, ArrowLeft, Edit, Check, X, Trash } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import Link from "next/link"
import {
  store,
  addChatMessage,
  getChatMessages,
  updateChatMessage,
  deleteChatMessage,
  type ChatMessage,
} from "@/lib/store"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"

export default function StudentChatRoomPage() {
  const params = useParams()
  const router = useRouter()
  const chatId = params.id as string

// Finde den Chat aus dem Store
  const [chat, setChat] = useState(() => {
    const foundChat = store.chatRooms.find((c) => c.id === chatId && c.isOpen)
    return foundChat || null
  })

const [messages, setMessages] = useState<ChatMessage[]>([])
  const [newMessage, setNewMessage] = useState("")
  const [studentName, setStudentName] = useState("")
  const [editingMessageId, setEditingMessageId] = useState<string | null>(null)
  const [editedContent, setEditedContent] = useState("")
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const { toast } = useToast()

// State für den Dialog zum Löschen von Nachrichten
  const [messageToDelete, setMessageToDelete] = useState<string | null>(null)
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)

// Lade den Chat und die Nachrichten beim ersten Rendern
  useEffect(() => {
    const currentChat = store.chatRooms.find((c) => c.id === chatId && c.isOpen)
    if (!currentChat) {
      toast({
        title: "Chat nicht verfügbar",
        description: "Dieser Chat ist nicht mehr verfügbar oder wurde geschlossen.",
        variant: "destructive",
      })
      router.push("/dashboard/student/chats")
      return
    }

setChat(currentChat)
    setMessages(getChatMessages(chatId))

// Setze den aktuellen Benutzernamen, wenn ein Benutzer angemeldet ist
    if (store.currentUser) {
      setStudentName(store.currentUser.username)
    }
  }, [chatId, router])

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

useEffect(() => {
    scrollToBottom()
  }, [messages])

const handleSendMessage = () => {
    if (!chat) return
    if (newMessage.trim() === "" || studentName.trim() === "") {
      toast({
        title: "Fehler",
        description: "Bitte gib deinen Namen und eine Nachricht ein.",
        variant: "destructive",
      })
      return
    }

const message = {
      id: Date.now().toString(),
      content: newMessage,
      sender: studentName,
      timestamp: formattedTime,
      isTeacher: false,
    }

// Füge die Nachricht zum Store hinzu und aktualisiere den lokalen Zustand
    const updatedMessages = addChatMessage(chatId, message)
    setMessages(updatedMessages)

// Aktualisiere den Chat mit der neuen Nachrichtenanzahl
    setChat(store.chatRooms.find((c) => c.id === chatId))

setNewMessage("")
  }

const handleEditMessage = (messageId: string, content: string) => {
    setEditingMessageId(messageId)
    setEditedContent(content)
  }

const saveEditedMessage = (messageId: string) => {
    if (editedContent.trim() === "") {
      toast({
        title: "Fehler",
        description: "Die Nachricht darf nicht leer sein.",
        variant: "destructive",
      })
      return
    }

// Aktualisiere die Nachricht im Store und im lokalen Zustand
    const updatedMessages = updateChatMessage(chatId, messageId, { content: editedContent })
    setMessages(updatedMessages)

setEditingMessageId(null)
    setEditedContent("")

toast({
      title: "Nachricht bearbeitet",
      description: "Deine Nachricht wurde erfolgreich bearbeitet.",
    })
  }

const cancelEditMessage = () => {
    setEditingMessageId(null)
    setEditedContent("")
  }

const handleDeleteMessage = (messageId: string) => {
    setMessageToDelete(messageId)
    setShowDeleteDialog(true)
  }

const confirmDeleteMessage = () => {
    if (!messageToDelete) return

// Lösche die Nachricht aus dem Store und aktualisiere den lokalen Zustand
    const updatedMessages = deleteChatMessage(chatId, messageToDelete)
    setMessages(updatedMessages)

// Aktualisiere den Chat mit der neuen Nachrichtenanzahl
    setChat(store.chatRooms.find((c) => c.id === chatId))

toast({
      title: "Nachricht gelöscht",
      description: "Deine Nachricht wurde erfolgreich gelöscht.",
    })

setMessageToDelete(null)
    setShowDeleteDialog(false)
  }

if (!chat) {
    return (
      <div className="text-center py-10">
        <p className="text-muted-foreground">Chat wird geladen...</p>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div className="flex items-center">
        <Link href="/dashboard/student/chats">
          <Button variant="ghost" size="icon" className="mr-2">
            <ArrowLeft className="h-5 w-5" />
          </Button>
        </Link>
        <h1 className="text-2xl font-bold text-brand-yellow">{chat.title}</h1>
      </div>

<p className="text-muted-foreground">{chat.description}</p>

<Card className="mb-4 border-brand-blue shadow-lg">
        <CardHeader className="pb-3 bg-gradient-to-r from-brand-blue/10 to-transparent">
          <CardTitle className="text-brand-blue">Chat-Verlauf</CardTitle>
          <CardDescription>
            <div className="inline-block px-2 py-1 text-xs rounded-full bg-green-500/20 text-green-500">Offen</div>
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4 max-h-[500px] overflow-y-auto p-1">
            {messages.length === 0 && (
              <div className="text-center py-6">
                <p className="text-muted-foreground">Keine Nachrichten vorhanden. Beginne die Konversation.</p>
              </div>
            )}

{messages.map((message) => (
              <div key={message.id} className={`flex flex-col ${message.isTeacher ? "items-start" : "items-end"}`}>
                <div
                  className={`max-w-[80%] rounded-lg p-3 ${
                    message.isTeacher ? "bg-secondary" : "bg-primary text-primary-foreground"
                  }`}
                >
                  {editingMessageId === message.id ? (
                    <div className="space-y-2">
                      <p className="text-sm font-medium">{message.sender}</p>
                      <Textarea
                        value={editedContent}
                        onChange={(e) => setEditedContent(e.target.value)}
                        className="min-h-[80px] text-black dark:text-white bg-white dark:bg-gray-800 border-brand-blue/50"
                      />
                      <div className="flex justify-end space-x-2">
                        <Button size="sm" variant="outline" onClick={cancelEditMessage} className="h-8 px-2">
                          <X className="h-4 w-4 mr-1" /> Abbrechen
                        </Button>
                        <Button
                          size="sm"
                          onClick={() => saveEditedMessage(message.id)}
                          className="h-8 px-2 bg-brand-blue hover:bg-brand-blue/90"
                        >
                          <Check className="h-4 w-4 mr-1" /> Speichern
                        </Button>
                      </div>
                    </div>
                  ) : (
                    <>
                      <div className="flex justify-between items-center mb-1">
                        <p className="text-sm font-medium">{message.sender}</p>
                        {!message.isTeacher && message.sender === studentName && (
                          <div className="flex space-x-1">
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-6 w-6 hover:bg-transparent"
                              onClick={() => handleEditMessage(message.id, message.content)}
                            >
                              <Edit className="h-3.5 w-3.5" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-6 w-6 text-red-500 hover:text-red-700 hover:bg-transparent"
                              onClick={() => handleDeleteMessage(message.id)}
                            >
                              <Trash className="h-3.5 w-3.5" />
                            </Button>
                          </div>
                        )}
                      </div>
                      <p className="whitespace-pre-line">{message.content}</p>
                      <div className="flex justify-between items-center mt-1">
                        <p className="text-xs opacity-70">{message.timestamp}</p>
                        {message.isEdited && <p className="text-xs opacity-70 italic">(bearbeitet)</p>}
                      </div>
                    </>
                  )}
                </div>
              </div>
            ))}
            <div ref={messagesEndRef} />
          </div>
        </CardContent>
        <CardFooter>
          <div className="flex w-full space-x-2 flex-col sm:flex-row gap-2">
            <Input
              placeholder="Dein Name"
              value={studentName}
              onChange={(e) => setStudentName(e.target.value)}
              className="sm:max-w-[200px] border-brand-blue/50 focus-visible:ring-brand-blue/50"
              disabled={!!store.currentUser} // Deaktiviere das Feld, wenn ein Benutzer angemeldet ist
            />
            <div className="flex w-full space-x-2">
              <Input
                placeholder="Nachricht eingeben..."
                value={newMessage}
                onChange={(e) => setNewMessage(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter" && !e.shiftKey) {
                    e.preventDefault()
                    handleSendMessage()
                  }
                }}
                className="border-brand-blue/50 focus-visible:ring-brand-blue/50"
              />
              <Button
                onClick={handleSendMessage}
                disabled={newMessage.trim() === "" || studentName.trim() === ""}
                className="bg-brand-blue hover:bg-brand-blue/90"
              >
                <Send className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </CardFooter>
      </Card>

{/* Dialog zum Bestätigen des Löschens einer Nachricht */}
      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Nachricht löschen</AlertDialogTitle>
            <AlertDialogDescription>
              Möchtest du diese Nachricht wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Abbrechen</AlertDialogCancel>
            <AlertDialogAction onClick={confirmDeleteMessage} className="bg-red-500 hover:bg-red-600">
              <Trash className="mr-2 h-4 w-4" />
              Löschen
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}
</article></body></html>