'use client'

import { useState } from 'react'
import { useParams } from 'next/navigation'
import { useFMEA, type FMEARow } from './_hooks/useFMEA'

const COMP_TYPE_LABELS: Record<string, string> = {
  mechanical: 'Mechanisch', electrical: 'Elektrisch', sensor: 'Sensor',
  actuator: 'Aktor', software: 'Software', firmware: 'Firmware',
  ai_model: 'KI-Modell', hmi: 'HMI', network: 'Netzwerk',
  hydraulic: 'Hydraulik', pneumatic: 'Pneumatik', safety: 'Sicherheit',
}

function rpzColor(rpz: number): string {
  if (rpz > 200) return 'bg-red-100 text-red-800 border-red-200'
  if (rpz > 100) return 'bg-orange-100 text-orange-800 border-orange-200'
  if (rpz > 50) return 'bg-yellow-100 text-yellow-800 border-yellow-200'
  return 'bg-green-100 text-green-800 border-green-200'
}

function rpzLabel(rpz: number): string {
  if (rpz > 200) return 'Kritisch'
  if (rpz > 100) return 'Handlungsbedarf'
  if (rpz > 50) return 'Beobachten'
  return 'Akzeptabel'
}

export default function FMEAPage() {
  const { projectId } = useParams<{ projectId: string }>()
  const { rows, loading, stats, components, suggestFMs, suggesting, suggestions, suggestSource, setSuggestions } = useFMEA(projectId)
  const [suggestComp, setSuggestComp] = useState<string | null>(null)

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-xl font-bold text-gray-900 dark:text-white">FMEA-Worksheet</h1>
        <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
          Fehlermoeglich&shy;keits- und Einflussanalyse — RPZ = Severity x Occurrence x Detection
        </p>
      </div>

      {/* Info Box */}
      <FMEAInfoBox />

      {/* KI-Vorschlag + Export */}
      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-2">
          <select
            value={suggestComp || ''}
            onChange={(e) => setSuggestComp(e.target.value || null)}
            className="px-3 py-2 border border-gray-300 rounded-lg text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
          >
            <option value="">Komponente waehlen...</option>
            {components.map((c) => (
              <option key={c.id} value={c.id}>{c.name}</option>
            ))}
          </select>
          <button
            onClick={() => suggestComp && suggestFMs(suggestComp)}
            disabled={!suggestComp || suggesting}
            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium transition-colors disabled:opacity-50"
          >
            {suggesting ? (
              <span className="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full" />
            ) : (
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <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>
            )}
            KI-Vorschlag
          </button>
        </div>
        <div className="flex justify-end">
        <a
          href={`/api/sdk/v1/iace/projects/${projectId}/fmea/export`}
          className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium transition-colors"
          download
        >
          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
          </svg>
          VDA Excel exportieren
        </a>
        </div>
      </div>

      {/* Suggest Results */}
      {suggestions.length > 0 && (
        <div className="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-xl p-4">
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-sm font-semibold text-purple-800 dark:text-purple-300">
              KI-Vorschlaege ({suggestions.length}) — {suggestSource === 'llm' ? 'LLM-generiert' : 'Bibliothek'}
            </h3>
            <button onClick={() => setSuggestions([])} className="text-xs text-purple-600 hover:text-purple-800">Schliessen</button>
          </div>
          <div className="space-y-2">
            {suggestions.map((fm, i) => (
              <div key={i} className="flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg p-3 border border-purple-100 dark:border-purple-800">
                <div className="flex-1 min-w-0">
                  <div className="text-sm font-medium text-gray-900 dark:text-white">{fm.name_de}</div>
                  <div className="text-xs text-gray-500 mt-0.5">{fm.effect}</div>
                  <div className="flex gap-3 mt-1 text-xs text-gray-400">
                    <span>S={fm.default_severity}</span>
                    <span>O={fm.default_occurrence}</span>
                    <span>D={fm.default_detection}</span>
                    <span className="font-bold">RPZ={fm.default_severity * fm.default_occurrence * fm.default_detection}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Stats */}
      <div className="grid grid-cols-4 gap-3">
        <StatCard label="Gesamt" value={stats.total} color="gray" />
        <StatCard label="Kritisch (RPZ &gt; 200)" value={stats.critical} color="red" />
        <StatCard label="Handlungsbedarf (RPZ &gt; 100)" value={stats.actionRequired} color="orange" />
        <StatCard label="Akzeptabel (RPZ &le; 100)" value={stats.acceptable} color="green" />
      </div>

      {/* RPZ Threshold Info */}
      <div className="p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 text-xs text-amber-800 dark:text-amber-300">
        <strong>RPZ-Schwellen:</strong> Kritisch &gt; 200 | Handlungsbedarf &gt; 100 | Beobachten &gt; 50 | Akzeptabel &le; 50.
        Massnahmen sind erforderlich ab RPZ &gt; 100.
      </div>

      {/* FMEA Table */}
      {rows.length === 0 ? (
        <div className="text-center py-12 text-gray-500">
          Keine Failure Modes gefunden. Bitte zuerst Komponenten erfassen.
        </div>
      ) : (
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-50 dark:bg-gray-750 border-b border-gray-200 dark:border-gray-700">
                  <th className="px-3 py-2.5 text-left text-xs font-medium text-gray-500 uppercase">Komponente</th>
                  <th className="px-3 py-2.5 text-left text-xs font-medium text-gray-500 uppercase">Typ</th>
                  <th className="px-3 py-2.5 text-left text-xs font-medium text-gray-500 uppercase">Fehlerart</th>
                  <th className="px-3 py-2.5 text-left text-xs font-medium text-gray-500 uppercase">Auswirkung</th>
                  <th className="px-3 py-2.5 text-center text-xs font-medium text-gray-500 uppercase w-12">S</th>
                  <th className="px-3 py-2.5 text-center text-xs font-medium text-gray-500 uppercase w-12">O</th>
                  <th className="px-3 py-2.5 text-center text-xs font-medium text-gray-500 uppercase w-12">D</th>
                  <th className="px-3 py-2.5 text-center text-xs font-medium text-gray-500 uppercase w-16">RPZ</th>
                  <th className="px-3 py-2.5 text-center text-xs font-medium text-gray-500 uppercase w-12">AP</th>
                  <th className="px-3 py-2.5 text-left text-xs font-medium text-gray-500 uppercase">Bewertung</th>
                  <th className="px-3 py-2.5 text-left text-xs font-medium text-gray-500 uppercase">Erkennung</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
                {rows.map((row, idx) => (
                  <FMEATableRow key={`${row.component.id}-${row.failureMode.id}-${idx}`} row={row} />
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  )
}

function FMEATableRow({ row }: { row: FMEARow }) {
  const color = rpzColor(row.rpz)
  return (
    <tr className={`hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors ${row.rpz > 100 ? 'bg-red-50/30 dark:bg-red-900/10' : ''}`}>
      <td className="px-3 py-2.5 text-sm font-medium text-gray-900 dark:text-white">{row.component.name}</td>
      <td className="px-3 py-2.5">
        <span className="text-xs px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
          {COMP_TYPE_LABELS[row.component.component_type] || row.component.component_type}
        </span>
      </td>
      <td className="px-3 py-2.5">
        <div className="text-sm text-gray-900 dark:text-white">{row.failureMode.name_de}</div>
        <div className="text-[10px] text-gray-400">{row.failureMode.id}</div>
      </td>
      <td className="px-3 py-2.5 text-xs text-gray-600 dark:text-gray-400 max-w-[200px] truncate" title={row.failureMode.effect}>
        {row.failureMode.effect}
      </td>
      <td className="px-3 py-2.5 text-sm text-center font-medium text-gray-900 dark:text-white">{row.severity}</td>
      <td className="px-3 py-2.5 text-sm text-center font-medium text-gray-900 dark:text-white">{row.occurrence}</td>
      <td className="px-3 py-2.5 text-sm text-center font-medium text-gray-900 dark:text-white">{row.detection}</td>
      <td className="px-3 py-2.5 text-center">
        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-sm font-bold border ${color}`}>
          {row.rpz}
        </span>
      </td>
      <td className="px-3 py-2.5 text-center">
        <span className={`inline-flex items-center px-2 py-1 rounded text-xs font-bold ${
          row.ap === 'H' ? 'bg-red-600 text-white' :
          row.ap === 'M' ? 'bg-yellow-500 text-white' :
          'bg-green-500 text-white'
        }`}>
          {row.ap}
        </span>
      </td>
      <td className="px-3 py-2.5">
        <span className={`text-xs px-2 py-0.5 rounded-full ${color}`}>{rpzLabel(row.rpz)}</span>
      </td>
      <td className="px-3 py-2.5 text-xs text-gray-500 dark:text-gray-400 max-w-[150px] truncate" title={row.failureMode.detection_hint}>
        {row.failureMode.detection_hint || '-'}
      </td>
    </tr>
  )
}

function FMEAInfoBox() {
  const [open, setOpen] = useState(false)
  return (
    <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl overflow-hidden">
      <button onClick={() => setOpen(!open)} className="w-full flex items-center justify-between px-4 py-3 text-left">
        <div className="flex items-center gap-2">
          <svg className="w-4 h-4 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <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>
          <span className="text-sm font-medium text-blue-800 dark:text-blue-300">Was ist FMEA? — Anleitung &amp; Beispiel</span>
        </div>
        <svg className={`w-4 h-4 text-blue-600 transition-transform ${open ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </button>
      {open && (
        <div className="px-4 pb-4 text-xs text-blue-800 dark:text-blue-300 space-y-3">
          <p><strong>FMEA</strong> (Fehlermoeglich- und Einflussanalyse) ist eine systematische Methode zur vorbeugenden Qualitaetssicherung nach AIAG-VDA (2019).</p>
          <div>
            <strong>Bewertungsskalen (je 1-10):</strong>
            <ul className="mt-1 ml-4 space-y-0.5 list-disc">
              <li><strong>S (Severity)</strong> — Schwere der Auswirkung: 1 = kaum merkbar, 10 = katastrophal (Lebensgefahr)</li>
              <li><strong>O (Occurrence)</strong> — Auftretenswahrscheinlichkeit: 1 = praktisch ausgeschlossen, 10 = sehr haeufig</li>
              <li><strong>D (Detection)</strong> — Entdeckbarkeit: 1 = sofort erkennbar, 10 = nicht erkennbar</li>
            </ul>
          </div>
          <div>
            <strong>Kennzahlen:</strong>
            <ul className="mt-1 ml-4 space-y-0.5 list-disc">
              <li><strong>RPZ</strong> = S x O x D (1-1000). Ab RPZ &gt; 100: Massnahme erforderlich.</li>
              <li><strong>AP (Action Priority)</strong> — AIAG-VDA Standard: <span className="inline-block px-1.5 py-0.5 bg-red-600 text-white rounded text-[10px] font-bold">H</span> = sofort handeln, <span className="inline-block px-1.5 py-0.5 bg-yellow-500 text-white rounded text-[10px] font-bold">M</span> = planen, <span className="inline-block px-1.5 py-0.5 bg-green-500 text-white rounded text-[10px] font-bold">L</span> = beobachten</li>
            </ul>
          </div>
          <div>
            <strong>Beispiel:</strong> SPS-Steuerung → Kommunikationsausfall (S=8, O=3, D=5) → RPZ=120, AP=M → Massnahme: Redundante Kommunikation implementieren.
          </div>
          <div>
            <strong>Workflow:</strong> 1. Komponente waehlen → 2. Fehlerart identifizieren → 3. S/O/D bewerten → 4. AP pruefen → 5. Bei H/M: Massnahme definieren → 6. Nach Massnahme: neu bewerten
          </div>
        </div>
      )}
    </div>
  )
}

function StatCard({ label, value, color }: { label: string; value: number; color: string }) {
  const colors: Record<string, string> = {
    gray: 'bg-gray-50 text-gray-700 border-gray-200',
    red: 'bg-red-50 text-red-700 border-red-200',
    orange: 'bg-orange-50 text-orange-700 border-orange-200',
    green: 'bg-green-50 text-green-700 border-green-200',
  }
  return (
    <div className={`rounded-xl border p-4 ${colors[color] || colors.gray}`}>
      <div className="text-2xl font-bold">{value}</div>
      <div className="text-xs mt-1">{label}</div>
    </div>
  )
}