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">
          <TestCategoryCard
            icon="🐹" title="Go Unit Tests (~57)" color="cyan"
            description="consent-service, billing-service, school-service, edu-search-service, ai-compliance-sdk"
          />
          <TestCategoryCard
            icon="🐍" title="Python Tests (~50)" color="yellow"
            description="backend, voice-service, klausur-service, geo-service"
          />
          <TestCategoryCard
            icon="🎯" title="BQAS Golden (97)" color="emerald"
            description="Validierte Referenz-Tests mit LLM-Judge fuer Intent-Erkennung"
          />
          <TestCategoryCard
            icon="📚" title="BQAS RAG (~20)" color="teal"
            description="RAG-Judge Tests fuer Retrieval, Citations, Hallucination-Control"
          />
          <TestCategoryCard
            icon="📘" title="TypeScript Jest (~8)" color="blue"
            description="Website Unit Tests fuer React-Komponenten"
          />
          <TestCategoryCard
            icon="⚡" title="SDK Vitest (~43)" color="orange"
            description="AI Compliance SDK Unit Tests: Types, Export, Components, Reducer"
          />
          <TestCategoryCard
            icon="🎭" title="SDK Playwright (~25)" color="purple"
            description="SDK E2E Tests: Navigation, Workflow, Command Bar, Export"
          />
          <TestCategoryCard
            icon="🌐" title="Website E2E (~5)" color="slate"
            description="End-to-End Tests fuer kritische User Flows"
          />
          <TestCategoryCard
            icon="🔗" title="Integration Tests (~15)" color="indigo"
            description="Docker Compose basierte E2E-Tests mit Backend, Consent-Service, DB"
          />
        </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">
              <CIItem icon="✓" color="green" label="Unit Tests" detail="Go & Python Tests laufen automatisch" />
              <CIItem icon="✓" color="green" label="Test-Ergebnisse" detail="Werden ans Dashboard gesendet" />
              <CIItem icon="✓" color="green" label="Backlog" detail="Fehlgeschlagene Tests erscheinen hier" />
              <CIItem icon="✓" color="green" label="Linting" detail="Code-Qualitaet bei PRs pruefen" />
            </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">
              <CIItem icon="▶" color="orange" label="Docker Builds" detail="Container erstellen" />
              <CIItem icon="▶" color="orange" label="SBOM/Scans" detail="Sicherheitsanalyse ausfuehren" />
              <CIItem icon="▶" color="orange" label="Deployment" detail="In Produktion deployen" />
              <CIItem icon="▶" color="orange" label="Pipeline starten" detail="Im CI/CD Dashboard" />
            </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> Woodpecker CI → 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>
  )
}

// ---------------------------------------------------------------------------
// Internal helper components
// ---------------------------------------------------------------------------

function TestCategoryCard({
  icon,
  title,
  color,
  description,
}: {
  icon: string
  title: string
  color: string
  description: string
}) {
  const colorMap: Record<string, string> = {
    cyan: 'bg-cyan-50 border-cyan-200 text-cyan-800 text-cyan-700',
    yellow: 'bg-yellow-50 border-yellow-200 text-yellow-800 text-yellow-700',
    emerald: 'bg-emerald-50 border-emerald-200 text-emerald-800 text-emerald-700',
    teal: 'bg-teal-50 border-teal-200 text-teal-800 text-teal-700',
    blue: 'bg-blue-50 border-blue-200 text-blue-800 text-blue-700',
    orange: 'bg-orange-50 border-orange-200 text-orange-800 text-orange-700',
    purple: 'bg-purple-50 border-purple-200 text-purple-800 text-purple-700',
    slate: 'bg-slate-50 border-slate-200 text-slate-800 text-slate-700',
    indigo: 'bg-indigo-50 border-indigo-200 text-indigo-800 text-indigo-700',
  }

  // Build explicit class strings for Tailwind to detect
  const bgBorder = `bg-${color}-50 border-${color}-200`
  const titleColor = `text-${color}-800`
  const descColor = `text-${color}-700`

  return (
    <div className={`p-4 rounded-lg border ${bgBorder}`}>
      <div className="flex items-center gap-2 mb-2">
        <span className="text-xl">{icon}</span>
        <h4 className={`font-medium ${titleColor}`}>{title}</h4>
      </div>
      <p className={`text-sm ${descColor}`}>{description}</p>
    </div>
  )
}

function CIItem({
  icon,
  color,
  label,
  detail,
}: {
  icon: string
  color: 'green' | 'orange'
  label: string
  detail: string
}) {
  const iconColor = color === 'green' ? 'text-green-500' : 'text-orange-500'
  return (
    <li className="flex items-start gap-2">
      <span className={`${iconColor} mt-1`}>{icon}</span>
      <span><strong>{label}</strong> - {detail}</span>
    </li>
  )
}