'use client'

import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { CheckCircle2, AlertCircle, AlertTriangle, Layers, GitBranch, ArrowRight, ShieldCheck } from 'lucide-react'
import { InfoTooltip } from '@/components/ui/info-tooltip'
import { cn } from '@/lib/utils'
import { validateAll } from '@/lib/pipeline-validation'
import { normalizeStageConfig } from '@/lib/stage-config-schema'
import type { WizardState, ValidationResult, WizardStageConfig } from '@/types/pipeline-wizard'

type ReviewSectionProps = {
  state: WizardState
}

function ValidationStatusIcon({ result }: { result: ValidationResult }) {
  if (result.valid && result.warnings.length === 0) {
    return <CheckCircle2 className="h-4 w-4 text-emerald-500" />
  }
  if (result.valid && result.warnings.length > 0) {
    return <AlertTriangle className="h-4 w-4 text-amber-500" />
  }
  return <AlertCircle className="h-4 w-4 text-destructive" />
}

function ValidationSection({
  label,
  result,
}: {
  label: string
  result: ValidationResult
}) {
  return (
    <div className="flex items-start gap-3 py-2">
      <ValidationStatusIcon result={result} />
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium">{label}</p>
        {result.errors.map((err, i) => (
          <p key={i} className="text-xs text-destructive mt-0.5">
            {err}
          </p>
        ))}
        {result.warnings.map((warn, i) => (
          <p key={i} className="text-xs text-amber-600 mt-0.5">
            {warn}
          </p>
        ))}
        {result.valid && result.errors.length === 0 && result.warnings.length === 0 && (
          <p className="text-xs text-muted-foreground mt-0.5">Looks good</p>
        )}
      </div>
    </div>
  )
}

function stagePolicySummary(stage: WizardStageConfig): string {
  const config = normalizeStageConfig(
    stage.stageType,
    stage.configJson as Record<string, unknown>
  )

  switch (stage.stageType) {
    case 'INTAKE':
      return `${String(config.lateSubmissionPolicy)} late policy, ${Array.isArray(config.fileRequirements) ? config.fileRequirements.length : 0} file reqs`
    case 'FILTER':
      return `${Array.isArray(config.rules) ? config.rules.length : 0} rules, AI ${config.aiRubricEnabled ? 'on' : 'off'}`
    case 'EVALUATION':
      return `${String(config.requiredReviews)} reviews, load ${String(config.minLoadPerJuror)}-${String(config.maxLoadPerJuror)}`
    case 'SELECTION':
      return `ranking ${String(config.rankingMethod)}, tie ${String(config.tieBreaker)}`
    case 'LIVE_FINAL':
      return `jury ${config.juryVotingEnabled ? 'on' : 'off'}, audience ${config.audienceVotingEnabled ? 'on' : 'off'}`
    case 'RESULTS':
      return `publication ${String(config.publicationMode)}, rankings ${config.showRankings ? 'shown' : 'hidden'}`
    default:
      return 'Configured'
  }
}

