'use client'

import React, { useState } from 'react'
import { TabId } from './_types'
import { OverviewTab } from './_components/OverviewTab'
import { PoliciesTab } from './_components/PoliciesTab'
import { SoATab } from './_components/SoATab'
import { ObjectivesTab } from './_components/ObjectivesTab'
import { AuditsTab } from './_components/AuditsTab'
import { ReviewsTab } from './_components/ReviewsTab'

// =============================================================================
// MAIN PAGE
// =============================================================================

const TABS: { id: TabId; label: string }[] = [
  { id: 'overview', label: 'Uebersicht' },
  { id: 'policies', label: 'Policies' },
  { id: 'soa', label: 'SoA (Annex A)' },
  { id: 'objectives', label: 'Ziele' },
  { id: 'audits', label: 'Audits & Findings' },
  { id: 'reviews', label: 'Management Reviews' },
]

export default function ISMSPage() {
  const [tab, setTab] = useState<TabId>('overview')
  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-6">
          <h1 className="text-2xl font-bold text-gray-900">ISMS — ISO 27001</h1>
          <p className="text-sm text-gray-600 mt-1">
            Informationssicherheits-Managementsystem: Scope, Policies, SoA, Audits, CAPA und Management-Reviews
          </p>
        </div>

        {/* Tabs */}
        <div className="flex gap-1 bg-white border rounded-xl p-1 mb-6">
          {TABS.map(t => (
            <button
              key={t.id}
              onClick={() => setTab(t.id)}
              className={`flex-1 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                tab === t.id
                  ? 'bg-purple-600 text-white shadow-sm'
                  : 'text-gray-600 hover:bg-gray-100'
              }`}
            >
              {t.label}
            </button>
          ))}
        </div>

        {/* Tab Content */}
        {tab === 'overview' && <OverviewTab />}
        {tab === 'policies' && <PoliciesTab />}
        {tab === 'soa' && <SoATab />}
        {tab === 'objectives' && <ObjectivesTab />}
        {tab === 'audits' && <AuditsTab />}
        {tab === 'reviews' && <ReviewsTab />}
      </div>
    </div>
  )
}