MOPC-Portal/src/app/(admin)/admin/rounds/pipeline/[id]/page.tsx

'use client'

import { useState, useEffect, useRef } from 'react'
import { useParams } from 'next/navigation'
import Link from 'next/link'
import type { Route } from 'next'
import { trpc } from '@/lib/trpc/client'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
} from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { toast } from 'sonner'
import { cn } from '@/lib/utils'
import {
  ArrowLeft,
  MoreHorizontal,
  Rocket,
  Archive,
  Settings2,
  Layers,
  GitBranch,
  Loader2,
  ChevronDown,
} from 'lucide-react'

import { InlineEditableText } from '@/components/ui/inline-editable-text'
import { PipelineFlowchart } from '@/components/admin/pipeline/pipeline-flowchart'
import { StageConfigEditor } from '@/components/admin/pipeline/stage-config-editor'
import { usePipelineInlineEdit } from '@/hooks/use-pipeline-inline-edit'

import { IntakePanel } from '@/components/admin/pipeline/stage-panels/intake-panel'
import { FilterPanel } from '@/components/admin/pipeline/stage-panels/filter-panel'
import { EvaluationPanel } from '@/components/admin/pipeline/stage-panels/evaluation-panel'
import { SelectionPanel } from '@/components/admin/pipeline/stage-panels/selection-panel'
import { LiveFinalPanel } from '@/components/admin/pipeline/stage-panels/live-final-panel'
import { ResultsPanel } from '@/components/admin/pipeline/stage-panels/results-panel'

const statusColors: Record<string, string> = {
  DRAFT: 'bg-gray-100 text-gray-700',
  ACTIVE: 'bg-emerald-100 text-emerald-700',
  ARCHIVED: 'bg-muted text-muted-foreground',
  CLOSED: 'bg-blue-100 text-blue-700',
}

function StagePanel({
  stageId,
  stageType,
  configJson,
}: {
  stageId: string
  stageType: string
  configJson: Record<string, unknown> | null
}) {
  switch (stageType) {
    case 'INTAKE':
      return <IntakePanel stageId={stageId} configJson={configJson} />
    case 'FILTER':
      return <FilterPanel stageId={stageId} configJson={configJson} />
    case 'EVALUATION':
      return <EvaluationPanel stageId={stageId} configJson={configJson} />
    case 'SELECTION':
      return <SelectionPanel stageId={stageId} configJson={configJson} />
    case 'LIVE_FINAL':
      return <LiveFinalPanel stageId={stageId} configJson={configJson} />
    case 'RESULTS':
      return <ResultsPanel stageId={stageId} configJson={configJson} />
    default:
      return (
        <Card>
          <CardContent className="py-8 text-center text-sm text-muted-foreground">
            Unknown stage type: {stageType}
          </CardContent>
        </Card>
      )
  }
}

