import {
	AlertCircle,
	CheckCircle2,
	Clock,
	Loader2,
	Ticket,
} from "lucide-react";
import Link from "next/link";
import { redirect } from "next/navigation";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
import { prisma } from "@/lib/prisma";

const STATUS_CONFIG = {
	open: {
		label: "Open",
		icon: AlertCircle,
		class: "bg-[var(--admin-info-subtle)] text-[var(--admin-info)]",
	},
	in_progress: {
		label: "In Progress",
		icon: Loader2,
		class: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]",
	},
	waiting: {
		label: "Waiting",
		icon: Clock,
		class: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]",
	},
	closed: {
		label: "Closed",
		icon: CheckCircle2,
		class: "bg-muted text-muted-foreground",
	},
} as const;

const PRIORITY_COLORS = {
	low: "",
	normal: "text-[var(--admin-info)]",
	high: "text-[var(--admin-warning)]",
	urgent: "text-[var(--admin-error)] font-bold",
};

interface PageProps {
	searchParams: Promise<{ status?: string; page?: string }>;
}

export default async function AdminTicketsPage({ searchParams }: PageProps) {
	const { session, permissions } = await getAdminContext();
	if (!canAccess(permissions, PERMS.TICKETS_VIEW, session.user.rank)) {
		redirect("/admin");
	}

	const sp = await searchParams;
	const statusFilter = sp.status || "active";
	const page = Math.max(1, Number(sp.page) || 1);
	const perPage = 20;

	const where =
		statusFilter === "active"
			? { status: { not: "closed" } }
			: statusFilter === "all"
				? {}
				: { status: statusFilter };

	const [tickets, total, stats] = await Promise.all([
		prisma.websiteTicket.findMany({
			where,
			orderBy: [{ createdAt: "desc" }],
			skip: (page - 1) * perPage,
			take: perPage,
			include: {
				creator: { select: { id: true, username: true } },
				assignee: { select: { id: true, username: true } },
				_count: { select: { messages: true } },
			},
		}),
		prisma.websiteTicket.count({ where }),
		Promise.all([
			prisma.websiteTicket.count({ where: { status: "open" } }),
			prisma.websiteTicket.count({ where: { status: "in_progress" } }),
			prisma.websiteTicket.count({ where: { status: "waiting" } }),
			prisma.websiteTicket.count({ where: { status: "closed" } }),
		]),
	]);

	const [openCount, inProgressCount, waitingCount, closedCount] = stats;
	const totalPages = Math.ceil(total / perPage);

	return (
		<div className="space-y-6">
			<div>
				<h1 className="text-3xl font-bold tracking-tight">Support Tickets</h1>
				<p className="text-muted-foreground">Manage user support requests</p>
			</div>

			{/* Stats */}
			<div className="grid gap-4 grid-cols-2 lg:grid-cols-4">
				<Card>
					<CardHeader className="pb-2">
						<CardTitle className="text-sm font-medium text-[var(--admin-info)]">
							Open
						</CardTitle>
					</CardHeader>
					<CardContent>
						<div className="text-2xl font-bold">{openCount}</div>
					</CardContent>
				</Card>
				<Card>
					<CardHeader className="pb-2">
						<CardTitle className="text-sm font-medium text-[var(--admin-warning)]">
							In Progress
						</CardTitle>
					</CardHeader>
					<CardContent>
						<div className="text-2xl font-bold">{inProgressCount}</div>
					</CardContent>
				</Card>
				<Card>
					<CardHeader className="pb-2">
						<CardTitle className="text-sm font-medium text-[var(--admin-warning)]">
							Waiting
						</CardTitle>
					</CardHeader>
					<CardContent>
						<div className="text-2xl font-bold">{waitingCount}</div>
					</CardContent>
				</Card>
				<Card>
					<CardHeader className="pb-2">
						<CardTitle className="text-sm font-medium text-muted-foreground">
							Closed
						</CardTitle>
					</CardHeader>
					<CardContent>
						<div className="text-2xl font-bold">{closedCount}</div>
					</CardContent>
				</Card>
			</div>

			{/* Filter tabs */}
			<div className="flex gap-2">
				{[
					{ key: "active", label: "Active" },
					{ key: "open", label: "Open" },
					{ key: "in_progress", label: "In Progress" },
					{ key: "waiting", label: "Waiting" },
					{ key: "closed", label: "Closed" },
					{ key: "all", label: "All" },
				].map(({ key, label }) => (
					<Link key={key} href={`/admin/tickets?status=${key}`}>
						<Badge
							variant={statusFilter === key ? "default" : "outline"}
							className="cursor-pointer"
						>
							{label}
						</Badge>
					</Link>
				))}
			</div>

			{/* Ticket list */}
			<div className="rounded-lg border">
				<div className="grid grid-cols-[1fr_auto_auto_auto_auto] gap-4 p-3 bg-muted/50 text-xs font-medium text-muted-foreground border-b">
					<span>Ticket</span>
					<span>Status</span>
					<span>Priority</span>
					<span>Assigned</span>
					<span>Date</span>
				</div>

				{tickets.length === 0 ? (
					<div className="p-8 text-center text-muted-foreground">
						<Ticket className="h-8 w-8 mx-auto mb-2" />
						No tickets found.
					</div>
				) : (
					tickets.map((ticket) => {
						const status =
							STATUS_CONFIG[ticket.status as keyof typeof STATUS_CONFIG] ??
							STATUS_CONFIG.open;
						const StatusIcon = status.icon;

						return (
							<Link
								key={ticket.id}
								href={`/admin/tickets/${ticket.id}`}
								className="grid grid-cols-[1fr_auto_auto_auto_auto] gap-4 p-3 items-center hover:bg-accent/50 transition-all duration-150 border-b last:border-0 hover:pl-4"
							>
								<div className="min-w-0">
									<div className="flex items-center gap-2">
										<span className="text-xs text-muted-foreground font-mono">
											#{ticket.id}
										</span>
										<span className="font-medium truncate">
											{ticket.subject}
										</span>
									</div>
									<div className="text-xs text-muted-foreground">
										by {ticket.creator.username} &middot;{" "}
										{ticket._count.messages} msg &middot; {ticket.category}
									</div>
								</div>
								<span
									className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full whitespace-nowrap ${status.class}`}
								>
									<StatusIcon className="h-3 w-3" />
									{status.label}
								</span>
								<span
									className={`text-xs capitalize whitespace-nowrap ${PRIORITY_COLORS[ticket.priority as keyof typeof PRIORITY_COLORS] ?? ""}`}
								>
									{ticket.priority}
								</span>
								<span className="text-xs text-muted-foreground whitespace-nowrap">
									{ticket.assignee?.username ?? "—"}
								</span>
								<span className="text-xs text-muted-foreground whitespace-nowrap">
									{new Date(ticket.createdAt).toLocaleDateString()}
								</span>
							</Link>
						);
					})
				)}
			</div>

			{/* Pagination */}
			{totalPages > 1 && (
				<div className="flex items-center justify-center gap-2">
					{page > 1 && (
						<Link
							href={`/admin/tickets?status=${statusFilter}&page=${page - 1}`}
						>
							<Badge variant="outline" className="cursor-pointer">
								Previous
							</Badge>
						</Link>
					)}
					<span className="text-sm text-muted-foreground">
						Page {page} of {totalPages}
					</span>
					{page < totalPages && (
						<Link
							href={`/admin/tickets?status=${statusFilter}&page=${page + 1}`}
						>
							<Badge variant="outline" className="cursor-pointer">
								Next
							</Badge>
						</Link>
					)}
				</div>
			)}
		</div>
	);
}