MOPC-Portal/src/app/(jury)/jury/competitions/deliberation/[sessionId]/page.tsx

'use client'

import { use, useState } from 'react'
import Link from 'next/link'
import { trpc } from '@/lib/trpc/client'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible'
import { DeliberationRankingForm } from '@/components/jury/deliberation-ranking-form'
import { LiveVotingForm } from '@/components/jury/live-voting-form'
import { CheckCircle2, ChevronDown, FileText, PenLine, StickyNote } from 'lucide-react'
import { toast } from 'sonner'

const CATEGORY_LABEL: Record<string, string> = {
  BUSINESS_CONCEPT: 'Business Concepts',
  STARTUP: 'Startups',
}

/**
 * Per-project review context during deliberation: the juror's finale scores
 * (revisable in place — "keep" is simply not touching them), their ceremony
 * notes, and a pointer to the project documents.
 */
function ProjectReviewCard({
  project,
  roundId,
  finaleInputs,
  votingMode,
  criteria,
}: {
  project: { id: string; title: string; teamName?: string | null }
  roundId: string
  finaleInputs: any
  votingMode: 'simple' | 'criteria'
  criteria?: Array<{ id: string; label: string; description?: string; scale: number; weight: number }>
}) {
  const utils = trpc.useUtils()
  const [open, setOpen] = useState(false)
  const myVote = finaleInputs?.votes?.find((v: any) => v.projectId === project.id)
  const myNote = finaleInputs?.notes?.find((n: any) => n.projectId === project.id)

  const voteMutation = trpc.liveVoting.vote.useMutation({
    onSuccess: () => {
      utils.liveVoting.getMyFinaleInputs.invalidate({ roundId })
      toast.success('Score updated')
    },
    onError: (err) => toast.error(err.message),
  })

  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <Card>
        <CollapsibleTrigger asChild>
          <CardHeader className="cursor-pointer py-4 hover:bg-muted/40">
            <div className="flex items-center justify-between">
              <div>
                <CardTitle className="text-base">{project.title}</CardTitle>
                {project.teamName && (
                  <CardDescription className="mt-0.5">{project.teamName}</CardDescription>
                )}
              </div>
              <div className="flex items-center gap-2">
                {myVote ? (
                  <Badge variant="secondary" className="tabular-nums">
                    My score: {myVote.score}/10
                  </Badge>
                ) : (
                  <Badge variant="outline">Not scored</Badge>
                )}
                <ChevronDown className={`h-4 w-4 transition-transform ${open ? 'rotate-180' : ''}`} />
              </div>
            </div>
          </CardHeader>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <CardContent className="space-y-4 border-t pt-4">
            {myNote?.content && (
              <div className="rounded-lg bg-muted/40 p-3">
                <p className="mb-1 flex items-center gap-1.5 text-xs font-semibold text-muted-foreground">
                  <StickyNote className="h-3.5 w-3.5" />
                  Your ceremony notes
                </p>
                <p className="whitespace-pre-wrap text-sm">{myNote.content}</p>
              </div>
            )}
            <div>
              <p className="mb-2 flex items-center gap-1.5 text-xs font-semibold text-muted-foreground">
                <PenLine className="h-3.5 w-3.5" />
                Your grand-finale score — edit to revise, or leave as-is to keep it
              </p>
              {finaleInputs?.session?.id ? (
                <LiveVotingForm
                  key={`${project.id}-${myVote?.votedAt ?? 'fresh'}`}
                  projectId={project.id}
                  votingMode={votingMode}
                  criteria={criteria}
                  existingVote={
                    myVote
                      ? {
                          score: myVote.score,
                          criterionScoresJson: myVote.criterionScoresJson as
                            | Record<string, number>
                            | undefined,
                          comment: myVote.comment,
                        }
                      : null
                  }
                  onVoteSubmit={(vote) =>
                    voteMutation.mutate({
                      sessionId: finaleInputs.session.id,
                      projectId: project.id,
                      score: vote.score,
                      criterionScores: vote.criterionScores,
                      comment: vote.comment,
                    })
                  }
                  disabled={voteMutation.isPending}
                />
              ) : (
                <p className="text-sm text-muted-foreground">No finale voting session found.</p>
              )}
            </div>
            <Button asChild variant="outline" size="sm">
              <Link href="/jury/finals-documents">
                <FileText className="mr-2 h-3.5 w-3.5" />
                Open project documents
              </Link>
            </Button>
          </CardContent>
        </CollapsibleContent>
      </Card>
    </Collapsible>
  )
}

