'use client'

import { TABS, TabNavigation, LoadingSpinner, ErrorMessage } from './_components/GCIHelpers'
import { OverviewTab } from './_components/OverviewTab'
import { BreakdownTab } from './_components/BreakdownTab'
import { NIS2Tab } from './_components/NIS2Tab'
import { ISOTab } from './_components/ISOTab'
import { MatrixTab } from './_components/MatrixTab'
import { AuditTab } from './_components/AuditTab'
import { useGCI } from './_hooks/useGCI'

export default function GCIPage() {
  const {
    activeTab,
    setActiveTab,
    loading,
    error,
    gci,
    breakdown,
    history,
    matrix,
    nis2,
    iso,
    profiles,
    selectedProfile,
    loadData,
    handleProfileChange,
  } = useGCI()

  return (
    <div className="max-w-7xl mx-auto space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Gesamt-Compliance-Index (GCI)</h1>
          <p className="text-sm text-gray-500 mt-1">4-stufiges, mathematisch fundiertes Compliance-Scoring</p>
        </div>
        <button
          onClick={() => loadData(selectedProfile)}
          disabled={loading}
          className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm font-medium hover:bg-purple-700 disabled:opacity-50 transition-colors"
        >
          {loading ? 'Lade...' : 'Aktualisieren'}
        </button>
      </div>

      <TabNavigation tabs={TABS} activeTab={activeTab} onTabChange={setActiveTab} />

      {error && <ErrorMessage message={error} onRetry={() => loadData(selectedProfile)} />}

      {loading && !gci ? (
        <LoadingSpinner />
      ) : gci ? (
        <div className="pb-8">
          {activeTab === 'overview' && (
            <OverviewTab
              gci={gci}
              history={history}
              profiles={profiles}
              selectedProfile={selectedProfile}
              onProfileChange={handleProfileChange}
            />
          )}
          {activeTab === 'breakdown' && (
            <BreakdownTab breakdown={breakdown} loading={!breakdown} />
          )}
          {activeTab === 'nis2' && <NIS2Tab nis2={nis2} />}
          {activeTab === 'iso' && <ISOTab iso={iso} />}
          {activeTab === 'matrix' && <MatrixTab matrix={matrix} />}
          {activeTab === 'audit' && <AuditTab gci={gci} />}
        </div>
      ) : null}
    </div>
  )
}