'use client'

/**
 * Responsive DevOps Pipeline Sidebar (Mobile FAB + Drawer)
 *
 * Extracted from DevOpsPipelineSidebar.tsx.
 * Desktop (xl+): Fixierte Sidebar rechts
 * Mobile/Tablet: Floating Action Button unten rechts, oeffnet Drawer
 */

import Link from 'next/link'
import { useState, useEffect } from 'react'
import type {
  DevOpsPipelineSidebarResponsiveProps,
  PipelineLiveStatus,
} from '@/types/infrastructure-modules'
import { DEVOPS_PIPELINE_MODULES } from '@/types/infrastructure-modules'
import { DevOpsPipelineSidebar } from './DevOpsPipelineSidebar'

// Server/Pipeline Icon fuer Header
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
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>
)

// Inline ToolIcon (duplicated to avoid circular imports)
const ToolIcon = ({ id }: { id: string }) => {
  const icons: Record<string, JSX.Element> = {
    'ci-cd': <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>,
    'tests': <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>,
    'sbom': <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>,
    'security': <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>,
  }
  return icons[id] || null
}

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

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>
  )
}

function usePipelineLiveStatus(): PipelineLiveStatus | null {
  const [status, setStatus] = useState<PipelineLiveStatus | null>(null)
  useEffect(() => { /* placeholder for live status fetch */ }, [])
  return status
}

export function DevOpsPipelineSidebarResponsive({
  currentTool,
  compact = false,
  className = '',
  fabPosition = 'bottom-right',
}: DevOpsPipelineSidebarResponsiveProps) {
  const [isMobileOpen, setIsMobileOpen] = useState(false)
  const liveStatus = usePipelineLiveStatus()

  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') setIsMobileOpen(false)
    }
    window.addEventListener('keydown', handleEscape)
    return () => window.removeEventListener('keydown', handleEscape)
  }, [])

  useEffect(() => {
    if (isMobileOpen) {
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = ''
    }
    return () => { document.body.style.overflow = '' }
  }, [isMobileOpen])

  const fabPositionClasses = fabPosition === 'bottom-right' ? 'right-4 bottom-20' : 'left-4 bottom-20'
  const totalBadgeCount = liveStatus ? liveStatus.backlogCount + liveStatus.securityFindingsCount : 0

  return (
    <>
      {/* Desktop: Fixed Sidebar */}
      <div className={`hidden xl:block fixed right-6 top-24 w-64 z-10 ${className}`}>
        <DevOpsPipelineSidebar currentTool={currentTool} compact={compact} />
      </div>

      {/* Mobile/Tablet: FAB */}
      <button
        onClick={() => setIsMobileOpen(true)}
        className={`xl:hidden fixed ${fabPositionClasses} z-40 w-14 h-14 bg-gradient-to-r from-orange-500 to-amber-500 text-white rounded-full shadow-lg hover:shadow-xl transition-all flex items-center justify-center group`}
        aria-label="DevOps Pipeline Navigation oeffnen"
      >
        <ServerIcon />
        {totalBadgeCount > 0 && (
          <span className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center">
            {totalBadgeCount > 9 ? '9+' : totalBadgeCount}
          </span>
        )}
        {liveStatus?.isRunning && (
          <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full animate-pulse" />
        )}
      </button>

      {/* Mobile/Tablet: Drawer Overlay */}
      {isMobileOpen && (
        <div className="xl:hidden fixed inset-0 z-50">
          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity" onClick={() => setIsMobileOpen(false)} />
          <div className="absolute right-0 top-0 bottom-0 w-80 max-w-[85vw] bg-white dark:bg-gray-900 shadow-2xl transform transition-transform animate-slide-in-right">
            <div className="flex items-center justify-between px-4 py-4 border-b border-slate-200 dark:border-gray-700 bg-gradient-to-r from-orange-50 to-amber-50 dark:from-orange-900/20 dark:to-amber-900/20">
              <div className="flex items-center gap-2">
                <span className="text-orange-600 dark:text-orange-400"><ServerIcon /></span>
                <span className="font-semibold text-slate-700 dark:text-slate-200">DevOps Pipeline</span>
                {liveStatus?.isRunning && <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />}
              </div>
              <button onClick={() => setIsMobileOpen(false)} className="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 rounded-lg hover:bg-slate-100 dark:hover:bg-gray-800 transition-colors" aria-label="Schliessen">
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
              </button>
            </div>
            <div className="p-4 space-y-4 overflow-y-auto max-h-[calc(100vh-80px)]">
              <div className="space-y-2">
                {DEVOPS_PIPELINE_MODULES.map((tool) => (
                  <Link key={tool.id} href={tool.href} onClick={() => setIsMobileOpen(false)} className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all ${currentTool === tool.id ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 font-medium shadow-sm' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-800'}`}>
                    <ToolIcon id={tool.id} />
                    <div className="flex-1">
                      <div className="text-base font-medium">{tool.name}</div>
                      <div className="text-sm text-slate-500 dark:text-slate-500">{tool.description}</div>
                    </div>
                    {tool.id === 'tests' && liveStatus && <StatusBadge count={liveStatus.backlogCount} type="backlog" />}
                    {tool.id === 'security' && liveStatus && <StatusBadge count={liveStatus.securityFindingsCount} type="security" />}
                    {currentTool === tool.id && <span className="flex-shrink-0 w-2.5 h-2.5 bg-orange-500 rounded-full" />}
                  </Link>
                ))}
              </div>
              <div className="pt-4 border-t border-slate-200 dark:border-gray-700">
                <div className="text-sm font-medium text-slate-500 dark:text-slate-400 mb-3">Pipeline Flow</div>
                <div className="flex items-center justify-center gap-2 p-4 bg-slate-50 dark:bg-gray-800 rounded-xl">
                  {[{e:'📝',l:'Code'},{e:'🏗️',l:'Build'},{e:'✅',l:'Test'},{e:'🚀',l:'Deploy'}].map((s,i,a)=>(
                    <span key={s.l} className="flex items-center gap-1.5">
                      <span className="flex flex-col items-center"><span className="text-2xl">{s.e}</span><span className="text-xs text-slate-500 mt-1">{s.l}</span></span>
                      {i<a.length-1 && <span className="text-slate-400">→</span>}
                    </span>
                  ))}
                </div>
              </div>
              <div className="pt-4 border-t border-slate-200 dark:border-gray-700">
                <button onClick={() => { alert('Pipeline wird getriggert...'); setIsMobileOpen(false) }} className="w-full flex items-center justify-center gap-2 px-4 py-3 text-base text-white bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 rounded-xl transition-colors font-medium">
                  <PlayIcon /><span>Pipeline triggern</span>
                </button>
              </div>
              <div className="pt-4 border-t border-slate-200 dark:border-gray-700">
                <Link href="/infrastructure" onClick={() => setIsMobileOpen(false)} className="flex items-center gap-2 px-3 py-2 text-sm text-orange-600 dark:text-orange-400 hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded-lg transition-colors">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
                  <span>Zur Infrastructure-Uebersicht</span>
                </Link>
              </div>
            </div>
          </div>
        </div>
      )}

      <style jsx>{`
        @keyframes slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
        .animate-slide-in-right { animation: slide-in-right 0.2s ease-out; }
      `}</style>
    </>
  )
}