'use client'

/**
 * Risk Matrix Page
 *
 * Features:
 * - Visual 5x5 risk matrix
 * - Risk list with CRUD
 * - Risk assessment / update
 */

import Link from 'next/link'
import AdminLayout from '@/components/admin/AdminLayout'
import { useRisks } from './_components/useRisks'
import RiskMatrix from './_components/RiskMatrix'
import RiskList from './_components/RiskList'
import RiskForm from './_components/RiskForm'

export default function RisksPage() {
  const r = useRisks()

  return (
    <AdminLayout title="Risk Matrix" description="Risikobewertung & Management">
      {/* Header */}
      <div className="flex flex-wrap items-center gap-4 mb-6">
        <Link
          href="/admin/compliance"
          className="text-sm text-slate-500 hover:text-slate-700 flex items-center gap-1"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
          </svg>
          Zurueck
        </Link>

        <div className="flex-1" />

        {/* View Toggle */}
        <div className="flex bg-slate-100 rounded-lg p-1">
          <button
            onClick={() => r.setViewMode('matrix')}
            className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
              r.viewMode === 'matrix' ? 'bg-white shadow text-slate-900' : 'text-slate-600'
            }`}
          >
            Matrix
          </button>
          <button
            onClick={() => r.setViewMode('list')}
            className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
              r.viewMode === 'list' ? 'bg-white shadow text-slate-900' : 'text-slate-600'
            }`}
          >
            Liste
          </button>
        </div>

        <button
          onClick={r.openCreateModal}
          className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
        >
          Risiko hinzufuegen
        </button>
      </div>

      {/* Content */}
      {r.loading ? (
        <div className="flex items-center justify-center h-64">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600" />
        </div>
      ) : r.risks.length === 0 ? (
        <div className="bg-white rounded-xl shadow-sm border p-12 text-center">
          <svg className="w-16 h-16 text-slate-300 mx-auto mb-4" 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>
          <p className="text-slate-500 mb-4">Keine Risiken erfasst</p>
          <button
            onClick={r.openCreateModal}
            className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
          >
            Erstes Risiko hinzufuegen
          </button>
        </div>
      ) : r.viewMode === 'matrix' ? (
        <RiskMatrix risks={r.risks} onEditRisk={r.openEditModal} />
      ) : (
        <RiskList risks={r.risks} onEditRisk={r.openEditModal} />
      )}

      {/* Create Modal */}
      {r.createModalOpen && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg p-6 max-h-[90vh] overflow-y-auto">
            <h3 className="text-lg font-semibold text-slate-900 mb-4">Neues Risiko</h3>
            <RiskForm formData={r.formData} setFormData={r.setFormData} isCreate={true} />
            <div className="flex justify-end gap-3 mt-6">
              <button
                onClick={() => r.setCreateModalOpen(false)}
                className="px-4 py-2 text-slate-600 hover:text-slate-800"
              >
                Abbrechen
              </button>
              <button
                onClick={r.handleCreate}
                className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
              >
                Erstellen
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Edit Modal */}
      {r.editModalOpen && r.selectedRisk && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg p-6 max-h-[90vh] overflow-y-auto">
            <h3 className="text-lg font-semibold text-slate-900 mb-4">
              Risiko bearbeiten: {r.selectedRisk.risk_id}
            </h3>
            <RiskForm formData={r.formData} setFormData={r.setFormData} isCreate={false} />
            <div className="flex justify-end gap-3 mt-6">
              <button
                onClick={() => r.setEditModalOpen(false)}
                className="px-4 py-2 text-slate-600 hover:text-slate-800"
              >
                Abbrechen
              </button>
              <button
                onClick={r.handleUpdate}
                className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
              >
                Speichern
              </button>
            </div>
          </div>
        </div>
      )}
    </AdminLayout>
  )
}