import type { NightModeStatus, ServicesInfo } from './types'

interface ServiceListProps {
  services: ServicesInfo | null
  status: NightModeStatus | null
}

function getServiceStatusColor(state: string) {
  const lower = state.toLowerCase()
  if (lower === 'running' || lower.includes('up')) {
    return 'bg-green-100 text-green-800'
  }
  if (lower === 'exited' || lower.includes('exit')) {
    return 'bg-slate-100 text-slate-600'
  }
  if (lower === 'paused' || lower.includes('pause')) {
    return 'bg-yellow-100 text-yellow-800'
  }
  return 'bg-slate-100 text-slate-600'
}

export function ServiceList({ services, status }: ServiceListProps) {
  return (
    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
      <div className="p-6 border-b border-slate-200">
        <h3 className="text-lg font-semibold text-slate-900">Services</h3>
        <p className="text-sm text-slate-500 mt-1">
          Gruen = wird verwaltet, Grau = ausgeschlossen (laeuft immer)
        </p>
      </div>

      <div className="p-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
          {services?.all_services.map(service => {
            const serviceStatus = status?.services_status[service] || 'unknown'
            const isExcluded = services.excluded_services.includes(service)

            return (
              <div
                key={service}
                className={`flex items-center justify-between px-4 py-3 rounded-lg border ${
                  isExcluded
                    ? 'bg-slate-50 border-slate-200'
                    : 'bg-orange-50 border-orange-200'
                }`}
              >
                <div className="flex items-center gap-2">
                  {isExcluded ? (
                    <svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                    </svg>
                  ) : (
                    <svg className="w-4 h-4 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                    </svg>
                  )}
                  <span className={`text-sm font-medium ${isExcluded ? 'text-slate-500' : 'text-slate-900'}`}>
                    {service}
                  </span>
                </div>
                <span className={`px-2 py-0.5 rounded text-xs font-semibold ${getServiceStatusColor(serviceStatus)}`}>
                  {serviceStatus}
                </span>
              </div>
            )
          })}

          {/* Auch excluded Services anzeigen, die nicht in all_services sind */}
          {services?.excluded_services
            .filter(s => !services.all_services.includes(s))
            .map(service => (
              <div
                key={service}
                className="flex items-center justify-between px-4 py-3 rounded-lg border bg-slate-50 border-slate-200"
              >
                <div className="flex items-center gap-2">
                  <svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                  </svg>
                  <span className="text-sm font-medium text-slate-500">
                    {service}
                  </span>
                </div>
                <span className="px-2 py-0.5 rounded text-xs font-semibold bg-slate-100 text-slate-600">
                  excluded
                </span>
              </div>
            ))}
        </div>
      </div>
    </div>
  )
}
