'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { AlertCircle, CheckCircle2 } from 'lucide-react'
import { roundTypeConfig } from '@/lib/round-config'

type WizardRound = {
  tempId: string
  name: string
  slug: string
  roundType: string
  sortOrder: number
  configJson: Record<string, unknown>
}

type WizardJuryGroup = {
  tempId: string
  name: string
  slug: string
  defaultMaxAssignments: number
  defaultCapMode: string
  sortOrder: number
}

type WizardState = {
  programId: string
  name: string
  slug: string
  categoryMode: string
  startupFinalistCount: number
  conceptFinalistCount: number
  notifyOnRoundAdvance: boolean
  notifyOnDeadlineApproach: boolean
  deadlineReminderDays: number[]
  rounds: WizardRound[]
  juryGroups: WizardJuryGroup[]
}

type ReviewSectionProps = {
  state: WizardState
}

const roundTypeColors: Record<string, string> = Object.fromEntries(
  Object.entries(roundTypeConfig).map(([k, v]) => [k, v.badgeClass])
)

export function ReviewSection({ state }: ReviewSectionProps) {
  const warnings: string[] = []

  if (!state.name) warnings.push('Competition name is required')
  if (!state.slug) warnings.push('Competition slug is required')
  if (state.rounds.length === 0) warnings.push('At least one round is required')
  if (state.rounds.some((r) => !r.name)) warnings.push('All rounds must have a name')
  if (state.rounds.some((r) => !r.slug)) warnings.push('All rounds must have a slug')
  if (state.juryGroups.some((g) => !g.name)) warnings.push('All jury groups must have a name')
  if (state.juryGroups.some((g) => !g.slug)) warnings.push('All jury groups must have a slug')

  return (
    <div className="space-y-6">
      {/* Validation Status */}
      {warnings.length > 0 ? (
        <Card className="border-destructive/50 bg-destructive/5">
          <CardContent className="pt-6">
            <div className="flex items-start gap-2">
              <AlertCircle className="h-5 w-5 text-destructive shrink-0 mt-0.5" />
              <div className="flex-1">
                <p className="text-sm font-medium text-destructive">
                  Please fix the following issues:
                </p>
                <ul className="mt-2 space-y-1 text-sm text-destructive/90">
                  {warnings.map((warning, index) => (
                    <li key={index} className="ml-4 list-disc">
                      {warning}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </CardContent>
        </Card>
      ) : (
        <Card className="border-emerald-500/50 bg-emerald-500/5">
          <CardContent className="pt-6">
            <div className="flex items-center gap-2">
              <CheckCircle2 className="h-5 w-5 text-emerald-600" />
              <p className="text-sm font-medium text-emerald-700">
                Ready to create competition
              </p>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Competition Summary */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Competition Details</CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <div>
            <p className="text-xs font-medium text-muted-foreground">Name</p>
            <p className="text-sm">{state.name || <em className="text-muted-foreground">Not set</em>}</p>
          </div>
          <div>
            <p className="text-xs font-medium text-muted-foreground">Slug</p>
            <p className="text-sm font-mono">{state.slug || <em className="text-muted-foreground">Not set</em>}</p>
          </div>
          <div className="grid gap-3 sm:grid-cols-2">
            <div>
              <p className="text-xs font-medium text-muted-foreground">Category Mode</p>
              <p className="text-sm">{state.categoryMode}</p>
            </div>
            <div>
              <p className="text-xs font-medium text-muted-foreground">Finalists</p>
              <p className="text-sm">
                {state.startupFinalistCount} Startup / {state.conceptFinalistCount} Concept
              </p>
            </div>
          </div>
          <div>
            <p className="text-xs font-medium text-muted-foreground mb-1.5">Notifications</p>
            <div className="flex flex-wrap gap-1.5">
              {state.notifyOnRoundAdvance && (
                <Badge variant="secondary" className="text-[10px]">
                  Round Advance
                </Badge>
              )}
              {state.notifyOnDeadlineApproach && (
                <Badge variant="secondary" className="text-[10px]">
                  Deadline Reminders ({state.deadlineReminderDays.join(', ')} days)
                </Badge>
              )}
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Rounds Summary */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">
            Rounds ({state.rounds.length})
          </CardTitle>
        </CardHeader>
        <CardContent>
          {state.rounds.length === 0 ? (
            <p className="text-sm text-muted-foreground">No rounds configured</p>
          ) : (
            <div className="space-y-2">
              {state.rounds.map((round, index) => (
                <div key={round.tempId} className="flex items-center gap-3 py-2 border-b last:border-0">
                  <div className="flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-bold shrink-0">
                    {index + 1}
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium truncate">{round.name || <em>Unnamed</em>}</p>
                    <p className="text-xs text-muted-foreground font-mono truncate">{round.slug || <em>no-slug</em>}</p>
                  </div>
                  <Badge
                    variant="secondary"
                    className={roundTypeColors[round.roundType] ?? 'bg-gray-100 text-gray-700'}
                  >
                    {round.roundType.replace('_', ' ')}
                  </Badge>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Jury Groups Summary */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">
            Jury Groups ({state.juryGroups.length})
          </CardTitle>
        </CardHeader>
        <CardContent>
          {state.juryGroups.length === 0 ? (
            <p className="text-sm text-muted-foreground">No jury groups configured</p>
          ) : (
            <div className="space-y-2">
              {state.juryGroups.map((group, index) => (
                <div key={group.tempId} className="flex items-center gap-3 py-2 border-b last:border-0">
                  <div className="flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-bold shrink-0">
                    {index + 1}
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium truncate">{group.name || <em>Unnamed</em>}</p>
                    <p className="text-xs text-muted-foreground font-mono truncate">{group.slug || <em>no-slug</em>}</p>
                  </div>
                  <div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
                    <span>Max: {group.defaultMaxAssignments}</span>
                    <Badge variant="outline" className="text-[10px]">
                      {group.defaultCapMode}
                    </Badge>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
