'use client'

import Link from 'next/link'

export function GuideTab() {
  return (
    <div className="space-y-8">
      <div className="bg-gradient-to-r from-orange-50 to-amber-50 rounded-xl border border-orange-200 p-6">
        <h2 className="text-xl font-bold text-slate-900 mb-4 flex items-center gap-2">
          <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
          </svg>
          Was ist das Test Dashboard?
        </h2>
        <p className="text-slate-700 leading-relaxed">
          Das <strong>Test Dashboard</strong> ist die zentrale Uebersicht fuer alle 260+ Tests im Breakpilot-System.
          Es aggregiert Tests aus verschiedenen Services (Go, Python, TypeScript) ohne diese physisch zu migrieren.
          Tests bleiben an ihren konventionellen Orten, werden aber hier zentral ueberwacht und ausgefuehrt.
          Seit 2026-02 inklusive AI Compliance SDK Unit Tests (Vitest) und E2E Tests (Playwright).
        </p>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Test-Kategorien</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <div className="p-4 bg-cyan-50 rounded-lg border border-cyan-200">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-xl">🐹</span>
              <h4 className="font-medium text-cyan-800">Go Unit Tests (~57)</h4>
            </div>
            <p className="text-sm text-cyan-700">
              consent-service, billing-service, school-service, edu-search-service, ai-compliance-sdk
            </p>
          </div>
          <div className="p-4 bg-yellow-50 rounded-lg border border-yellow-200">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-xl">🐍</span>
              <h4 className="font-medium text-yellow-800">Python Tests (~50)</h4>
            </div>
            <p className="text-sm text-yellow-700">
              backend, voice-service, klausur-service, geo-service
            </p>
          </div>
          <div className="p-4 bg-emerald-50 rounded-lg border border-emerald-200">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-xl">🎯</span>
              <h4 className="font-medium text-emerald-800">BQAS Golden (97)</h4>
            </div>
            <p className="text-sm text-emerald-700">
              Validierte Referenz-Tests mit LLM-Judge fuer Intent-Erkennung
            </p>
          </div>
          <div className="p-4 bg-teal-50 rounded-lg border border-teal-200">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-xl">📚</span>
              <h4 className="font-medium text-teal-800">BQAS RAG (~20)</h4>
            </div>
            <p className="text-sm text-teal-700">
              RAG-Judge Tests fuer Retrieval, Citations, Hallucination-Control
            </p>
          </div>
          <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-xl">📘</span>
              <h4 className="font-medium text-blue-800">TypeScript Jest (~8)</h4>
            </div>
            <p className="text-sm text-blue-700">
              Website Unit Tests fuer React-Komponenten
            </p>
          </div>
          <div className="p-4 bg-orange-50 rounded-lg border border-orange-200">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-xl">⚡</span>
              <h4 className="font-medium text-orange-800">SDK Vitest (~43)</h4>
            </div>
            <p className="text-sm text-orange-700">
              AI Compliance SDK Unit Tests: Types, Export, Components, Reducer
            </p>
          </div>
          <div className="p-4 bg-purple-50 rounded-lg border border-purple-200">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-xl">🎭</span>
              <h4 className="font-medium text-purple-800">SDK Playwright (~25)</h4>
            </div>
            <p className="text-sm text-purple-700">
              SDK E2E Tests: Navigation, Workflow, Command Bar, Export
            </p>
          </div>
          <div className="p-4 bg-slate-50 rounded-lg border border-slate-200">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-xl">🌐</span>
              <h4 className="font-medium text-slate-800">Website E2E (~5)</h4>
            </div>
            <p className="text-sm text-slate-700">
              End-to-End Tests fuer kritische User Flows
            </p>
          </div>
          <div className="p-4 bg-indigo-50 rounded-lg border border-indigo-200">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-xl">🔗</span>
              <h4 className="font-medium text-indigo-800">Integration Tests (~15)</h4>
            </div>
            <p className="text-sm text-indigo-700">
              Docker Compose basierte E2E-Tests mit Backend, Consent-Service, DB
            </p>
          </div>
        </div>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Architektur</h3>
        <pre className="bg-slate-50 p-4 rounded-lg text-xs overflow-x-auto">
{`┌────────────────────────────────────────────────────────────────────┐
│               Admin-v2 Test Dashboard                               │
│               /infrastructure/tests                                 │
├────────────────────────────────────────────────────────────────────┤
│  ┌────────────┐  ┌────────────┐  ┌────────────┐  ┌─────────────┐  │
│  │ Unit Tests │  │ SDK Tests  │  │   BQAS     │  │ E2E Tests   │  │
│  │  (Go, Py)  │  │  (Vitest)  │  │ (LLM/RAG)  │  │ (Playwright)│  │
│  └────────────┘  └────────────┘  └────────────┘  └─────────────┘  │
│        │               │               │               │           │
│        ▼               ▼               ▼               ▼           │
│  ┌──────────────────────────────────────────────────────────────┐ │
│  │                    Test Registry API                          │ │
│  │              /backend/api/tests/registry.py                   │ │
│  └──────────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────────┘

Tests bleiben wo sie sind:
- /consent-service/internal/**/*_test.go
- /backend/tests/test_*.py
- /voice-service/tests/bqas/
- /admin-v2/components/sdk/__tests__/*.test.ts   (Vitest)
- /admin-v2/e2e/specs/*.spec.ts                  (Playwright)`}
        </pre>
      </div>

      {/* CI/CD Workflow Anleitung */}
      <div className="bg-blue-50 rounded-xl border border-blue-200 p-6">
        <h3 className="text-lg font-semibold text-blue-900 mb-4 flex items-center gap-2">
          <svg className="w-5 h-5 text-blue-600" 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>
          CI/CD Integration
        </h3>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h4 className="font-medium text-blue-800 mb-2">🤖 Automatisch (bei jedem Push/PR)</h4>
            <ul className="space-y-2 text-sm text-blue-700">
              <li className="flex items-start gap-2">
                <span className="text-green-500 mt-1">✓</span>
                <span><strong>Unit Tests</strong> - Go & Python Tests laufen automatisch</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-green-500 mt-1">✓</span>
                <span><strong>Test-Ergebnisse</strong> - Werden ans Dashboard gesendet</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-green-500 mt-1">✓</span>
                <span><strong>Backlog</strong> - Fehlgeschlagene Tests erscheinen hier</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-green-500 mt-1">✓</span>
                <span><strong>Linting</strong> - Code-Qualitaet bei PRs pruefen</span>
              </li>
            </ul>
          </div>

          <div>
            <h4 className="font-medium text-blue-800 mb-2">👆 Manuell (Button oder Tag)</h4>
            <ul className="space-y-2 text-sm text-blue-700">
              <li className="flex items-start gap-2">
                <span className="text-orange-500 mt-1">▶</span>
                <span><strong>Docker Builds</strong> - Container erstellen</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-orange-500 mt-1">▶</span>
                <span><strong>SBOM/Scans</strong> - Sicherheitsanalyse ausfuehren</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-orange-500 mt-1">▶</span>
                <span><strong>Deployment</strong> - In Produktion deployen</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-orange-500 mt-1">▶</span>
                <span><strong>Pipeline starten</strong> - Im CI/CD Dashboard</span>
              </li>
            </ul>
          </div>
        </div>

        <div className="mt-4 pt-4 border-t border-blue-200">
          <p className="text-sm text-blue-600">
            <strong>Daten-Fluss:</strong> Gitea Actions → POST /api/tests/ci-result → PostgreSQL → Test Dashboard
          </p>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Link
          href="/ai/test-quality"
          className="p-4 bg-slate-50 rounded-lg border border-slate-200 hover:border-orange-300 hover:bg-orange-50 transition-colors"
        >
          <div className="flex items-center gap-3">
            <svg className="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <div>
              <p className="font-medium text-slate-900">BQAS Dashboard</p>
              <p className="text-xs text-slate-500">Detaillierte BQAS-Metriken und Trend-Analyse</p>
            </div>
          </div>
        </Link>
        <Link
          href="/infrastructure/ci-cd"
          className="p-4 bg-slate-50 rounded-lg border border-slate-200 hover:border-orange-300 hover:bg-orange-50 transition-colors"
        >
          <div className="flex items-center gap-3">
            <svg className="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <div>
              <p className="font-medium text-slate-900">CI/CD Pipelines</p>
              <p className="text-xs text-slate-500">Gitea Actions und automatische Test-Planung</p>
            </div>
          </div>
        </Link>
      </div>
    </div>
  )
}
