'use client'

import { useState } from 'react'
import type { ServiceNode } from '../types'
import { ARCHITECTURE_SERVICES, LAYERS, DATAFLOW_DIAGRAM } from '../data'
import { getArchTypeColor, getArchTypeLabel } from '../helpers'
import ServiceDetailPanel from './ServiceDetailPanel'

export default function OverviewTab() {
  const [selectedArchService, setSelectedArchService] = useState<ServiceNode | null>(null)
  const [activeLayer, setActiveLayer] = useState<string>('all')

  const getServicesForLayer = (layer: typeof LAYERS[0]) => {
    return ARCHITECTURE_SERVICES.filter(s => layer.types.includes(s.type))
  }

  const archStats = {
    total: ARCHITECTURE_SERVICES.length,
    frontends: ARCHITECTURE_SERVICES.filter(s => s.type === 'frontend').length,
    backends: ARCHITECTURE_SERVICES.filter(s => s.type === 'backend').length,
    databases: ARCHITECTURE_SERVICES.filter(s => s.type === 'database').length,
    infrastructure: ARCHITECTURE_SERVICES.filter(s => ['cache', 'search', 'storage', 'security', 'communication', 'ai', 'erp'].includes(s.type)).length,
  }

  return (
    <div className="space-y-6">
      {/* Stats */}
      <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
        <div className="bg-white rounded-lg shadow p-4">
          <div className="text-3xl font-bold text-slate-800">{archStats.total}</div>
          <div className="text-sm text-slate-500">Services Total</div>
        </div>
        <div className="bg-white rounded-lg shadow p-4">
          <div className="text-3xl font-bold text-blue-600">{archStats.frontends}</div>
          <div className="text-sm text-slate-500">Frontends</div>
        </div>
        <div className="bg-white rounded-lg shadow p-4">
          <div className="text-3xl font-bold text-green-600">{archStats.backends}</div>
          <div className="text-sm text-slate-500">Backends</div>
        </div>
        <div className="bg-white rounded-lg shadow p-4">
          <div className="text-3xl font-bold text-purple-600">{archStats.databases}</div>
          <div className="text-sm text-slate-500">Datenbanken</div>
        </div>
        <div className="bg-white rounded-lg shadow p-4">
          <div className="text-3xl font-bold text-orange-600">{archStats.infrastructure}</div>
          <div className="text-sm text-slate-500">Infrastruktur</div>
        </div>
      </div>

      {/* ASCII Architecture Diagram with Arrows */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-xl font-bold text-slate-800 mb-4">Datenfluss-Diagramm</h2>
        <div className="bg-slate-900 rounded-lg p-6 overflow-x-auto">
          <pre className="text-green-400 font-mono text-xs whitespace-pre">{DATAFLOW_DIAGRAM}</pre>
        </div>
      </div>

      {/* Layer Filter */}
      <div className="bg-white rounded-lg shadow p-4">
        <div className="flex flex-wrap gap-2">
          <button
            onClick={() => setActiveLayer('all')}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              activeLayer === 'all'
                ? 'bg-primary-600 text-white'
                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
            }`}
          >
            Alle Layer
          </button>
          {LAYERS.map((layer) => (
            <button
              key={layer.id}
              onClick={() => setActiveLayer(layer.id)}
              className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                activeLayer === layer.id
                  ? 'bg-primary-600 text-white'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              }`}
            >
              {layer.name}
            </button>
          ))}
        </div>
      </div>

      {/* Architecture Diagram - Layered View */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-xl font-bold text-slate-800 mb-6">System-Architektur Diagramm</h2>

        <div className="space-y-6">
          {LAYERS.map((layer) => {
            const layerServices = getServicesForLayer(layer)
            if (activeLayer !== 'all' && activeLayer !== layer.id) return null

            return (
              <div key={layer.id} className="border-2 border-dashed border-slate-200 rounded-xl p-4">
                <div className="flex items-center gap-3 mb-4">
                  <h3 className="text-lg font-semibold text-slate-700">{layer.name}</h3>
                  <span className="text-sm text-slate-500">- {layer.description}</span>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
                  {layerServices.map((service) => {
                    const colors = getArchTypeColor(service.type)
                    const isSelected = selectedArchService?.id === service.id

                    return (
                      <div
                        key={service.id}
                        onClick={() => setSelectedArchService(isSelected ? null : service)}
                        className={`cursor-pointer rounded-lg border-2 p-3 transition-all ${
                          isSelected
                            ? `${colors.border} ${colors.light} shadow-lg scale-105`
                            : 'border-slate-200 bg-white hover:border-slate-300 hover:shadow'
                        }`}
                      >
                        <div className="flex items-start justify-between mb-2">
                          <div className={`w-3 h-3 rounded-full ${colors.bg}`}></div>
                          {service.port && service.port !== '-' && (
                            <span className="text-xs font-mono text-slate-500">:{service.port}</span>
                          )}
                        </div>
                        <h4 className="font-medium text-sm text-slate-800">{service.name}</h4>
                        <p className="text-xs text-slate-500">{service.technology}</p>
                        <p className="text-xs text-slate-600 mt-2 line-clamp-2">{service.description}</p>
                        {service.connections && service.connections.length > 0 && (
                          <div className="mt-2 flex items-center gap-1 text-xs text-slate-400">
                            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                            {service.connections.length} Verbindung{service.connections.length > 1 ? 'en' : ''}
                          </div>
                        )}
                      </div>
                    )
                  })}
                </div>
              </div>
            )
          })}
        </div>
      </div>

      {/* Service Detail Panel */}
      {selectedArchService && (
        <ServiceDetailPanel
          service={selectedArchService}
          onClose={() => setSelectedArchService(null)}
          onSelectService={setSelectedArchService}
        />
      )}

      {/* Legend */}
      <div className="bg-white rounded-lg shadow p-4">
        <h3 className="text-sm font-medium text-slate-700 mb-3">Legende</h3>
        <div className="flex flex-wrap gap-4">
          {(['frontend', 'backend', 'database', 'cache', 'search', 'storage', 'security', 'communication', 'ai', 'erp'] as const).map((type) => {
            const colors = getArchTypeColor(type)
            return (
              <div key={type} className="flex items-center gap-2">
                <div className={`w-3 h-3 rounded-full ${colors.bg}`}></div>
                <span className="text-sm text-slate-600">{getArchTypeLabel(type)}</span>
              </div>
            )
          })}
        </div>
      </div>

      {/* Technical Details Section */}
      <div className="bg-white rounded-lg shadow p-6">
        <h2 className="text-xl font-bold text-slate-800 mb-4">Technische Details</h2>

        <div className="grid md:grid-cols-2 gap-6">
          {/* Data Flow */}
          <div>
            <h3 className="text-lg font-semibold text-slate-700 mb-3">Datenfluss</h3>
            <div className="space-y-2 text-sm text-slate-600">
              <p><strong>1. Request:</strong> Browser &rarr; Next.js/FastAPI Frontend</p>
              <p><strong>2. API:</strong> Frontend &rarr; Python Backend / Go Microservices</p>
              <p><strong>3. Auth:</strong> Keycloak/Vault fuer SSO & Secrets</p>
              <p><strong>4. Data:</strong> PostgreSQL (ACID) / Redis (Cache)</p>
              <p><strong>5. Search:</strong> Qdrant (Vector) / Meilisearch (Fulltext)</p>
              <p><strong>6. Storage:</strong> MinIO (Files) / IPFS (Dezentral)</p>
            </div>
          </div>

          {/* Security */}
          <div>
            <h3 className="text-lg font-semibold text-slate-700 mb-3">Sicherheit</h3>
            <div className="space-y-2 text-sm text-slate-600">
              <p><strong>Auth:</strong> JWT + Keycloak OIDC</p>
              <p><strong>Secrets:</strong> HashiCorp Vault (encrypted)</p>
              <p><strong>Communication:</strong> Matrix E2EE, TLS everywhere</p>
              <p><strong>DSGVO:</strong> Consent Service fuer Einwilligungen</p>
              <p><strong>DevSecOps:</strong> Trivy, Gitleaks, Semgrep, Bandit</p>
              <p><strong>SBOM:</strong> CycloneDX fuer alle Komponenten</p>
            </div>
          </div>

          {/* Languages */}
          <div>
            <h3 className="text-lg font-semibold text-slate-700 mb-3">Programmiersprachen</h3>
            <div className="flex flex-wrap gap-2">
              <span className="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm">Python 3.12</span>
              <span className="px-3 py-1 bg-sky-100 text-sky-700 rounded-full text-sm">Go 1.21</span>
              <span className="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-sm">TypeScript 5.x</span>
              <span className="px-3 py-1 bg-lime-100 text-lime-700 rounded-full text-sm">JavaScript ES2022</span>
            </div>
          </div>

          {/* Frameworks */}
          <div>
            <h3 className="text-lg font-semibold text-slate-700 mb-3">Frameworks</h3>
            <div className="flex flex-wrap gap-2">
              <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">Next.js 15</span>
              <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">FastAPI</span>
              <span className="px-3 py-1 bg-cyan-100 text-cyan-700 rounded-full text-sm">Gin (Go)</span>
              <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">Vue 3</span>
              <span className="px-3 py-1 bg-red-100 text-red-700 rounded-full text-sm">Angular 17</span>
              <span className="px-3 py-1 bg-pink-100 text-pink-700 rounded-full text-sm">NestJS</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}