MOPC-App/src/app/(admin)/admin/rounds/[roundId]/page.tsx

'use client'

import { useState } from 'react'
import { useParams } from 'next/navigation'
import Link from 'next/link'
import type { Route } from 'next'
import { trpc } from '@/lib/trpc/client'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Skeleton } from '@/components/ui/skeleton'
import { Badge } from '@/components/ui/badge'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { cn } from '@/lib/utils'
import {
  ArrowLeft,
  Save,
  Loader2,
  ChevronDown,
  Play,
  Square,
  Archive,
  Calendar,
  FileBox,
  Users,
} from 'lucide-react'
import { RoundConfigForm } from '@/components/admin/competition/round-config-form'
import { ProjectStatesTable } from '@/components/admin/round/project-states-table'
import { SubmissionWindowManager } from '@/components/admin/round/submission-window-manager'
import { FileRequirementsEditor } from '@/components/admin/rounds/config/file-requirements-editor'

const roundTypeColors: Record<string, string> = {
  INTAKE: 'bg-gray-100 text-gray-700',
  FILTERING: 'bg-amber-100 text-amber-700',
  EVALUATION: 'bg-blue-100 text-blue-700',
  SUBMISSION: 'bg-purple-100 text-purple-700',
  MENTORING: 'bg-teal-100 text-teal-700',
  LIVE_FINAL: 'bg-red-100 text-red-700',
  DELIBERATION: 'bg-indigo-100 text-indigo-700',
}

const roundStatusConfig: Record<string, { label: string; bgClass: string }> = {
  ROUND_DRAFT: { label: 'Draft', bgClass: 'bg-gray-100 text-gray-700' },
  ROUND_ACTIVE: { label: 'Active', bgClass: 'bg-emerald-100 text-emerald-700' },
  ROUND_CLOSED: { label: 'Closed', bgClass: 'bg-blue-100 text-blue-700' },
  ROUND_ARCHIVED: { label: 'Archived', bgClass: 'bg-muted text-muted-foreground' },
}

