'use client'

import { useState } from 'react'

interface GuidelineItem {
  req_id: string
  title: string
  category: string
  annex_anchor: string
  severity: string
  effort_days?: number
  measures: { id: string; name: string }[]
}
interface ReadinessResult {
  in_scope: boolean
  classification: string
  rationale: string[]
  conformity_path_hint: string
  guideline: { code: GuidelineItem[]; process: GuidelineItem[]; document: GuidelineItem[] }
  counts: { code: number; process: number; document: number }
  total_effort_days: number
  deadlines: { date: string; label: string }[]
}

const CLASS_LABEL: Record<string, string> = {
  CRITICAL: 'Kritisch', IMPORTANT_II: 'Wichtig (Klasse II)', IMPORTANT_I: 'Wichtig (Klasse I)',
  STANDARD: 'Standard', NOT_IN_SCOPE: 'Nicht im CRA-Anwendungsbereich',
}
const BUCKETS: { key: 'code' | 'process' | 'document'; label: string; hint: string }[] = [
  { key: 'code', label: 'Code / Technik', hint: 'im Produkt umzusetzen' },
  { key: 'process', label: 'Prozesse', hint: 'organisatorisch zu etablieren' },
  { key: 'document', label: 'Dokumentation', hint: 'nachzuweisen / beizulegen' },
]

export function ReadinessCheck({ onCreateProject }: { onCreateProject?: () => void }) {
  const [intendedUse, setIntendedUse] = useState('')
  const [flags, setFlags] = useState<Record<string, boolean>>({})
  const [result, setResult] = useState<ReadinessResult | null>(null)
  const [loading, setLoading] = useState(false)

  const toggle = (k: string) => setFlags((f) => ({ ...f, [k]: !f[k] }))

  const run = async () => {
    setLoading(true)
    try {
      const res = await fetch('/api/v1/cra/readiness', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ intended_use: intendedUse, ...flags }),
      })
      setResult(res.ok ? await res.json() : null)
    } finally { setLoading(false) }
  }

  const QUESTIONS: { k: string; label: string }[] = [
    { k: 'connected_to_internet', label: 'Hängt das Produkt am Internet (oder soll es)?' },
    { k: 'user_parameter_app', label: 'Gibt es eine App, mit der Nutzer Parameter einstellen?' },
    { k: 'remote_maintenance', label: 'Bietet ihr Fernwartung an?' },
    { k: 'has_software_updates', label: 'Hat es Software-/Firmware-Updates?' },
    { k: 'has_firmware', label: 'Enthält es Firmware (Embedded/IoT)?' },
    { k: 'processes_personal_data', label: 'Verarbeitet es personenbezogene Daten?' },
    { k: 'is_critical_infra_supplier', label: 'Wird es in kritischer Infrastruktur eingesetzt?' },
  ]

  return (
    <div className="rounded-xl border border-purple-200 dark:border-purple-800 bg-purple-50/50 dark:bg-purple-900/20 p-5 mb-6">
      <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">CRA-Readiness-Check</h2>
      <p className="text-sm text-gray-600 dark:text-gray-300 mt-1 mb-4">
        Was kommt mit dem Cyber Resilience Act auf Ihr Produkt zu? Ein paar Fragen — Sie bekommen sofort
        eine auf Ihren Scope zugeschnittene Übersicht (Code, Prozesse, Dokumentation). <span className="italic">Wir analysieren —
        und setzen es mit Ihnen um.</span>
      </p>

      <textarea
        value={intendedUse} onChange={(e) => setIntendedUse(e.target.value)}
        placeholder="Was tut das Produkt? (z. B. vernetztes Kistenhubgerät mit App-Steuerung und Fernwartung)"
        className="w-full text-sm rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 p-2 mb-3" rows={2}
      />
      <div className="grid sm:grid-cols-2 gap-2 mb-4">
        {QUESTIONS.map((q) => (
          <label key={q.k} className="flex items-center gap-2 text-xs text-gray-700 dark:text-gray-300">
            <input type="checkbox" checked={!!flags[q.k]} onChange={() => toggle(q.k)} className="rounded" />
            {q.label}
          </label>
        ))}
      </div>
      <button onClick={run} disabled={loading}
        className="rounded bg-purple-600 hover:bg-purple-700 disabled:opacity-50 text-white text-sm px-4 py-2">
        {loading ? 'Prüfe …' : 'CRA-Readiness prüfen'}
      </button>

      {result && (
        <div className="mt-5">
          {!result.in_scope ? (
            <p className="text-sm text-gray-700 dark:text-gray-200">
              Nach diesen Angaben fällt das Produkt <span className="font-semibold">nicht in den CRA-Anwendungsbereich</span>
              {' '}(kein digitales Element erkannt). Sobald es vernetzt ist oder Updates bekommt, ändert sich das.
            </p>
          ) : (
            <>
              <div className="flex flex-wrap items-center gap-2 mb-1">
                <span className="text-sm text-gray-600 dark:text-gray-300">Einstufung:</span>
                <span className="rounded px-2 py-0.5 text-xs font-semibold bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300">
                  {CLASS_LABEL[result.classification] || result.classification}
                </span>
                <span className="text-xs text-gray-500">· Konformität: {result.conformity_path_hint}</span>
              </div>
              <p className="text-xs text-gray-500 mb-3">
                {result.counts.code + result.counts.process + result.counts.document} Pflichten · grobe Schätzung
                ~{result.total_effort_days} Personentage. Das ist ein Überblick zur Klärung — keine Rechtsberatung.
              </p>

              <div className="grid md:grid-cols-3 gap-3">
                {BUCKETS.map((b) => (
                  <div key={b.key} className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-3">
                    <h3 className="text-sm font-semibold text-gray-800 dark:text-gray-200">{b.label}
                      <span className="ml-1 text-[10px] font-normal text-gray-400">({result.counts[b.key]} · {b.hint})</span>
                    </h3>
                    <ul className="mt-2 space-y-1.5">
                      {result.guideline[b.key].map((it) => (
                        <li key={it.req_id} className="text-[11px] text-gray-600 dark:text-gray-300">
                          <span className="font-medium text-gray-800 dark:text-gray-200">{it.title}</span>
                          <span className="text-gray-400"> · {it.annex_anchor}</span>
                          {it.measures.length > 0 && (
                            <span className="text-gray-400"> · {it.measures.map((m) => m.id).join(', ')}</span>
                          )}
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>

              <div className="flex flex-wrap gap-3 mt-3 text-[11px] text-gray-500">
                <span className="font-medium text-gray-600 dark:text-gray-300">CRA-Fristen:</span>
                {result.deadlines.map((d) => (
                  <span key={d.date}><span className="font-mono">{d.date}</span> {d.label}</span>
                ))}
              </div>

              {onCreateProject && (
                <button onClick={onCreateProject}
                  className="mt-4 rounded bg-purple-600 hover:bg-purple-700 text-white text-sm px-4 py-2">
                  Projekt anlegen & Checkliste abarbeiten — wir setzen es mit Ihnen um
                </button>
              )}
            </>
          )}
        </div>
      )}
    </div>
  )
}