'use client'

import React, { useState } from 'react'
import { ComplianceCheckTab } from './_components/ComplianceCheckTab'
import { ComplianceFAQ } from './_components/ComplianceFAQ'
import { SnapshotHistoryList } from './_components/SnapshotHistoryList'
import { ArchitekturView } from './_components/ArchitekturView'

export default function AgentPage() {
  // Nach einem abgeschlossenen Check die Historie unten neu laden.
  const [historyKey, setHistoryKey] = useState(0)
  const [tab, setTab] = useState<'check' | 'architektur'>('check')

  return (
    <div className="space-y-6 max-w-4xl">
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Compliance Agent</h1>
        <p className="text-gray-500 mt-1">Webseiten + Dokumente auf DSGVO-Konformität prüfen.</p>
      </div>

      <div className="flex gap-1 border-b border-gray-200 dark:border-gray-700">
        {([['check', 'Check'], ['architektur', 'Architektur']] as const).map(([id, label]) => (
          <button
            key={id}
            onClick={() => setTab(id)}
            className={`px-3 py-2 text-sm font-medium -mb-px border-b-2 transition-colors ${
              tab === id
                ? 'border-purple-500 text-purple-600 dark:text-purple-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
            }`}
          >
            {label}
          </button>
        ))}
      </div>

      {tab === 'check' ? (
        <>
          <ComplianceCheckTab onComplete={() => setHistoryKey(k => k + 1)} />
          <SnapshotHistoryList refreshKey={historyKey} />
          <ComplianceFAQ />
        </>
      ) : (
        <ArchitekturView />
      )}
    </div>
  )
}