"use client"

import React, { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/lib/auth-context"
import { Send, CheckCircle2 } from "lucide-react"

export function CreateTicketForm() {
  const { createTicket, rooms } = useAuth()
  const [roomId, setRoomId] = useState<string>("")
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [showSuccess, setShowSuccess] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!roomId || !title || !description) return

    setIsSubmitting(true)

    await createTicket({
      roomId: parseInt(roomId),
      title,
      description
    })

    setRoomId("")
    setTitle("")
    setDescription("")
    setIsSubmitting(false)
    setShowSuccess(true)

    setTimeout(() => setShowSuccess(false), 3000)
  }

  return (
    <Card className="border-border/60">
      <CardHeader>
        <CardTitle className="text-xl">Neues Ticket erstellen</CardTitle>
        <CardDescription>Melden Sie ein technisches Problem oder fordern Sie Hilfe an</CardDescription>
      </CardHeader>
      <CardContent>
        {showSuccess && (
          <div className="mb-4 flex items-center gap-2 rounded-lg bg-status-done/20 p-3 text-sm text-status-done-foreground">
            <CheckCircle2 className="h-4 w-4" />
            Ticket erfolgreich erstellt!
          </div>
        )}
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="room">Raum</Label>
            <Select value={roomId} onValueChange={setRoomId} required>
              <SelectTrigger id="room">
                <SelectValue placeholder="Raum auswählen" />
              </SelectTrigger>
              <SelectContent>
                {rooms.map((r) => (
                  <SelectItem key={r.id} value={String(r.id)}>
                    {r.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label htmlFor="title">Titel</Label>
            <Input
              id="title"
              placeholder="Kurze Beschreibung des Problems"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              required
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="description">Problembeschreibung</Label>
            <Textarea
              id="description"
              placeholder="Beschreiben Sie das Problem im Detail..."
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={4}
              required
            />
          </div>
          <Button type="submit" className="w-full" disabled={isSubmitting}>
            {isSubmitting ? (
              <span className="flex items-center gap-2">
                <span className="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent" />
                Senden...
              </span>
            ) : (
              <span className="flex items-center gap-2">
                <Send className="h-4 w-4" />
                Ticket erstellen
              </span>
            )}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}