'use client'

import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
import { RiskMatrix } from './_components/RiskMatrix'
import { RiskForm } from './_components/RiskForm'
import { RiskCard } from './_components/RiskCard'
import { LoadingSkeleton } from './_components/LoadingSkeleton'
import { useRisks } from './_hooks/useRisks'

export default function RisksPage() {
  const {
    state,
    showForm,
    setShowForm,
    editingRisk,
    setEditingRisk,
    loading,
    error,
    setError,
    matrixFilter,
    setMatrixFilter,
    handleSubmit,
    handleDelete,
    handleStatusChange,
    handleEdit,
    handleMatrixCellClick,
    stats,
    filteredRisks,
  } = useRisks()

  const stepInfo = STEP_EXPLANATIONS['risks']

  return (
    <div className="space-y-6">
      <StepHeader
        stepId="risks"
        title={stepInfo.title}
        description={stepInfo.description}
        explanation={stepInfo.explanation}
        tips={stepInfo.tips}
      >
        {!showForm && (
          <button
            onClick={() => setShowForm(true)}
            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            Risiko hinzufuegen
          </button>
        )}
      </StepHeader>

      {error && (
        <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center justify-between">
          <span>{error}</span>
          <button onClick={() => setError(null)} className="text-red-500 hover:text-red-700">&times;</button>
        </div>
      )}

      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div className="bg-white rounded-xl border border-gray-200 p-6">
          <div className="text-sm text-gray-500">Gesamt</div>
          <div className="text-3xl font-bold text-gray-900">{stats.totalRisks}</div>
        </div>
        <div className="bg-white rounded-xl border border-red-200 p-6">
          <div className="text-sm text-red-600">Kritisch</div>
          <div className="text-3xl font-bold text-red-600">{stats.criticalRisks}</div>
        </div>
        <div className="bg-white rounded-xl border border-orange-200 p-6">
          <div className="text-sm text-orange-600">Hoch</div>
          <div className="text-3xl font-bold text-orange-600">{stats.highRisks}</div>
        </div>
        <div className="bg-white rounded-xl border border-green-200 p-6">
          <div className="text-sm text-green-600">Mit Mitigation</div>
          <div className="text-3xl font-bold text-green-600">{stats.mitigatedRisks}</div>
        </div>
      </div>

      {showForm && (
        <RiskForm
          onSubmit={handleSubmit}
          onCancel={() => { setShowForm(false); setEditingRisk(null) }}
          initialData={editingRisk || undefined}
        />
      )}

      {loading && <LoadingSkeleton />}

      {!loading && (
        <RiskMatrix risks={state.risks} onCellClick={handleMatrixCellClick} />
      )}

      {matrixFilter && (
        <div className="flex items-center gap-2">
          <span className="px-3 py-1 text-sm bg-purple-100 text-purple-700 rounded-full flex items-center gap-2">
            Gefiltert: L={matrixFilter.likelihood} I={matrixFilter.impact}
            <button
              onClick={() => setMatrixFilter(null)}
              className="text-purple-500 hover:text-purple-700 font-bold"
            >
              &times;
            </button>
          </span>
        </div>
      )}

      {!loading && state.risks.length > 0 && (
        <div>
          <h3 className="text-lg font-semibold text-gray-900 mb-4">
            {matrixFilter ? `Risiken (L=${matrixFilter.likelihood}, I=${matrixFilter.impact})` : 'Alle Risiken'}
          </h3>
          <div className="space-y-4">
            {filteredRisks.map(risk => (
              <RiskCard
                key={risk.id}
                risk={risk}
                onEdit={() => handleEdit(risk)}
                onDelete={() => handleDelete(risk.id)}
                onStatusChange={(status) => handleStatusChange(risk.id, status)}
              />
            ))}
          </div>
        </div>
      )}

      {!loading && state.risks.length === 0 && !showForm && (
        <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
          <div className="w-16 h-16 mx-auto bg-orange-100 rounded-full flex items-center justify-center mb-4">
            <svg className="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
              />
            </svg>
          </div>
          <h3 className="text-lg font-semibold text-gray-900">Keine Risiken erfasst</h3>
          <p className="mt-2 text-gray-500 max-w-md mx-auto">
            Beginnen Sie mit der Erfassung von Risiken fuer Ihre KI-Anwendungen.
          </p>
          <button
            onClick={() => setShowForm(true)}
            className="mt-6 px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
          >
            Erstes Risiko erfassen
          </button>
        </div>
      )}
    </div>
  )
}