'use client'

import React, { useState, useMemo } from 'react'

interface Question {
  id: string
  mc_id: string
  mc_name: string
  question: string
  question_type: string
  evidence_required: boolean
  pass_criteria: string[]
  fail_criteria: string[]
  severity: string
  regulation: string
  depends_on?: string
}

interface Answer {
  question_id: string
  value: unknown
  comment: string
  status: string
}

interface Props {
  questions: Question[]
  answers: Answer[]
  onAnswer: (questionId: string, value: unknown, comment: string) => void
  onSkip: (questionId: string) => void
}

const SEVERITY_COLORS: Record<string, string> = {
  HIGH: 'bg-red-100 text-red-700 border-red-200',
  MEDIUM: 'bg-yellow-100 text-yellow-700 border-yellow-200',
  LOW: 'bg-green-100 text-green-700 border-green-200',
}

export function QuestionnaireView({ questions, answers, onAnswer, onSkip }: Props) {
  const [comments, setComments] = useState<Record<string, string>>({})
  const [showCriteria, setShowCriteria] = useState<string | null>(null)

  const answerMap = useMemo(() => {
    const m: Record<string, Answer> = {}
    for (const a of answers) { m[a.question_id] = a }
    return m
  }, [answers])

  // Filter visible questions (dependency check)
  const visibleQuestions = useMemo(() => {
    return questions.filter(q => {
      if (!q.depends_on) return true
      const depAnswer = answerMap[q.depends_on]
      if (!depAnswer) return false
      return depAnswer.value === true || depAnswer.value === 'yes' || depAnswer.value === 'ja'
    })
  }, [questions, answerMap])

  // Group by regulation
  const grouped = useMemo(() => {
    const groups: Record<string, Question[]> = {}
    for (const q of visibleQuestions) {
      const key = q.regulation || 'Allgemein'
      if (!groups[key]) groups[key] = []
      groups[key].push(q)
    }
    return groups
  }, [visibleQuestions])

  return (
    <div className="space-y-8">
      {Object.entries(grouped).map(([reg, qs]) => (
        <div key={reg}>
          <h2 className="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
            <span className="px-2.5 py-0.5 bg-blue-100 text-blue-700 rounded text-sm font-medium">
              {reg}
            </span>
            <span className="text-sm text-gray-400 font-normal">
              {qs.length} Fragen
            </span>
          </h2>

          <div className="space-y-3">
            {qs.map((q, idx) => {
              const existing = answerMap[q.id]
              const isAnswered = !!existing && existing.status !== 'skipped'
              const isSkipped = existing?.status === 'skipped'
              const isPassed = existing?.value === true || existing?.value === 'yes'

              return (
                <div
                  key={q.id}
                  className={`bg-white rounded-xl border p-5 transition-all ${
                    isAnswered
                      ? isPassed
                        ? 'border-green-200 bg-green-50/30'
                        : 'border-red-200 bg-red-50/30'
                      : isSkipped
                        ? 'border-gray-200 bg-gray-50/50 opacity-60'
                        : 'border-gray-200 hover:border-blue-200'
                  }`}
                >
                  <div className="flex items-start gap-3">
                    <span className="text-xs text-gray-400 font-mono mt-1 shrink-0">
                      {q.id}
                    </span>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-start justify-between gap-2 mb-2">
                        <p className="text-sm font-medium text-gray-900">{q.question}</p>
                        <div className="flex items-center gap-1.5 shrink-0">
                          <span className={`px-2 py-0.5 rounded text-xs font-medium border ${
                            SEVERITY_COLORS[q.severity] || SEVERITY_COLORS.MEDIUM
                          }`}>
                            {q.severity}
                          </span>
                          {q.evidence_required && (
                            <span className="px-2 py-0.5 bg-purple-100 text-purple-700 rounded text-xs">
                              Nachweis
                            </span>
                          )}
                        </div>
                      </div>

                      {q.mc_name && (
                        <p className="text-xs text-gray-400 mb-2">
                          MC: {q.mc_name} {q.mc_id && `(${q.mc_id})`}
                        </p>
                      )}

                      {/* Criteria toggle */}
                      <button
                        onClick={() => setShowCriteria(showCriteria === q.id ? null : q.id)}
                        className="text-xs text-blue-500 hover:text-blue-700 mb-2"
                      >
                        {showCriteria === q.id ? 'Kriterien ausblenden' : 'Bewertungskriterien anzeigen'}
                      </button>

                      {showCriteria === q.id && (
                        <div className="grid grid-cols-2 gap-3 mb-3 text-xs">
                          {q.pass_criteria?.length > 0 && (
                            <div className="bg-green-50 border border-green-100 rounded p-2">
                              <div className="font-medium text-green-700 mb-1">Pass</div>
                              {q.pass_criteria.map((c, i) => (
                                <div key={i} className="text-green-600">{c}</div>
                              ))}
                            </div>
                          )}
                          {q.fail_criteria?.length > 0 && (
                            <div className="bg-red-50 border border-red-100 rounded p-2">
                              <div className="font-medium text-red-700 mb-1">Fail</div>
                              {q.fail_criteria.map((c, i) => (
                                <div key={i} className="text-red-600">{c}</div>
                              ))}
                            </div>
                          )}
                        </div>
                      )}

                      {/* Answer controls */}
                      {!isAnswered && !isSkipped && (
                        <div className="flex items-center gap-2 mt-3">
                          <button
                            onClick={() => onAnswer(q.id, true, comments[q.id] || '')}
                            className="px-4 py-1.5 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm"
                          >
                            Ja
                          </button>
                          <button
                            onClick={() => onAnswer(q.id, false, comments[q.id] || '')}
                            className="px-4 py-1.5 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm"
                          >
                            Nein
                          </button>
                          <button
                            onClick={() => onSkip(q.id)}
                            className="px-3 py-1.5 text-gray-400 hover:text-gray-600 text-sm"
                          >
                            Ueberspringen
                          </button>
                          <input
                            type="text"
                            placeholder="Kommentar (optional)"
                            value={comments[q.id] || ''}
                            onChange={e => setComments(prev => ({ ...prev, [q.id]: e.target.value }))}
                            className="flex-1 px-3 py-1.5 border border-gray-200 rounded-lg text-sm focus:ring-1 focus:ring-blue-500"
                          />
                        </div>
                      )}

                      {/* Already answered */}
                      {isAnswered && (
                        <div className="flex items-center gap-2 mt-2 text-sm">
                          <span className={isPassed ? 'text-green-600 font-medium' : 'text-red-600 font-medium'}>
                            {isPassed ? 'Ja' : 'Nein'}
                          </span>
                          {existing.comment && (
                            <span className="text-gray-400">— {existing.comment}</span>
                          )}
                        </div>
                      )}

                      {isSkipped && (
                        <div className="text-sm text-gray-400 mt-2">Uebersprungen</div>
                      )}
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      ))}
    </div>
  )
}