'use client'

import { useState, useEffect } from 'react'
import { useSDK } from '@/lib/sdk'
import { useQualityData } from './_hooks/useQualityData'
import { MetricCard, type QualityMetric } from './_components/MetricCard'
import { TestRow } from './_components/TestRow'
import { MetricModal } from './_components/MetricModal'
import { TestModal } from './_components/TestModal'

export default function QualityPage() {
  const { state } = useSDK()
  const {
    metrics,
    tests,
    apiStats,
    loading,
    loadAll,
    handleCreateMetric,
    handleUpdateMetric,
    handleCreateTest,
    handleDeleteTest,
  } = useQualityData()

  const [showMetricModal, setShowMetricModal] = useState(false)
  const [showTestModal, setShowTestModal] = useState(false)
  const [editMetric, setEditMetric] = useState<QualityMetric | undefined>(undefined)

  useEffect(() => { loadAll() }, [loadAll])

  const avgScore = apiStats ? apiStats.avg_score : (metrics.length > 0 ? Math.round(metrics.reduce((s, m) => s + m.score, 0) / metrics.length) : 0)
  const metricsAboveThreshold = apiStats ? apiStats.metrics_above_threshold : metrics.filter(m => m.score >= m.threshold).length
  const passedTests = apiStats ? apiStats.passed : tests.filter(t => t.status === 'passed').length
  const failedTests = apiStats ? apiStats.failed : tests.filter(t => t.status === 'failed').length
  const failingMetrics = metrics.filter(m => m.score < m.threshold)

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">AI Quality Dashboard</h1>
          <p className="mt-1 text-gray-500">Ueberwachen Sie die Qualitaet und Fairness Ihrer KI-Systeme</p>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={() => setShowTestModal(true)}
            className="flex items-center gap-2 px-4 py-2 border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
            Test hinzufuegen
          </button>
          <button
            onClick={() => { setEditMetric(undefined); setShowMetricModal(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>
            Messung hinzufuegen
          </button>
        </div>
      </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">Durchschnittlicher Score</div>
          <div className="text-3xl font-bold text-gray-900">{avgScore}%</div>
        </div>
        <div className="bg-white rounded-xl border border-green-200 p-6">
          <div className="text-sm text-green-600">Metriken ueber Schwellenwert</div>
          <div className="text-3xl font-bold text-green-600">{metricsAboveThreshold}/{metrics.length}</div>
        </div>
        <div className="bg-white rounded-xl border border-green-200 p-6">
          <div className="text-sm text-green-600">Tests bestanden</div>
          <div className="text-3xl font-bold text-green-600">{passedTests}</div>
        </div>
        <div className="bg-white rounded-xl border border-red-200 p-6">
          <div className="text-sm text-red-600">Tests fehlgeschlagen</div>
          <div className="text-3xl font-bold text-red-600">{failedTests}</div>
        </div>
      </div>

      {failingMetrics.length > 0 && (
        <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-4 flex items-center gap-4">
          <div className="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
            <svg className="w-5 h-5 text-yellow-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>
          <div>
            <h4 className="font-medium text-yellow-800">{failingMetrics.length} Metrik(en) unter Schwellenwert</h4>
            <p className="text-sm text-yellow-600">Ueberpruefen Sie die betroffenen KI-Systeme und ergreifen Sie Korrekturmassnahmen.</p>
          </div>
        </div>
      )}

      <div>
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Qualitaetsmetriken</h3>
        {loading ? (
          <div className="text-center py-8 text-gray-400">Lade Metriken...</div>
        ) : metrics.length === 0 ? (
          <div className="bg-white rounded-xl border border-gray-200 p-8 text-center text-gray-400">
            Noch keine Metriken erfasst. Klicken Sie auf &quot;Messung hinzufuegen&quot;.
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {metrics.map(metric => (
              <MetricCard
                key={metric.id}
                metric={metric}
                onEdit={m => { setEditMetric(m); setShowMetricModal(true) }}
              />
            ))}
          </div>
        )}
      </div>

      <div>
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Testergebnisse</h3>
        <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Test</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Letzter Lauf</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Dauer</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Details</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Aktion</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100">
                {tests.length === 0 ? (
                  <tr>
                    <td colSpan={6} className="px-6 py-8 text-center text-gray-400">
                      Noch keine Tests erfasst.
                    </td>
                  </tr>
                ) : tests.map(test => (
                  <TestRow key={test.id} test={test} onDelete={handleDeleteTest} />
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {showMetricModal && (
        <MetricModal
          metric={editMetric}
          onClose={() => { setShowMetricModal(false); setEditMetric(undefined) }}
          onSave={editMetric
            ? (form: any) => { handleUpdateMetric(editMetric, form); setShowMetricModal(false); setEditMetric(undefined) }
            : (form: any) => { handleCreateMetric(form); setShowMetricModal(false) }
          }
        />
      )}
      {showTestModal && (
        <TestModal
          onClose={() => setShowTestModal(false)}
          onSave={(form: any) => { handleCreateTest(form); setShowTestModal(false) }}
        />
      )}
    </div>
  )
}