'use client'

import { useState } from 'react'

// Demo failed test details for illustration
const FAILED_TEST_DETAILS: Record<string, { description: string; cause: string; action: string }> = {
  // Golden Suite - Intent Tests
  'INT-001': {
    description: 'Student Observation - Simple',
    cause: 'Notiz zu Max wird nicht korrekt als student_observation erkannt',
    action: 'Training-Daten fuer kurze Notiz-Befehle erweitern',
  },
  'INT-002': {
    description: 'Student Observation - Needs Help',
    cause: 'Anfrage "Anna braucht extra Uebungsblatt" wird falsch klassifiziert',
    action: 'Intent-Erkennung fuer Hilfe-Anfragen verbessern',
  },
  'INT-003': {
    description: 'Reminder - Simple',
    cause: 'Erinnerungs-Intent nicht erkannt',
    action: 'Trigger-Woerter fuer Erinnerungen pruefen',
  },
  'INT-010': {
    description: 'Quick Activity - With Time',
    cause: '"10 Minuten Einstieg" wird nicht als quick_activity erkannt',
    action: 'Zeitmuster in Quick-Activity-Intent aufnehmen',
  },
  'INT-011': {
    description: 'Quiz Generate - Vocabulary',
    cause: 'Vokabeltest wird nicht als quiz_generate klassifiziert',
    action: 'Quiz-Keywords wie "Test", "Vokabel" staerker gewichten',
  },
  'INT-012': {
    description: 'Quiz Generate - Short Test',
    cause: '"Kurzer Test zu Kapitel 5" falsch erkannt',
    action: 'Kontext-Keywords fuer Quiz verbessern',
  },
  'INT-015': {
    description: 'Class Message',
    cause: 'Nachricht an Klasse wird als anderer Intent erkannt',
    action: 'Klassen-Nachrichten-Patterns erweitern',
  },
  'INT-019': {
    description: 'Operator Checklist',
    cause: 'Operatoren-Anfrage nicht korrekt klassifiziert',
    action: 'EH/Operator-bezogene Intents pruefen',
  },
  'INT-021': {
    description: 'Feedback Suggest',
    cause: 'Feedback-Vorschlag Intent nicht erkannt',
    action: 'Feedback-Synonyme hinzufuegen',
  },
  'INT-022': {
    description: 'Reminder Schedule - Tomorrow',
    cause: 'Zeitbasierte Erinnerung falsch klassifiziert',
    action: 'Zeitausdrucke wie "morgen" besser verarbeiten',
  },
  'INT-023': {
    description: 'Task Summary',
    cause: 'Zusammenfassungs-Intent nicht erkannt',
    action: 'Summary-Trigger erweitern',
  },
  // RAG Tests
  'RAG-EH-001': {
    description: 'EH Passage Retrieval - Textanalyse Sachtext',
    cause: 'EH-Passage nicht gefunden oder unvollstaendig',
    action: 'RAG-Retrieval fuer Textanalyse optimieren',
  },
  'RAG-HAL-002': {
    description: 'No Fictional EH Passages',
    cause: 'System generiert fiktive EH-Inhalte',
    action: 'Hallucination-Control verstaerken',
  },
  'RAG-HAL-004': {
    description: 'Grounded Response Only',
    cause: 'Antwort basiert nicht auf vorhandenen Daten',
    action: 'Grounding-Check im Response-Flow einbauen',
  },
  'RAG-CIT-003': {
    description: 'Multiple Source Attribution',
    cause: 'Mehrere Quellen nicht korrekt zugeordnet',
    action: 'Multi-Source Citation verbessern',
  },
  'RAG-EDGE-002': {
    description: 'Ambiguous Operator Query',
    cause: 'Bei mehrdeutiger Anfrage keine Klaerung angefordert',
    action: 'Clarification-Flow implementieren',
  },
  // Synthetic Tests
  'SYN-STUD-003': {
    description: 'Synthetic Student Observation',
    cause: 'Generierte Variante nicht erkannt',
    action: 'Robustheit gegen Variationen erhoehen',
  },
  'SYN-WORK-002': {
    description: 'Synthetic Worksheet Generate',
    cause: 'Arbeitsblatt-Intent bei Variation nicht erkannt',
    action: 'Mehr Variationen ins Training aufnehmen',
  },
  'SYN-WORK-005': {
    description: 'Synthetic Worksheet mit Tippfehler',
    cause: 'Tippfehler fuehrt zu Fehlklassifikation',
    action: 'Tippfehler-Normalisierung pruefen',
  },
  'SYN-REM-001': {
    description: 'Synthetic Reminder',
    cause: 'Reminder-Variante nicht erkannt',
    action: 'Reminder-Patterns erweitern',
  },
  'SYN-REM-004': {
    description: 'Synthetic Reminder mit Dialekt',
    cause: 'Dialekt-Formulierung nicht verstanden',
    action: 'Dialekt-Normalisierung verbessern',
  },
}

export function FailedTestsList({ testIds }: { testIds: string[] }) {
  const [expandedTest, setExpandedTest] = useState<string | null>(null)

  if (testIds.length === 0) {
    return (
      <div className="text-center py-8 text-emerald-600">
        <svg className="w-12 h-12 mx-auto mb-2" 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>
        Alle Tests bestanden!
      </div>
    )
  }

  return (
    <div className="space-y-2 max-h-96 overflow-y-auto">
      {testIds.map((testId) => {
        const details = FAILED_TEST_DETAILS[testId]
        const isExpanded = expandedTest === testId

        return (
          <div
            key={testId}
            className="rounded-lg border border-red-200 overflow-hidden"
          >
            <button
              onClick={() => setExpandedTest(isExpanded ? null : testId)}
              className="w-full flex items-center justify-between p-3 bg-red-50 hover:bg-red-100 transition-colors"
            >
              <div className="flex items-center gap-2">
                <svg className="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
                <span className="font-mono text-sm text-red-700">{testId}</span>
                {details && (
                  <span className="text-xs text-red-600 hidden sm:inline">- {details.description}</span>
                )}
              </div>
              <svg
                className={`w-4 h-4 text-red-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </button>

            {isExpanded && details && (
              <div className="p-4 bg-white border-t border-red-100 space-y-3">
                <div>
                  <p className="text-xs font-medium text-slate-500 uppercase">Ursache</p>
                  <p className="text-sm text-slate-700 mt-1">{details.cause}</p>
                </div>
                <div>
                  <p className="text-xs font-medium text-slate-500 uppercase">Empfohlene Aktion</p>
                  <p className="text-sm text-slate-700 mt-1 flex items-start gap-2">
                    <svg className="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    {details.action}
                  </p>
                </div>
                <div className="pt-2 border-t border-slate-100">
                  <p className="text-xs text-slate-400">
                    Test-ID: <span className="font-mono">{testId}</span>
                  </p>
                </div>
              </div>
            )}
          </div>
        )
      })}

      <div className="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg">
        <p className="text-xs text-amber-800">
          <strong>Tipp:</strong> Klicken Sie auf einen Test um Details zur Ursache und empfohlene Aktionen zu sehen.
          Fehlgeschlagene Tests sollten vor dem naechsten Release behoben werden.
        </p>
      </div>
    </div>
  )
}