export function ReviewSection({ state }: ReviewSectionProps) {
  const validation = validateAll(state)

  const totalTracks = state.tracks.length
  const totalStages = state.tracks.reduce((sum, t) => sum + t.stages.length, 0)
  const totalTransitions = state.tracks.reduce(
    (sum, t) => sum + Math.max(0, t.stages.length - 1),
    0
  )
  const enabledNotifications = Object.values(state.notificationConfig).filter(Boolean).length

  const blockers = [
    ...validation.sections.basics.errors,
    ...validation.sections.tracks.errors,
    ...validation.sections.notifications.errors,
  ]
  const warnings = [
    ...validation.sections.basics.warnings,
    ...validation.sections.tracks.warnings,
    ...validation.sections.notifications.warnings,
  ]

  const hasMainTrack = state.tracks.some((track) => track.kind === 'MAIN')
  const hasStages = totalStages > 0
  const hasNotificationDefaults = enabledNotifications > 0
  const publishReady = validation.valid && hasMainTrack && hasStages

  return (
    <div className="space-y-6">
      <div
        className={cn(
          'rounded-lg border p-4',
          publishReady
            ? 'border-emerald-200 bg-emerald-50'
            : 'border-destructive/30 bg-destructive/5'
        )}
      >
        <div className="flex items-start gap-2">
          {publishReady ? (
            <CheckCircle2 className="h-5 w-5 text-emerald-600 mt-0.5" />
          ) : (
            <AlertCircle className="h-5 w-5 text-destructive mt-0.5" />
          )}
          <div>
            <p className={cn('font-medium', publishReady ? 'text-emerald-800' : 'text-destructive')}>
              {publishReady
                ? 'Pipeline is ready for publish'
                : 'Pipeline has publish blockers'}
            </p>
            <p className="text-xs text-muted-foreground mt-1">
              Draft save can proceed with warnings. Publish should only proceed with zero blockers.
            </p>
          </div>
        </div>
      </div>

      <Card>
        <CardHeader className="pb-2">
          <div className="flex items-center gap-1.5">
            <CardTitle className="text-sm">Readiness Checks</CardTitle>
            <InfoTooltip content="Critical blockers prevent publish. Warnings indicate recommended fixes." />
          </div>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
            <div className="rounded-md border p-2 text-center">
              <p className="text-xl font-semibold">{blockers.length}</p>
              <p className="text-xs text-muted-foreground">Blockers</p>
            </div>
            <div className="rounded-md border p-2 text-center">
              <p className="text-xl font-semibold">{warnings.length}</p>
              <p className="text-xs text-muted-foreground">Warnings</p>
            </div>
            <div className="rounded-md border p-2 text-center">
              <p className="text-xl font-semibold">{totalTracks}</p>
              <p className="text-xs text-muted-foreground">Tracks</p>
            </div>
            <div className="rounded-md border p-2 text-center">
              <p className="text-xl font-semibold">{totalStages}</p>
              <p className="text-xs text-muted-foreground">Stages</p>
            </div>
          </div>

          {blockers.length > 0 && (
            <div className="rounded-md border border-destructive/30 bg-destructive/5 p-3">
              <p className="text-xs font-medium text-destructive mb-1">Publish Blockers</p>
              {blockers.map((blocker, i) => (
                <p key={i} className="text-xs text-destructive">
                  {blocker}
                </p>
              ))}
            </div>
          )}

          {warnings.length > 0 && (
            <div className="rounded-md border border-amber-300 bg-amber-50 p-3">
              <p className="text-xs font-medium text-amber-700 mb-1">Warnings</p>
              {warnings.map((warn, i) => (
                <p key={i} className="text-xs text-amber-700">
                  {warn}
                </p>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="pb-2">
          <div className="flex items-center gap-1.5">
            <CardTitle className="text-sm">Validation Detail</CardTitle>
            <InfoTooltip content="Automated checks per setup section." />
          </div>
        </CardHeader>
        <CardContent className="divide-y">
          <ValidationSection label="Basics" result={validation.sections.basics} />
          <ValidationSection label="Tracks & Stages" result={validation.sections.tracks} />
          <ValidationSection label="Notifications" result={validation.sections.notifications} />
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="pb-2">
          <div className="flex items-center gap-1.5">
            <CardTitle className="text-sm">Structure and Policy Matrix</CardTitle>
            <InfoTooltip content="Stage-by-stage policy preview used for final sanity check before creation." />
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
            <div className="text-center">
              <p className="text-2xl font-bold">{totalTracks}</p>
              <p className="text-xs text-muted-foreground flex items-center justify-center gap-1">
                <Layers className="h-3 w-3" />
                Tracks
              </p>
            </div>
            <div className="text-center">
              <p className="text-2xl font-bold">{totalStages}</p>
              <p className="text-xs text-muted-foreground flex items-center justify-center gap-1">
                <GitBranch className="h-3 w-3" />
                Stages
              </p>
            </div>
            <div className="text-center">
              <p className="text-2xl font-bold">{totalTransitions}</p>
              <p className="text-xs text-muted-foreground flex items-center justify-center gap-1">
                <ArrowRight className="h-3 w-3" />
                Transitions
              </p>
            </div>
            <div className="text-center">
              <p className="text-2xl font-bold">{enabledNotifications}</p>
              <p className="text-xs text-muted-foreground">Notifications</p>
            </div>
          </div>

          <div className="space-y-3">
            {state.tracks.map((track, i) => (
              <div key={i} className="rounded-md border p-3 space-y-2">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Badge
                      variant="secondary"
                      className={cn(
                        'text-[10px]',
                        track.kind === 'MAIN'
                          ? 'bg-blue-100 text-blue-700'
                          : track.kind === 'AWARD'
                            ? 'bg-amber-100 text-amber-700'
                            : 'bg-gray-100 text-gray-700'
                      )}
                    >
                      {track.kind}
                    </Badge>
                    <span className="text-sm font-medium">{track.name || '(unnamed track)'}</span>
                  </div>
                  <span className="text-xs text-muted-foreground">{track.stages.length} stages</span>
                </div>
                <div className="space-y-1">
                  {track.stages.map((stage, stageIndex) => (
                    <div
                      key={stageIndex}
                      className="flex items-center justify-between text-xs border-b last:border-0 py-1.5"
                    >
                      <span className="font-medium">
                        {stageIndex + 1}. {stage.name || '(unnamed stage)'} ({stage.stageType})
                      </span>
                      <span className="text-muted-foreground">{stagePolicySummary(stage)}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-sm flex items-center gap-2">
            <ShieldCheck className="h-4 w-4" />
            Publish Guardrails
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-2 text-sm">
          <div className="flex items-center justify-between rounded-md border p-2">
            <span>Main track present</span>
            <Badge variant={hasMainTrack ? 'default' : 'destructive'}>
              {hasMainTrack ? 'Pass' : 'Fail'}
            </Badge>
          </div>
          <div className="flex items-center justify-between rounded-md border p-2">
            <span>At least one stage configured</span>
            <Badge variant={hasStages ? 'default' : 'destructive'}>
              {hasStages ? 'Pass' : 'Fail'}
            </Badge>
          </div>
          <div className="flex items-center justify-between rounded-md border p-2">
            <span>Validation blockers cleared</span>
            <Badge variant={blockers.length === 0 ? 'default' : 'destructive'}>
              {blockers.length === 0 ? 'Pass' : 'Fail'}
            </Badge>
          </div>
          <div className="flex items-center justify-between rounded-md border p-2">
            <span>Notification policy configured</span>
            <Badge variant={hasNotificationDefaults ? 'default' : 'secondary'}>
              {hasNotificationDefaults ? 'Configured' : 'Optional'}
            </Badge>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}