'use client'
// =============================================================================
// BLOCK 9: Datenkategorien pro Abteilung (aufklappbare Kacheln)
// Extracted from ScopeWizardTab for LOC compliance.
// =============================================================================

import { useState } from 'react'
import type { ScopeProfilingAnswer } from '@/lib/sdk/compliance-scope-types'
import { DEPARTMENT_DATA_CATEGORIES } from '@/lib/sdk/vvt-profiling'

/** Mapping Block 8 vvt_departments values → DEPARTMENT_DATA_CATEGORIES keys */
export const DEPT_VALUE_TO_KEY: Record<string, string[]> = {
  personal: ['dept_hr', 'dept_recruiting'],
  finanzen: ['dept_finance'],
  vertrieb: ['dept_sales'],
  marketing: ['dept_marketing'],
  it: ['dept_it'],
  recht: ['dept_recht'],
  kundenservice: ['dept_support'],
  produktion: ['dept_produktion'],
  logistik: ['dept_logistik'],
  einkauf: ['dept_einkauf'],
  facility: ['dept_facility'],
}

/** Mapping department key → scope question ID for Block 9 */
export const DEPT_KEY_TO_QUESTION: Record<string, string> = {
  dept_hr: 'dk_dept_hr',
  dept_recruiting: 'dk_dept_recruiting',
  dept_finance: 'dk_dept_finance',
  dept_sales: 'dk_dept_sales',
  dept_marketing: 'dk_dept_marketing',
  dept_support: 'dk_dept_support',
  dept_it: 'dk_dept_it',
  dept_recht: 'dk_dept_recht',
  dept_produktion: 'dk_dept_produktion',
  dept_logistik: 'dk_dept_logistik',
  dept_einkauf: 'dk_dept_einkauf',
  dept_facility: 'dk_dept_facility',
}

interface DatenkategorienBlock9Props {
  answers: ScopeProfilingAnswer[]
  onAnswerChange: (questionId: string, value: string | string[] | boolean | number) => void
}

