'use client'

import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { CheckCircle2, AlertCircle, AlertTriangle, Layers, GitBranch, ArrowRight } from 'lucide-react'
import { cn } from '@/lib/utils'
import { validateAll } from '@/lib/pipeline-validation'
import type { WizardState, ValidationResult } 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>
  )
}

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

  const totalTracks = state.tracks.length
  const mainTracks = state.tracks.filter((t) => t.kind === 'MAIN').length
  const awardTracks = state.tracks.filter((t) => t.kind === 'AWARD').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

  return (
    <div className="space-y-6">
      {/* Overall Status */}
      <div
        className={cn(
          'rounded-lg border p-4',
          validation.valid
            ? 'border-emerald-200 bg-emerald-50'
            : 'border-destructive/30 bg-destructive/5'
        )}
      >
        <div className="flex items-center gap-2">
          {validation.valid ? (
            <>
              <CheckCircle2 className="h-5 w-5 text-emerald-600" />
              <p className="font-medium text-emerald-800">
                Pipeline is ready to be saved
              </p>
            </>
          ) : (
            <>
              <AlertCircle className="h-5 w-5 text-destructive" />
              <p className="font-medium text-destructive">
                Pipeline has validation errors that must be fixed
              </p>
            </>
          )}
        </div>
      </div>

      {/* Validation Checks */}
      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-sm">Validation Checks</CardTitle>
        </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>

      {/* Structure Summary */}
      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-sm">Structure Summary</CardTitle>
        </CardHeader>
        <CardContent>
          <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>

          {/* Track breakdown */}
          <div className="mt-4 space-y-2">
            {state.tracks.map((track, i) => (
              <div key={i} className="flex items-center justify-between text-sm">
                <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>{track.name || '(unnamed)'}</span>
                </div>
                <span className="text-muted-foreground text-xs">
                  {track.stages.length} stages
                </span>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}