elmeg-demo/frontend/app/bugs/ticket/[id]/page.tsx

"use client"

/**
 * Ticket Detail Page
 */

import { useEffect, useState } from "react"
import { useParams } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { useAuth } from "@/contexts/auth-context"
import { getApiUrl } from "@/lib/api-config"
import Link from "next/link"
import { ArrowLeft, Send, Loader2, Clock, User } from "lucide-react"

interface Ticket {
    id: number
    ticket_number: string
    type: string
    status: string
    priority: string
    title: string
    description: string
    reporter_email: string
    reporter_name: string
    is_public: boolean
    upvotes: number
    created_at: string
    updated_at: string
    resolved_at: string | null
}

interface Comment {
    id: number
    author_name: string
    content: string
    is_internal: boolean
    created_at: string
}

const STATUS_STYLES: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
    open: { label: "Open", variant: "default" },
    in_progress: { label: "In Progress", variant: "secondary" },
    resolved: { label: "Resolved", variant: "outline" },
    closed: { label: "Closed", variant: "outline" },
}

const PRIORITY_COLORS: Record<string, string> = {
    low: "bg-gray-500",
    medium: "bg-yellow-500",
    high: "bg-orange-500",
    critical: "bg-red-500",
}

export default function TicketDetailPage() {
    const params = useParams()
    const ticketNumber = params.id as string
    const { user } = useAuth()

    const [ticket, setTicket] = useState<Ticket | null>(null)
    const [comments, setComments] = useState<Comment[]>([])
    const [loading, setLoading] = useState(true)
    const [newComment, setNewComment] = useState("")
    const [submitting, setSubmitting] = useState(false)
    const [error, setError] = useState("")

    useEffect(() => {
        if (ticketNumber) {
            fetchTicket()
            fetchComments()
        }
    }, [ticketNumber])

    const fetchTicket = async () => {
        try {
            const token = localStorage.getItem("token")
            const headers: Record<string, string> = {}
            if (token) headers["Authorization"] = `Bearer ${token}`

            const res = await fetch(`${getApiUrl()}/tickets/${ticketNumber}`, { headers })
            if (res.ok) {
                setTicket(await res.json())
            } else if (res.status === 404) {
                setError("Ticket not found")
            } else if (res.status === 403) {
                setError("You don't have access to this ticket")
            }
        } catch (e) {
            setError("Failed to load ticket")
        } finally {
            setLoading(false)
        }
    }

    const fetchComments = async () => {
        try {
            const token = localStorage.getItem("token")
            const headers: Record<string, string> = {}
            if (token) headers["Authorization"] = `Bearer ${token}`

            const res = await fetch(`${getApiUrl()}/tickets/${ticketNumber}/comments`, { headers })
            if (res.ok) {
                setComments(await res.json())
            }
        } catch (e) {
            console.error("Failed to load comments", e)
        }
    }

    const handleSubmitComment = async (e: React.FormEvent) => {
        e.preventDefault()
        if (!newComment.trim()) return

        setSubmitting(true)
        try {
            const token = localStorage.getItem("token")
            const res = await fetch(`${getApiUrl()}/tickets/${ticketNumber}/comments`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    Authorization: `Bearer ${token}`,
                },
                body: JSON.stringify({ content: newComment }),
            })

            if (res.ok) {
                const comment = await res.json()
                setComments([...comments, comment])
                setNewComment("")
            }
        } catch (e) {
            console.error("Failed to add comment", e)
        } finally {
            setSubmitting(false)
        }
    }

    if (loading) {
        return (
            <div className="container max-w-3xl py-16 flex items-center justify-center">
                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
            </div>
        )
    }

    if (error || !ticket) {
        return (
            <div className="container max-w-3xl py-16 text-center">
                <h1 className="text-2xl font-bold mb-4">{error || "Ticket not found"}</h1>
                <Link href="/bugs">
                    <Button>Back to Bug Tracker</Button>
                </Link>
            </div>
        )
    }

    return (
        <div className="container max-w-3xl py-8">
            {/* Header */}
            <div className="flex items-center gap-4 mb-6">
                <Link href="/bugs/my-tickets">
                    <Button variant="ghost" size="icon">
                        <ArrowLeft className="h-4 w-4" />
                    </Button>
                </Link>
                <div className="flex-1">
                    <div className="flex items-center gap-2">
                        <span className="font-mono text-muted-foreground">{ticket.ticket_number}</span>
                        <span className={`inline-block w-2 h-2 rounded-full ${PRIORITY_COLORS[ticket.priority]}`} />
                        <Badge variant={STATUS_STYLES[ticket.status]?.variant || "default"}>
                            {STATUS_STYLES[ticket.status]?.label || ticket.status}
                        </Badge>
                    </div>
                </div>
            </div>

            {/* Ticket Content */}
            <Card className="mb-6">
                <CardHeader>
                    <CardTitle>{ticket.title}</CardTitle>
                    <div className="flex items-center gap-4 text-sm text-muted-foreground">
                        <span className="flex items-center gap-1">
                            <User className="h-3 w-3" />
                            {ticket.reporter_name || "Anonymous"}
                        </span>
                        <span className="flex items-center gap-1">
                            <Clock className="h-3 w-3" />
                            {new Date(ticket.created_at).toLocaleString()}
                        </span>
                    </div>
                </CardHeader>
                {ticket.description && (
                    <CardContent>
                        <p className="whitespace-pre-wrap">{ticket.description}</p>
                    </CardContent>
                )}
            </Card>

            {/* Comments */}
            <div className="space-y-4 mb-6">
                <h3 className="font-semibold">Comments ({comments.length})</h3>

                {comments.length === 0 ? (
                    <p className="text-sm text-muted-foreground">No comments yet</p>
                ) : (
                    comments.map((comment) => (
                        <Card key={comment.id}>
                            <CardContent className="py-4">
                                <div className="flex items-center gap-2 mb-2">
                                    <span className="font-medium">{comment.author_name}</span>
                                    <span className="text-sm text-muted-foreground">
                                        {new Date(comment.created_at).toLocaleString()}
                                    </span>
                                </div>
                                <p className="whitespace-pre-wrap">{comment.content}</p>
                            </CardContent>
                        </Card>
                    ))
                )}
            </div>

            {/* Add Comment Form */}
            {user && (
                <form onSubmit={handleSubmitComment} className="space-y-4">
                    <Textarea
                        placeholder="Add a comment..."
                        value={newComment}
                        onChange={(e) => setNewComment(e.target.value)}
                        rows={3}
                    />
                    <Button type="submit" disabled={submitting || !newComment.trim()} className="gap-2">
                        <Send className="h-4 w-4" />
                        {submitting ? "Sending..." : "Send Comment"}
                    </Button>
                </form>
            )}
        </div>
    )
}