'use client'

/**
 * DevOps Pipeline Sidebar — shared icons, badge, and live-status hook.
 *
 * Extracted from DevOpsPipelineSidebar.tsx to stay within the 500 LOC budget.
 */

import { useState, useEffect } from 'react'
import type { DevOpsToolId, PipelineLiveStatus } from '@/types/infrastructure-modules'

// =============================================================================
// Icons
// =============================================================================

export const ToolIcon = ({ id }: { id: DevOpsToolId }) => {
  switch (id) {
    case 'ci-cd':
      return (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
      )
    case 'tests':
      return (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      )
    case 'sbom':
      return (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
            d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
        </svg>
      )
    case 'security':
      return (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
            d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
        </svg>
      )
    default:
      return null
  }
}

// Server/Pipeline Icon fuer Header
export const ServerIcon = () => (
  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
      d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
  </svg>
)

// Play Icon fuer Quick Action
export const PlayIcon = () => (
  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
      d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
      d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
)

// =============================================================================
// Live Status Hook (optional - fetches status from API)
// =============================================================================

export function usePipelineLiveStatus(): PipelineLiveStatus | null {
  const [status, setStatus] = useState<PipelineLiveStatus | null>(null)

  useEffect(() => {
    // Live status fetching not yet implemented
  }, [])

  return status
}

// =============================================================================
// Status Badge Component
// =============================================================================

interface StatusBadgeProps {
  count: number
  type: 'backlog' | 'security' | 'running'
}

export function StatusBadge({ count, type }: StatusBadgeProps) {
  if (count === 0) return null

  const colors = {
    backlog: 'bg-amber-500',
    security: 'bg-red-500',
    running: 'bg-green-500 animate-pulse',
  }

  return (
    <span className={`${colors[type]} text-white text-xs font-medium px-1.5 py-0.5 rounded-full min-w-[1.25rem] text-center`}>
      {count}
    </span>
  )
}