export function DatenkategorienBlock9({
  answers,
  onAnswerChange,
}: DatenkategorienBlock9Props) {
  const [expandedDepts, setExpandedDepts] = useState<Set<string>>(new Set())
  const [initializedDepts, setInitializedDepts] = useState<Set<string>>(new Set())

  // Get selected departments from Block 8
  const deptAnswer = answers.find(a => a.questionId === 'vvt_departments')
  const selectedDepts = Array.isArray(deptAnswer?.value) ? (deptAnswer.value as string[]) : []

  // Resolve which department keys are active
  const activeDeptKeys: string[] = []
  for (const deptValue of selectedDepts) {
    const keys = DEPT_VALUE_TO_KEY[deptValue]
    if (keys) {
      for (const k of keys) {
        if (!activeDeptKeys.includes(k)) activeDeptKeys.push(k)
      }
    }
  }

  const toggleDept = (deptKey: string) => {
    setExpandedDepts(prev => {
      const next = new Set(prev)
      if (next.has(deptKey)) {
        next.delete(deptKey)
      } else {
        next.add(deptKey)
        // Prefill typical categories on first expand
        if (!initializedDepts.has(deptKey)) {
          const config = DEPARTMENT_DATA_CATEGORIES[deptKey]
          const questionId = DEPT_KEY_TO_QUESTION[deptKey]
          if (config && questionId) {
            const existing = answers.find(a => a.questionId === questionId)
            if (!existing) {
              const typicalIds = config.categories.filter(c => c.isTypical).map(c => c.id)
              onAnswerChange(questionId, typicalIds)
            }
          }
          setInitializedDepts(p => new Set(p).add(deptKey))
        }
      }
      return next
    })
  }

  const handleCategoryToggle = (deptKey: string, catId: string) => {
    const questionId = DEPT_KEY_TO_QUESTION[deptKey]
    if (!questionId) return
    const existing = answers.find(a => a.questionId === questionId)
    const current = Array.isArray(existing?.value) ? (existing.value as string[]) : []
    const updated = current.includes(catId)
      ? current.filter(id => id !== catId)
      : [...current, catId]
    onAnswerChange(questionId, updated)
  }

  if (activeDeptKeys.length === 0) {
    return (
      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6 text-center">
        <p className="text-sm text-yellow-800">
          Bitte waehlen Sie zuerst in <strong>Block 8 (Verarbeitungstaetigkeiten)</strong> die
          Abteilungen aus, in denen personenbezogene Daten verarbeitet werden.
        </p>
      </div>
    )
  }

  return (
    <div className="space-y-3">
      {activeDeptKeys.map(deptKey => {
        const config = DEPARTMENT_DATA_CATEGORIES[deptKey]
        if (!config) return null
        const questionId = DEPT_KEY_TO_QUESTION[deptKey]
        const isExpanded = expandedDepts.has(deptKey)
        const existing = answers.find(a => a.questionId === questionId)
        const selectedCategories = Array.isArray(existing?.value) ? (existing.value as string[]) : []
        const hasArt9Selected = config.categories
          .filter(c => c.isArt9)
          .some(c => selectedCategories.includes(c.id))

        return (
          <div
            key={deptKey}
            className={`border rounded-xl overflow-hidden transition-all ${
              isExpanded ? 'border-purple-400 bg-white shadow-sm' : 'border-gray-200 bg-white'
            }`}
          >
            {/* Header */}
            <button
              type="button"
              onClick={() => toggleDept(deptKey)}
              className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
            >
              <div className="flex items-center gap-3">
                <span className="text-xl">{config.icon}</span>
                <div className="text-left">
                  <span className="text-sm font-medium text-gray-900">{config.label}</span>
                  {selectedCategories.length > 0 && (
                    <span className="ml-2 text-xs text-gray-400">
                      ({selectedCategories.length} Kategorien)
                    </span>
                  )}
                </div>
              </div>
              <div className="flex items-center gap-2">
                {hasArt9Selected && (
                  <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-orange-100 text-orange-700 rounded">
                    Art. 9
                  </span>
                )}
                <svg
                  className={`w-5 h-5 text-gray-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>
              </div>
            </button>

            {/* Expandable categories panel */}
            {isExpanded && (
              <div className="border-t border-gray-100 px-4 pt-3 pb-4">
                <p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-3">
                  Datenkategorien
                </p>
                <div className="space-y-1.5">
                  {config.categories.map(cat => {
                    const isChecked = selectedCategories.includes(cat.id)
                    return (
                      <label
                        key={cat.id}
                        className={`flex items-start gap-3 p-2.5 rounded-lg cursor-pointer transition-colors ${
                          cat.isArt9
                            ? isChecked ? 'bg-orange-50 hover:bg-orange-100' : 'bg-gray-50 hover:bg-orange-50'
                            : isChecked ? 'bg-purple-50 hover:bg-purple-100' : 'bg-gray-50 hover:bg-gray-100'
                        }`}
                      >
                        <input
                          type="checkbox"
                          checked={isChecked}
                          onChange={() => handleCategoryToggle(deptKey, cat.id)}
                          className={`w-4 h-4 mt-0.5 rounded ${cat.isArt9 ? 'text-orange-500' : 'text-purple-600'}`}
                        />
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2">
                            <span className="text-sm font-medium text-gray-900">{cat.label}</span>
                            {cat.isArt9 && (
                              <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-orange-100 text-orange-700 rounded">
                                Art. 9
                              </span>
                            )}
                          </div>
                          <p className="text-xs text-gray-500 mt-0.5">{cat.info}</p>
                        </div>
                      </label>
                    )
                  })}
                </div>

                {/* Art. 9 warning */}
                {hasArt9Selected && (
                  <div className="mt-3 p-3 bg-orange-50 border border-orange-200 rounded-lg">
                    <p className="text-xs text-orange-800">
                      <span className="font-semibold">Art. 9 DSGVO:</span> Sie verarbeiten besondere Kategorien
                      personenbezogener Daten. Eine zusaetzliche Rechtsgrundlage nach Art. 9 Abs. 2 DSGVO ist
                      erforderlich (z.B. § 26 Abs. 3 BDSG fuer Beschaeftigtendaten).
                    </p>
                  </div>
                )}
              </div>
            )}
          </div>
        )
      })}
    </div>
  )
}
