'use client'

/**
 * Consent Admin Panel
 *
 * Admin interface for managing:
 * - Documents (AGB, Privacy, etc.)
 * - Document Versions
 * - Email Templates
 * - Statistics
 */

import AdminLayout from '@/components/admin/AdminLayout'
import { useConsent } from './_components/useConsent'
import { TABS } from './_components/types'
import DocumentsTab from './_components/DocumentsTab'
import VersionsTab from './_components/VersionsTab'
import EmailsTab from './_components/EmailsTab'
import GdprTab from './_components/GdprTab'
import StatsTab from './_components/StatsTab'

export default function ConsentAdminPage() {
  const consent = useConsent()

  return (
    <AdminLayout title="Consent Verwaltung" description="Rechtliche Dokumente & Versionen">
      {/* Token Input */}
      {!consent.authToken && (
        <div className="bg-white rounded-xl border border-slate-200 p-4 mb-6">
          <label className="block text-sm font-medium text-slate-700 mb-2">
            Admin Token
          </label>
          <input
            type="password"
            placeholder="JWT Token eingeben..."
            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
            onChange={(e) => {
              consent.setAuthToken(e.target.value)
              localStorage.setItem('bp_admin_token', e.target.value)
            }}
          />
        </div>
      )}

      {/* Tabs */}
      <div className="mb-6">
        <div className="flex gap-1 bg-slate-100 p-1 rounded-lg w-fit">
          {TABS.map((tab) => (
            <button
              key={tab.id}
              onClick={() => consent.setActiveTab(tab.id)}
              className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
                consent.activeTab === tab.id
                  ? 'bg-white text-slate-900 shadow-sm'
                  : 'text-slate-600 hover:text-slate-900'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      {/* Content */}
      <div>
        {consent.error && (
          <div className="mb-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg">
            {consent.error}
            <button
              onClick={() => consent.setError(null)}
              className="ml-4 text-red-500 hover:text-red-700"
            >
              ✕
            </button>
          </div>
        )}

        <div className="bg-white rounded-xl border border-slate-200 shadow-sm">
          {consent.activeTab === 'documents' && (
            <DocumentsTab
              documents={consent.documents}
              loading={consent.loading}
              setSelectedDocument={consent.setSelectedDocument}
              setActiveTab={consent.setActiveTab}
            />
          )}
          {consent.activeTab === 'versions' && (
            <VersionsTab
              documents={consent.documents}
              versions={consent.versions}
              selectedDocument={consent.selectedDocument}
              setSelectedDocument={consent.setSelectedDocument}
              loading={consent.loading}
            />
          )}
          {consent.activeTab === 'emails' && <EmailsTab />}
          {consent.activeTab === 'gdpr' && <GdprTab />}
          {consent.activeTab === 'stats' && <StatsTab />}
        </div>
      </div>
    </AdminLayout>
  )
}