export default function RoundDetailPage() {
  const params = useParams()
  const roundId = params.roundId as string

  const [config, setConfig] = useState<Record<string, unknown>>({})
  const [hasChanges, setHasChanges] = useState(false)
  const [confirmAction, setConfirmAction] = useState<string | null>(null)
  const [windowOpenAt, setWindowOpenAt] = useState<string>('')
  const [windowCloseAt, setWindowCloseAt] = useState<string>('')

  const utils = trpc.useUtils()

  const { data: round, isLoading } = trpc.round.getById.useQuery({ id: roundId })

  // Fetch competition for jury groups (DELIBERATION) and awards
  const competitionId = round?.competitionId
  const { data: competition } = trpc.competition.getById.useQuery(
    { id: competitionId! },
    { enabled: !!competitionId }
  )
  const juryGroups = competition?.juryGroups?.map((g: any) => ({ id: g.id, name: g.name }))

  // Fetch awards linked to this round
  const programId = competition?.programId
  const { data: awards } = trpc.specialAward.list.useQuery(
    { programId: programId! },
    { enabled: !!programId }
  )

  // Filter awards by this round
  const roundAwards = awards?.filter((a) => a.evaluationRoundId === roundId) || []

  // Update local config when round data changes
  if (round && !hasChanges) {
    const roundConfig = (round.configJson as Record<string, unknown>) ?? {}
    if (JSON.stringify(roundConfig) !== JSON.stringify(config)) {
      setConfig(roundConfig)
    }
    // Sync date fields
    const openStr = round.windowOpenAt ? new Date(round.windowOpenAt).toISOString().slice(0, 16) : ''
    const closeStr = round.windowCloseAt ? new Date(round.windowCloseAt).toISOString().slice(0, 16) : ''
    if (openStr !== windowOpenAt) setWindowOpenAt(openStr)
    if (closeStr !== windowCloseAt) setWindowCloseAt(closeStr)
  }

  const updateMutation = trpc.round.update.useMutation({
    onSuccess: () => {
      utils.round.getById.invalidate({ id: roundId })
      toast.success('Round configuration saved')
      setHasChanges(false)
    },
    onError: (err) => toast.error(err.message),
  })

  // Round lifecycle mutations
  const activateMutation = trpc.roundEngine.activate.useMutation({
    onSuccess: () => {
      utils.round.getById.invalidate({ id: roundId })
      toast.success('Round activated')
      setConfirmAction(null)
    },
    onError: (err) => toast.error(err.message),
  })

  const closeMutation = trpc.roundEngine.close.useMutation({
    onSuccess: () => {
      utils.round.getById.invalidate({ id: roundId })
      toast.success('Round closed')
      setConfirmAction(null)
    },
    onError: (err) => toast.error(err.message),
  })

  const archiveMutation = trpc.roundEngine.archive.useMutation({
    onSuccess: () => {
      utils.round.getById.invalidate({ id: roundId })
      toast.success('Round archived')
      setConfirmAction(null)
    },
    onError: (err) => toast.error(err.message),
  })

  const handleConfigChange = (newConfig: Record<string, unknown>) => {
    setConfig(newConfig)
    setHasChanges(true)
  }

  const handleSave = () => {
    updateMutation.mutate({
      id: roundId,
      configJson: config,
      windowOpenAt: windowOpenAt ? new Date(windowOpenAt) : null,
      windowCloseAt: windowCloseAt ? new Date(windowCloseAt) : null,
    })
  }

  const handleLifecycleAction = () => {
    if (confirmAction === 'activate') activateMutation.mutate({ roundId })
    else if (confirmAction === 'close') closeMutation.mutate({ roundId })
    else if (confirmAction === 'archive') archiveMutation.mutate({ roundId })
  }

  const isLifecyclePending = activateMutation.isPending || closeMutation.isPending || archiveMutation.isPending

  if (isLoading) {
    return (
      <div className="space-y-6">
        <div className="flex items-center gap-3">
          <Skeleton className="h-8 w-8" />
          <div>
            <Skeleton className="h-6 w-48" />
            <Skeleton className="h-4 w-32 mt-1" />
          </div>
        </div>
        <Skeleton className="h-10 w-full" />
        <Skeleton className="h-64 w-full" />
      </div>
    )
  }

  if (!round) {
    return (
      <div className="space-y-6">
        <div className="flex items-center gap-3">
          <Link href={"/admin/rounds" as Route}>
            <Button variant="ghost" size="icon" className="h-8 w-8">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div>
            <h1 className="text-xl font-bold">Round Not Found</h1>
            <p className="text-sm text-muted-foreground">The requested round does not exist</p>
          </div>
        </div>
      </div>
    )
  }

  const statusCfg = roundStatusConfig[round.status] ?? roundStatusConfig.ROUND_DRAFT
  const canActivate = round.status === 'ROUND_DRAFT'
  const canClose = round.status === 'ROUND_ACTIVE'
  const canArchive = round.status === 'ROUND_CLOSED'

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col gap-4">
        <div className="flex items-center gap-3">
          <Link href={"/admin/rounds" as Route}>
            <Button variant="ghost" size="icon" className="h-10 w-10">
              <ArrowLeft className="h-5 w-5" />
            </Button>
          </Link>
          <div className="flex-1 min-w-0">
            <p className="text-sm text-muted-foreground">Back to Rounds</p>
          </div>
        </div>

        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
          <div className="min-w-0">
            <div className="flex flex-wrap items-center gap-3 mb-2">
              <h1 className="text-3xl font-bold tracking-tight text-[#053d57]">{round.name}</h1>
              <Badge variant="secondary" className={cn('text-sm font-medium px-3 py-1', roundTypeColors[round.roundType])}>
                {round.roundType.replace('_', ' ')}
              </Badge>

              {/* Status Dropdown */}
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <button className={cn(
                    'inline-flex items-center gap-1.5 text-sm font-medium px-3 py-1 rounded-full transition-colors hover:opacity-80',
                    statusCfg.bgClass,
                  )}>
                    {statusCfg.label}
                    <ChevronDown className="h-3.5 w-3.5" />
                  </button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start">
                  {canActivate && (
                    <DropdownMenuItem onClick={() => setConfirmAction('activate')}>
                      <Play className="h-4 w-4 mr-2 text-emerald-600" />
                      Activate Round
                    </DropdownMenuItem>
                  )}
                  {canClose && (
                    <DropdownMenuItem onClick={() => setConfirmAction('close')}>
                      <Square className="h-4 w-4 mr-2 text-blue-600" />
                      Close Round
                    </DropdownMenuItem>
                  )}
                  {canArchive && (
                    <>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem onClick={() => setConfirmAction('archive')}>
                        <Archive className="h-4 w-4 mr-2" />
                        Archive Round
                      </DropdownMenuItem>
                    </>
                  )}
                  {!canActivate && !canClose && !canArchive && (
                    <DropdownMenuItem disabled>No actions available</DropdownMenuItem>
                  )}
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
            <p className="text-sm text-muted-foreground font-mono">{round.slug}</p>
          </div>

          <div className="flex items-center gap-2 shrink-0">
            {hasChanges && (
              <Button
                variant="default"
                size="default"
                onClick={handleSave}
                disabled={updateMutation.isPending}
                className="bg-[#de0f1e] hover:bg-[#de0f1e]/90"
              >
                {updateMutation.isPending ? (
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                ) : (
                  <Save className="h-4 w-4 mr-2" />
                )}
                Save Changes
              </Button>
            )}
          </div>
        </div>
      </div>

      {/* Summary Stats */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Card className="shadow-sm">
          <CardContent className="p-6">
            <div className="flex items-center gap-3">
              <div className="p-3 rounded-lg bg-gradient-to-br from-[#053d57]/10 to-[#557f8c]/10">
                <FileBox className="h-5 w-5 text-[#053d57]" />
              </div>
              <div>
                <p className="text-2xl font-bold text-[#053d57]">{round._count?.projectRoundStates ?? 0}</p>
                <p className="text-xs text-muted-foreground">Projects</p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="shadow-sm">
          <CardContent className="p-6">
            <div className="flex items-center gap-3">
              <div className="p-3 rounded-lg bg-gradient-to-br from-[#557f8c]/10 to-[#053d57]/10">
                <Users className="h-5 w-5 text-[#557f8c]" />
              </div>
              <div>
                <p className="text-2xl font-bold text-[#053d57]">{round.juryGroup?.members?.length ?? 0}</p>
                <p className="text-xs text-muted-foreground">Jury Members</p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="shadow-sm">
          <CardContent className="p-6">
            <div className="flex items-center gap-3">
              <div className="p-3 rounded-lg bg-gradient-to-br from-[#de0f1e]/10 to-[#de0f1e]/5">
                <Users className="h-5 w-5 text-[#de0f1e]" />
              </div>
              <div className="min-w-0 flex-1">
                {round.juryGroup ? (
                  <>
                    <p className="text-sm font-semibold text-[#053d57] truncate">{round.juryGroup.name}</p>
                    <p className="text-xs text-muted-foreground">Jury Group</p>
                  </>
                ) : (
                  <>
                    <p className="text-sm font-medium text-muted-foreground">No jury assigned</p>
                    <p className="text-xs text-muted-foreground">Jury Group</p>
                  </>
                )}
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="shadow-sm">
          <CardContent className="p-6">
            <div className="flex items-center gap-3">
              <div className="p-3 rounded-lg bg-gradient-to-br from-amber-500/10 to-amber-500/5">
                <Calendar className="h-5 w-5 text-amber-600" />
              </div>
              <div className="min-w-0 flex-1">
                {round.windowOpenAt || round.windowCloseAt ? (
                  <>
                    <p className="text-xs font-medium text-[#053d57] truncate">
                      {round.windowOpenAt && new Date(round.windowOpenAt).toLocaleDateString()}
                      {round.windowOpenAt && round.windowCloseAt && ' - '}
                      {round.windowCloseAt && new Date(round.windowCloseAt).toLocaleDateString()}
                    </p>
                    <p className="text-xs text-muted-foreground">Schedule</p>
                  </>
                ) : (
                  <>
                    <p className="text-xs font-medium text-muted-foreground">Not scheduled</p>
                    <p className="text-xs text-muted-foreground">Schedule</p>
                  </>
                )}
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Schedule Editor */}
      <Card className="shadow-sm">
        <CardContent className="p-6">
          <div className="flex items-center gap-2 mb-4">
            <Calendar className="h-4 w-4 text-[#053d57]" />
            <h3 className="text-sm font-semibold text-[#053d57]">Round Schedule</h3>
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <Label className="text-xs font-medium">Opens At</Label>
              <Input
                type="datetime-local"
                value={windowOpenAt}
                onChange={(e) => { setWindowOpenAt(e.target.value); setHasChanges(true) }}
                className="h-10"
              />
            </div>
            <div className="space-y-2">
              <Label className="text-xs font-medium">Closes At</Label>
              <Input
                type="datetime-local"
                value={windowCloseAt}
                onChange={(e) => { setWindowCloseAt(e.target.value); setHasChanges(true) }}
                className="h-10"
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Tabs */}
      <Tabs defaultValue="config" className="space-y-6">
        <TabsList className="w-full sm:w-auto overflow-x-auto bg-muted/50 p-1 h-auto">
          <TabsTrigger value="config" className="data-[state=active]:bg-white data-[state=active]:text-[#053d57] data-[state=active]:shadow-sm">
            Configuration
          </TabsTrigger>
          <TabsTrigger value="projects" className="data-[state=active]:bg-white data-[state=active]:text-[#053d57] data-[state=active]:shadow-sm">
            Projects
          </TabsTrigger>
          <TabsTrigger value="windows" className="data-[state=active]:bg-white data-[state=active]:text-[#053d57] data-[state=active]:shadow-sm">
            Submission Windows
          </TabsTrigger>
          <TabsTrigger value="documents" className="data-[state=active]:bg-white data-[state=active]:text-[#053d57] data-[state=active]:shadow-sm">
            Documents
          </TabsTrigger>
          <TabsTrigger value="awards" className="data-[state=active]:bg-white data-[state=active]:text-[#053d57] data-[state=active]:shadow-sm">
            Awards
            {roundAwards.length > 0 && (
              <Badge variant="secondary" className="ml-2 bg-[#de0f1e] text-white">
                {roundAwards.length}
              </Badge>
            )}
          </TabsTrigger>
        </TabsList>

        <TabsContent value="config" className="space-y-4">
          <RoundConfigForm
            roundType={round.roundType}
            config={config}
            onChange={handleConfigChange}
            juryGroups={juryGroups}
          />
        </TabsContent>

        <TabsContent value="projects" className="space-y-4">
          <ProjectStatesTable competitionId={round.competitionId} roundId={roundId} />
        </TabsContent>

        <TabsContent value="windows" className="space-y-4">
          <SubmissionWindowManager competitionId={round.competitionId} roundId={roundId} />
        </TabsContent>

        <TabsContent value="documents" className="space-y-4">
          <FileRequirementsEditor roundId={roundId} />
        </TabsContent>

        <TabsContent value="awards" className="space-y-4">
          <Card>
            <CardContent className="p-6">
              {roundAwards.length === 0 ? (
                <div className="text-center py-8 text-muted-foreground">
                  <p className="text-sm">No awards linked to this round</p>
                  <p className="text-xs mt-1">
                    Create an award and set this round as its source round to see it here
                  </p>
                </div>
              ) : (
                <div className="space-y-3">
                  {roundAwards.map((award) => {
                    const eligibleCount = award._count?.eligibilities || 0
                    const autoTagRules = award.autoTagRulesJson as { rules?: unknown[] } | null
                    const ruleCount = autoTagRules?.rules?.length || 0

                    return (
                      <Link
                        key={award.id}
                        href={`/admin/awards/${award.id}` as Route}
                        className="block"
                      >
                        <div className="flex items-start justify-between gap-4 rounded-lg border p-4 transition-all hover:bg-muted/50 hover:shadow-sm">
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center gap-2 mb-1">
                              <h3 className="font-medium truncate">{award.name}</h3>
                              <Badge
                                variant={
                                  award.eligibilityMode === 'SEPARATE_POOL'
                                    ? 'default'
                                    : 'secondary'
                                }
                                className="shrink-0"
                              >
                                {award.eligibilityMode === 'SEPARATE_POOL'
                                  ? 'Separate Pool'
                                  : 'Stay in Main'}
                              </Badge>
                            </div>
                            {award.description && (
                              <p className="text-sm text-muted-foreground line-clamp-1">
                                {award.description}
                              </p>
                            )}
                          </div>
                          <div className="flex items-center gap-4 text-sm text-muted-foreground shrink-0">
                            <div className="text-right">
                              <div className="font-medium text-foreground">
                                {ruleCount}
                              </div>
                              <div className="text-xs">
                                {ruleCount === 1 ? 'rule' : 'rules'}
                              </div>
                            </div>
                            <div className="text-right">
                              <div className="font-medium text-foreground">
                                {eligibleCount}
                              </div>
                              <div className="text-xs">eligible</div>
                            </div>
                          </div>
                        </div>
                      </Link>
                    )
                  })}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* Lifecycle Confirmation Dialog */}
      <Dialog open={!!confirmAction} onOpenChange={() => setConfirmAction(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>
              {confirmAction === 'activate' && 'Activate Round'}
              {confirmAction === 'close' && 'Close Round'}
              {confirmAction === 'archive' && 'Archive Round'}
            </DialogTitle>
            <DialogDescription>
              {confirmAction === 'activate' && 'This will open the round for submissions and evaluations. Projects will be able to enter this round.'}
              {confirmAction === 'close' && 'This will close the round. No more submissions or evaluations will be accepted.'}
              {confirmAction === 'archive' && 'This will archive the round. It will no longer appear in active views.'}
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setConfirmAction(null)}>Cancel</Button>
            <Button onClick={handleLifecycleAction} disabled={isLifecyclePending}>
              {isLifecyclePending && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
              Confirm
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}