export default function JuryDeliberationPage({
  params: paramsPromise,
}: {
  params: Promise<{ sessionId: string }>
}) {
  const params = use(paramsPromise)
  const utils = trpc.useUtils()

  const { data: me } = trpc.user.me.useQuery()
  const { data: session, isLoading } = trpc.deliberation.getSession.useQuery(
    { sessionId: params.sessionId },
    { refetchInterval: 10_000 }
  )
  // The deliberation session points at its round; finale inputs live on the
  // LIVE_FINAL round's voting session — resolve via my ceremony context.
  const { data: ceremony } = trpc.live.getMyCeremonyContext.useQuery()
  const finaleRoundId = ceremony?.liveRoundId ?? null
  const { data: finaleInputs } = trpc.liveVoting.getMyFinaleInputs.useQuery(
    { roundId: finaleRoundId ?? '' },
    { enabled: !!finaleRoundId }
  )

  const [submitting, setSubmitting] = useState(false)
  const submitVoteMutation = trpc.deliberation.submitVote.useMutation()

  const handleSubmitVote = async (
    votes: Array<{ projectId: string; rank?: number; isWinnerPick?: boolean }>
  ) => {
    setSubmitting(true)
    try {
      for (const vote of votes) {
        await submitVoteMutation.mutateAsync({
          sessionId: params.sessionId,
          projectId: vote.projectId,
          rank: vote.rank,
          isWinnerPick: vote.isWinnerPick,
        })
      }
      toast.success('Your ranking has been submitted')
      utils.deliberation.getSession.invalidate({ sessionId: params.sessionId })
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to submit vote')
    } finally {
      setSubmitting(false)
    }
  }

  if (isLoading || !me) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center py-12">
          <p className="text-muted-foreground">Loading session…</p>
        </CardContent>
      </Card>
    )
  }

  if (!session) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center py-12">
          <p className="text-muted-foreground">Session not found</p>
        </CardContent>
      </Card>
    )
  }

  const isParticipant = (session.participants ?? []).some(
    (p: any) => p.user?.user?.id === me.id
  )
  const hasVoted = (session.votes ?? []).some(
    (v: any) => v.juryMember?.user?.id === me.id && v.runoffRound === 0
  )
  const projects = ((session as any).projects ?? []) as Array<{
    id: string
    title: string
    teamName?: string | null
  }>
  const votingMode = (finaleInputs?.session?.votingMode ?? 'simple') as 'simple' | 'criteria'
  const criteria = finaleInputs?.session?.criteriaJson as
    | Array<{ id: string; label: string; description?: string; scale: number; weight: number }>
    | undefined

  const header = (
    <Card>
      <CardHeader>
        <div className="flex items-start justify-between">
          <div>
            <CardTitle>Deliberation — {CATEGORY_LABEL[session.category] ?? session.category}</CardTitle>
            <CardDescription className="mt-1">{session.round?.name}</CardDescription>
          </div>
          <Badge>{session.status}</Badge>
        </div>
      </CardHeader>
    </Card>
  )

  const reviewSection = projects.length > 0 && finaleRoundId && (
    <div className="space-y-3">
      <div>
        <h2 className="text-lg font-semibold">Review Before You Rank</h2>
        <p className="text-sm text-muted-foreground">
          Your grand-finale scores, notes and the project documents — revise a score or keep it.
        </p>
      </div>
      {projects.map((p) => (
        <ProjectReviewCard
          key={p.id}
          project={p}
          roundId={finaleRoundId}
          finaleInputs={finaleInputs}
          votingMode={votingMode}
          criteria={criteria}
        />
      ))}
    </div>
  )

  if (session.status !== 'VOTING' && session.status !== 'RUNOFF') {
    return (
      <div className="space-y-6">
        {header}
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-10">
            <p className="text-muted-foreground">
              {session.status === 'DELIB_OPEN'
                ? 'Voting has not started yet — you can already review the projects below.'
                : session.status === 'TALLYING'
                  ? 'Voting is closed. Results are being tallied.'
                  : 'This session is locked.'}
            </p>
          </CardContent>
        </Card>
        {session.status === 'DELIB_OPEN' && reviewSection}
      </div>
    )
  }

  if (!isParticipant) {
    return (
      <div className="space-y-6">
        {header}
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-10">
            <p className="text-muted-foreground">
              You are not a participant of this deliberation session.
            </p>
          </CardContent>
        </Card>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {header}

      {hasVoted ? (
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-10">
            <CheckCircle2 className="mb-3 h-12 w-12 text-green-600" />
            <p className="font-medium">Ranking Submitted</p>
            <p className="mt-1 text-sm text-muted-foreground">
              Thank you — the chair will review the collective result.
            </p>
          </CardContent>
        </Card>
      ) : (
        <>
          {reviewSection}
          <div>
            <h2 className="mb-2 text-lg font-semibold">
              {session.mode === 'SINGLE_WINNER_VOTE' ? 'Pick Your Winner' : 'Your Ranking'}
            </h2>
            <DeliberationRankingForm
              projects={projects}
              mode={session.mode}
              onSubmit={handleSubmitVote}
              disabled={submitting}
            />
          </div>
        </>
      )}
    </div>
  )
}