export default function PipelineDetailPage() {
  const params = useParams()
  const pipelineId = params.id as string

  const [selectedTrackId, setSelectedTrackId] = useState<string | null>(null)
  const [selectedStageId, setSelectedStageId] = useState<string | null>(null)

  const stagePanelRef = useRef<HTMLDivElement>(null)

  const { data: pipeline, isLoading } = trpc.pipeline.getDraft.useQuery({
    id: pipelineId,
  })

  const { isUpdating, updatePipeline, updateStageConfig } =
    usePipelineInlineEdit(pipelineId)

  const publishMutation = trpc.pipeline.publish.useMutation({
    onSuccess: () => toast.success('Pipeline published'),
    onError: (err) => toast.error(err.message),
  })

  const updateMutation = trpc.pipeline.update.useMutation({
    onSuccess: () => toast.success('Pipeline updated'),
    onError: (err) => toast.error(err.message),
  })

  // Auto-select first track and stage on load
  useEffect(() => {
    if (pipeline && pipeline.tracks.length > 0 && !selectedTrackId) {
      const firstTrack = pipeline.tracks.sort((a, b) => a.sortOrder - b.sortOrder)[0]
      setSelectedTrackId(firstTrack.id)
      if (firstTrack.stages.length > 0) {
        const firstStage = firstTrack.stages.sort((a, b) => a.sortOrder - b.sortOrder)[0]
        setSelectedStageId(firstStage.id)
      }
    }
  }, [pipeline, selectedTrackId])

  // Scroll to stage panel when a stage is selected
  useEffect(() => {
    if (selectedStageId && stagePanelRef.current) {
      stagePanelRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
    }
  }, [selectedStageId])

  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 (!pipeline) {
    return (
      <div className="space-y-6">
        <div className="flex items-center gap-3">
          <Link href="/admin/rounds/pipelines">
            <Button variant="ghost" size="icon">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div>
            <h1 className="text-xl font-bold">Pipeline Not Found</h1>
            <p className="text-sm text-muted-foreground">
              The requested pipeline does not exist
            </p>
          </div>
        </div>
      </div>
    )
  }

  const selectedTrack = pipeline.tracks.find((t) => t.id === selectedTrackId)
  const selectedStage = selectedTrack?.stages.find(
    (s) => s.id === selectedStageId
  )

  const handleTrackChange = (trackId: string) => {
    setSelectedTrackId(trackId)
    const track = pipeline.tracks.find((t) => t.id === trackId)
    if (track && track.stages.length > 0) {
      const firstStage = track.stages.sort((a, b) => a.sortOrder - b.sortOrder)[0]
      setSelectedStageId(firstStage.id)
    } else {
      setSelectedStageId(null)
    }
  }

  const handleStageSelect = (stageId: string) => {
    setSelectedStageId(stageId)
  }

  const handleStatusChange = async (newStatus: 'DRAFT' | 'ACTIVE' | 'CLOSED' | 'ARCHIVED') => {
    await updateMutation.mutateAsync({
      id: pipelineId,
      status: newStatus,
    })
  }

  // Prepare flowchart data for the selected track
  const flowchartTracks = selectedTrack ? [selectedTrack] : []

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Link href="/admin/rounds/pipelines">
            <Button variant="ghost" size="icon">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div>
            <div className="flex items-center gap-2">
              <InlineEditableText
                value={pipeline.name}
                onSave={(newName) => updatePipeline({ name: newName })}
                variant="h1"
                placeholder="Untitled Pipeline"
                disabled={isUpdating}
              />
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <button
                    className={cn(
                      'inline-flex items-center gap-1 text-[10px] px-2 py-1 rounded-full transition-colors',
                      statusColors[pipeline.status] ?? '',
                      'hover:opacity-80'
                    )}
                  >
                    {pipeline.status}
                    <ChevronDown className="h-3 w-3" />
                  </button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start">
                  <DropdownMenuItem
                    onClick={() => handleStatusChange('DRAFT')}
                    disabled={pipeline.status === 'DRAFT' || updateMutation.isPending}
                  >
                    Draft
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    onClick={() => handleStatusChange('ACTIVE')}
                    disabled={pipeline.status === 'ACTIVE' || updateMutation.isPending}
                  >
                    Active
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    onClick={() => handleStatusChange('CLOSED')}
                    disabled={pipeline.status === 'CLOSED' || updateMutation.isPending}
                  >
                    Closed
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem
                    onClick={() => handleStatusChange('ARCHIVED')}
                    disabled={pipeline.status === 'ARCHIVED' || updateMutation.isPending}
                  >
                    Archived
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
            <div className="flex items-center gap-1 text-sm">
              <span className="text-muted-foreground">slug:</span>
              <InlineEditableText
                value={pipeline.slug}
                onSave={(newSlug) => updatePipeline({ slug: newSlug })}
                variant="mono"
                placeholder="pipeline-slug"
                disabled={isUpdating}
              />
            </div>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <Link href={`/admin/rounds/pipeline/${pipelineId}/advanced` as Route}>
            <Button variant="outline" size="sm">
              <Settings2 className="h-4 w-4 mr-1" />
              Advanced
            </Button>
          </Link>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" size="icon" className="h-8 w-8">
                <MoreHorizontal className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              {pipeline.status === 'DRAFT' && (
                <DropdownMenuItem
                  disabled={publishMutation.isPending}
                  onClick={() => publishMutation.mutate({ id: pipelineId })}
                >
                  {publishMutation.isPending ? (
                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  ) : (
                    <Rocket className="h-4 w-4 mr-2" />
                  )}
                  Publish
                </DropdownMenuItem>
              )}
              {pipeline.status === 'ACTIVE' && (
                <DropdownMenuItem
                  disabled={updateMutation.isPending}
                  onClick={() => handleStatusChange('CLOSED')}
                >
                  Close Pipeline
                </DropdownMenuItem>
              )}
              <DropdownMenuSeparator />
              <DropdownMenuItem
                disabled={updateMutation.isPending}
                onClick={() => handleStatusChange('ARCHIVED')}
              >
                <Archive className="h-4 w-4 mr-2" />
                Archive
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

      {/* Pipeline Summary */}
      <div className="grid gap-4 sm:grid-cols-3">
        <Card>
          <CardContent className="pt-4">
            <div className="flex items-center gap-2">
              <Layers className="h-4 w-4 text-blue-500" />
              <span className="text-sm font-medium">Tracks</span>
            </div>
            <p className="text-2xl font-bold mt-1">{pipeline.tracks.length}</p>
            <p className="text-xs text-muted-foreground">
              {pipeline.tracks.filter((t) => t.kind === 'MAIN').length} main,{' '}
              {pipeline.tracks.filter((t) => t.kind === 'AWARD').length} award
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-4">
            <div className="flex items-center gap-2">
              <GitBranch className="h-4 w-4 text-purple-500" />
              <span className="text-sm font-medium">Stages</span>
            </div>
            <p className="text-2xl font-bold mt-1">
              {pipeline.tracks.reduce((sum, t) => sum + t.stages.length, 0)}
            </p>
            <p className="text-xs text-muted-foreground">across all tracks</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-4">
            <div className="flex items-center gap-2">
              <GitBranch className="h-4 w-4 text-emerald-500" />
              <span className="text-sm font-medium">Transitions</span>
            </div>
            <p className="text-2xl font-bold mt-1">
              {pipeline.tracks.reduce(
                (sum, t) =>
                  sum +
                  t.stages.reduce(
                    (s, stage) => s + stage.transitionsFrom.length,
                    0
                  ),
                0
              )}
            </p>
            <p className="text-xs text-muted-foreground">stage connections</p>
          </CardContent>
        </Card>
      </div>

      {/* Track Switcher (only if multiple tracks) */}
      {pipeline.tracks.length > 1 && (
        <div className="flex items-center gap-2 flex-wrap">
          {pipeline.tracks
            .sort((a, b) => a.sortOrder - b.sortOrder)
            .map((track) => (
              <button
                key={track.id}
                onClick={() => handleTrackChange(track.id)}
                className={cn(
                  'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium transition-colors',
                  selectedTrackId === track.id
                    ? 'bg-primary text-primary-foreground'
                    : 'bg-muted hover:bg-muted/80 text-muted-foreground'
                )}
              >
                <span>{track.name}</span>
                <Badge
                  variant="outline"
                  className={cn(
                    'text-[9px] h-4 px-1',
                    selectedTrackId === track.id
                      ? 'border-primary-foreground/20 text-primary-foreground/80'
                      : ''
                  )}
                >
                  {track.kind}
                </Badge>
              </button>
            ))}
        </div>
      )}

      {/* Pipeline Flowchart */}
      {flowchartTracks.length > 0 ? (
        <PipelineFlowchart
          tracks={flowchartTracks}
          selectedStageId={selectedStageId}
          onStageSelect={handleStageSelect}
        />
      ) : (
        <Card>
          <CardContent className="py-8 text-center text-sm text-muted-foreground">
            No tracks configured for this pipeline
          </CardContent>
        </Card>
      )}

      {/* Selected Stage Detail */}
      <div ref={stagePanelRef}>
        {selectedStage ? (
          <div className="space-y-4">
            <div className="border-t pt-4">
              <h2 className="text-lg font-semibold text-muted-foreground">
                Selected Stage: <span className="text-foreground">{selectedStage.name}</span>
              </h2>
            </div>

            {/* Stage Config Editor */}
            <StageConfigEditor
              stageId={selectedStage.id}
              stageName={selectedStage.name}
              stageType={selectedStage.stageType}
              configJson={selectedStage.configJson as Record<string, unknown> | null}
              onSave={updateStageConfig}
              isSaving={isUpdating}
            />

            {/* Stage Activity Panel */}
            <StagePanel
              stageId={selectedStage.id}
              stageType={selectedStage.stageType}
              configJson={selectedStage.configJson as Record<string, unknown> | null}
            />
          </div>
        ) : (
          <Card>
            <CardContent className="py-12 text-center">
              <p className="text-sm text-muted-foreground">
                Click a stage in the flowchart above to view its configuration and activity
              </p>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}