'use client'

/**
 * Source Policy Management Page (SDK Version)
 *
 * Whitelist-based data source management for compliance RAG corpus.
 * Controls which legal sources may be used, PII rules, and audit trail.
 */

import { useState, useEffect } from 'react'
import { useSDK } from '@/lib/sdk'
import StepHeader from '@/components/sdk/StepHeader/StepHeader'
import { SourcesTab } from '@/components/sdk/source-policy/SourcesTab'
import { OperationsMatrixTab } from '@/components/sdk/source-policy/OperationsMatrixTab'
import { PIIRulesTab } from '@/components/sdk/source-policy/PIIRulesTab'
import { AuditTab } from '@/components/sdk/source-policy/AuditTab'

// API base URL — now uses Next.js proxy routes
const API_BASE = '/api/sdk/v1/source-policy'

interface PolicyStats {
  active_policies: number
  allowed_sources: number
  pii_rules: number
  blocked_today: number
  blocked_total: number
}

type TabId = 'dashboard' | 'sources' | 'operations' | 'pii' | 'audit'

export default function SourcePolicyPage() {
  const { state } = useSDK()
  const [activeTab, setActiveTab] = useState<TabId>('dashboard')
  const [stats, setStats] = useState<PolicyStats | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

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

  const fetchStats = async () => {
    try {
      setLoading(true)
      const res = await fetch(`${API_BASE}/policy-stats`)

      if (!res.ok) {
        throw new Error('Fehler beim Laden der Statistiken')
      }

      const data = await res.json()
      setStats(data)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
      setStats({
        active_policies: 0,
        allowed_sources: 0,
        pii_rules: 0,
        blocked_today: 0,
        blocked_total: 0,
      })
    } finally {
      setLoading(false)
    }
  }

  const tabs: { id: TabId; name: string; icon: JSX.Element }[] = [
    {
      id: 'dashboard',
      name: 'Dashboard',
      icon: (
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
        </svg>
      ),
    },
    {
      id: 'sources',
      name: 'Quellen',
      icon: (
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
        </svg>
      ),
    },
    {
      id: 'operations',
      name: 'Operations',
      icon: (
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
        </svg>
      ),
    },
    {
      id: 'pii',
      name: 'PII-Regeln',
      icon: (
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
        </svg>
      ),
    },
    {
      id: 'audit',
      name: 'Audit',
      icon: (
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
      ),
    },
  ]

  return (
    <div className="space-y-6">
      <StepHeader stepId="source-policy" showProgress={true} />

      {/* Error Display */}
      {error && (
        <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center justify-between">
          <span>{error}</span>
          <button onClick={() => setError(null)} className="text-red-500 hover:text-red-700">
            &times;
          </button>
        </div>
      )}

      {/* Stats Cards */}
      {stats && (
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div className="bg-white rounded-xl border border-slate-200 p-4">
            <div className="text-2xl font-bold text-purple-600">{stats.active_policies}</div>
            <div className="text-sm text-slate-500">Aktive Policies</div>
          </div>
          <div className="bg-white rounded-xl border border-slate-200 p-4">
            <div className="text-2xl font-bold text-green-600">{stats.allowed_sources}</div>
            <div className="text-sm text-slate-500">Zugelassene Quellen</div>
          </div>
          <div className="bg-white rounded-xl border border-slate-200 p-4">
            <div className="text-2xl font-bold text-red-600">{stats.blocked_today}</div>
            <div className="text-sm text-slate-500">Blockiert (heute)</div>
          </div>
          <div className="bg-white rounded-xl border border-slate-200 p-4">
            <div className="text-2xl font-bold text-blue-600">{stats.pii_rules}</div>
            <div className="text-sm text-slate-500">PII-Regeln</div>
          </div>
        </div>
      )}

      {/* Tabs */}
      <div className="flex gap-2 flex-wrap">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 ${
              activeTab === tab.id
                ? 'bg-purple-600 text-white'
                : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
            }`}
          >
            {tab.icon}
            {tab.name}
          </button>
        ))}
      </div>

      {/* Tab Content */}
      <>
        {activeTab === 'dashboard' && stats && (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-white rounded-xl border border-gray-200 p-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">Quellen-Uebersicht</h3>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Zugelassene Quellen</span>
                  <span className="text-2xl font-bold text-green-600">{stats.allowed_sources}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Aktive Policies</span>
                  <span className="text-2xl font-bold text-purple-600">{stats.active_policies}</span>
                </div>
                <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
                  <div
                    className="h-full bg-green-500 rounded-full"
                    style={{ width: `${stats.allowed_sources > 0 ? Math.min((stats.active_policies / stats.allowed_sources) * 100, 100) : 0}%` }}
                  />
                </div>
              </div>
            </div>

            <div className="bg-white rounded-xl border border-gray-200 p-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">Datenschutz-Regeln</h3>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">PII-Regeln aktiv</span>
                  <span className="text-2xl font-bold text-blue-600">{stats.pii_rules}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Blockiert (heute)</span>
                  <span className={`text-2xl font-bold ${stats.blocked_today > 0 ? 'text-red-600' : 'text-green-600'}`}>
                    {stats.blocked_today}
                  </span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Blockiert (gesamt)</span>
                  <span className="text-lg font-semibold text-gray-500">{stats.blocked_total}</span>
                </div>
              </div>
            </div>

            <div className="md:col-span-2 bg-white rounded-xl border border-gray-200 p-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">Compliance-Status</h3>
              <div className="flex items-center gap-6">
                <div className="flex-1 text-center p-4 bg-green-50 rounded-lg">
                  <div className="text-sm text-green-700 font-medium">Quellen konfiguriert</div>
                  <div className="text-3xl font-bold text-green-600 mt-1">
                    {stats.allowed_sources > 0 ? 'Ja' : 'Nein'}
                  </div>
                </div>
                <div className="flex-1 text-center p-4 bg-blue-50 rounded-lg">
                  <div className="text-sm text-blue-700 font-medium">PII-Schutz aktiv</div>
                  <div className="text-3xl font-bold text-blue-600 mt-1">
                    {stats.pii_rules > 0 ? 'Ja' : 'Nein'}
                  </div>
                </div>
                <div className="flex-1 text-center p-4 bg-purple-50 rounded-lg">
                  <div className="text-sm text-purple-700 font-medium">Policies definiert</div>
                  <div className="text-3xl font-bold text-purple-600 mt-1">
                    {stats.active_policies > 0 ? 'Ja' : 'Nein'}
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
        {activeTab === 'dashboard' && !stats && loading && (
          <div className="text-center py-12 text-slate-500">Lade Dashboard...</div>
        )}
        {activeTab === 'sources' && <SourcesTab apiBase={API_BASE} onUpdate={fetchStats} />}
        {activeTab === 'operations' && <OperationsMatrixTab apiBase={API_BASE} />}
        {activeTab === 'pii' && <PIIRulesTab apiBase={API_BASE} onUpdate={fetchStats} />}
        {activeTab === 'audit' && <AuditTab apiBase={API_BASE} />}
      </>
    </div>
  )
}