import { notFound, redirect } from "next/navigation";
import { AdminBreadcrumb } from "@/components/admin/admin-breadcrumb";
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";
import { PollForm } from "../poll-form";
import { PollQuestionsManager } from "./poll-questions";
import { PollResultsView } from "./poll-results";

export default async function PollDetailPage({
  params,
}: {
  params: Promise<{ locale: string; id: string }>;
}) {
  const { id } = await params;
  const { session, permissions } = await getAdminContext();
  if (!canAccess(permissions, PERMS.POLLS_EDIT, session.user.rank)) {
    redirect("/admin/polls");
  }

  const pollId = parseInt(id, 10);
  if (Number.isNaN(pollId)) notFound();

  const poll = await prisma.websitePoll.findUnique({
    where: { id: pollId },
    include: {
      questions: {
        orderBy: { sortOrder: "asc" },
        include: {
          votes: true,
        },
      },
    },
  });

  if (!poll) notFound();

  const totalVoters = new Set(poll.questions.flatMap((q) => q.votes.map((v) => v.userId))).size;

  return (
    <div className="space-y-6">
      <div>
        <AdminBreadcrumb items={[{ label: "Polls", href: "/admin/polls" }, { label: poll.title }]} />
        <div className="flex items-center gap-3">
          <h1 className="text-3xl font-bold tracking-tight">{poll.title}</h1>
          <Badge
            variant={
              poll.status === "active" ? "default" : poll.status === "closed" ? "outline" : "secondary"
            }
          >
            {poll.status}
          </Badge>
        </div>
        {poll.description && <p className="text-muted-foreground">{poll.description}</p>}
      </div>

      {/* Stats */}
      <div className="grid gap-4 md:grid-cols-3">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Total Voters</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{totalVoters}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Questions</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{poll.questions.length}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">Total Votes</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {poll.questions.reduce((sum, q) => sum + q.votes.length, 0)}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Edit form */}
      <PollForm
        defaultValues={{
          id: poll.id,
          title: poll.title,
          description: poll.description,
          status: poll.status as "draft" | "active" | "closed",
          showResults: poll.showResults,
          multipleChoice: poll.multipleChoice,
          startsAt: poll.startsAt,
          endsAt: poll.endsAt,
        }}
      />

      {/* Questions */}
      <PollQuestionsManager
        pollId={poll.id}
        questions={poll.questions.map((q) => ({
          id: q.id,
          question: q.question,
          type: q.type,
          sortOrder: q.sortOrder,
          options: q.options,
        }))}
      />

      {/* Results */}
      {poll.questions.length > 0 && (
        <PollResultsView
          questions={poll.questions.map((q) => ({
            id: q.id,
            question: q.question,
            options: q.options,
            votes: q.votes.map((v) => v.answer),
          }))}
        />
      )}
    </div>
  );
}