'use client'

import React from 'react'
import { REGULATIONS_IN_RAG } from '../rag-constants'
import {
  REGULATIONS,
  COLLECTION_TOTALS,
  TYPE_LABELS,
  TYPE_COLORS,
  isInRag,
  getKnownChunks,
} from '../rag-data'
import type { UseRAGPageReturn } from '../_hooks/useRAGPage'

interface OverviewTabProps {
  hook: UseRAGPageReturn
}

export function OverviewTab({ hook }: OverviewTabProps) {
  const {
    dsfaLoading,
    dsfaStatus,
    dsfaSources,
    setRegulationCategory,
    setActiveTab,
  } = hook

  return (
    <div className="space-y-6">
      {/* RAG Categories Overview */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="font-semibold text-slate-900 mb-4">RAG-Kategorien</h3>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <button
            onClick={() => { setRegulationCategory('regulations'); setActiveTab('regulations') }}
            className="p-4 rounded-lg border border-blue-200 bg-blue-50 hover:bg-blue-100 transition-colors text-left"
          >
            <p className="text-xs font-medium text-blue-600 uppercase">Gesetze & Regulierungen</p>
            <p className="text-2xl font-bold text-slate-900 mt-1">{COLLECTION_TOTALS.total_legal.toLocaleString()}</p>
            <p className="text-xs text-slate-500 mt-1">{Object.keys(REGULATIONS_IN_RAG).length}/{REGULATIONS.length} im RAG</p>
          </button>
          <button
            onClick={() => { setRegulationCategory('dsfa'); setActiveTab('regulations') }}
            className="p-4 rounded-lg border border-purple-200 bg-purple-50 hover:bg-purple-100 transition-colors text-left"
          >
            <p className="text-xs font-medium text-purple-600 uppercase">DSFA Corpus</p>
            <p className="text-2xl font-bold text-slate-900 mt-1">{dsfaLoading ? '-' : (dsfaStatus?.total_chunks || 0).toLocaleString()}</p>
            <p className="text-xs text-slate-500 mt-1">{dsfaSources.length || '~70'} Quellen (WP248, DSK, Gesetze)</p>
          </button>
          <div className="p-4 rounded-lg border border-emerald-200 bg-emerald-50 text-left">
            <p className="text-xs font-medium text-emerald-600 uppercase">NiBiS EH</p>
            <p className="text-2xl font-bold text-slate-900 mt-1">7.996</p>
            <p className="text-xs text-slate-500 mt-1">Chunks &middot; Bildungs-Erwartungshorizonte</p>
          </div>
          <div className="p-4 rounded-lg border border-orange-200 bg-orange-50 text-left">
            <p className="text-xs font-medium text-orange-600 uppercase">Legal Templates</p>
            <p className="text-2xl font-bold text-slate-900 mt-1">7.689</p>
            <p className="text-xs text-slate-500 mt-1">Chunks &middot; Dokumentvorlagen (VVT, TOM, DSFA)</p>
          </div>
        </div>
      </div>

      {/* Quick Stats per Type */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        {Object.entries(TYPE_LABELS).map(([type, label]) => {
          const regs = REGULATIONS.filter((r) => r.type === type)
          const inRagCount = regs.filter((r) => isInRag(r.code)).length
          const totalChunks = regs.reduce((sum, r) => sum + getKnownChunks(r.code), 0)
          return (
            <div key={type} className="bg-white rounded-xl p-4 border border-slate-200">
              <div className="flex items-center gap-2 mb-2">
                <span className={`px-2 py-0.5 text-xs rounded ${TYPE_COLORS[type]}`}>{label}</span>
                <span className="text-slate-500 text-sm">{inRagCount}/{regs.length} im RAG</span>
              </div>
              <p className="text-xl font-bold text-slate-900">{totalChunks.toLocaleString()} Chunks</p>
            </div>
          )
        })}
      </div>

      {/* Top Regulations */}
      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <div className="px-4 py-3 border-b bg-slate-50">
          <h3 className="font-semibold text-slate-900">Top Regulierungen (nach Chunks)</h3>
        </div>
        <div className="divide-y">
          {[...REGULATIONS].sort((a, b) => getKnownChunks(b.code) - getKnownChunks(a.code))
            .slice(0, 10)
            .map((reg) => {
              const chunks = getKnownChunks(reg.code)
              return (
                <div key={reg.code} className="px-4 py-3 flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    {isInRag(reg.code) ? (
                      <span className="text-green-500 text-sm">✓</span>
                    ) : (
                      <span className="text-red-400 text-sm">✗</span>
                    )}
                    <span className={`px-2 py-0.5 text-xs rounded ${TYPE_COLORS[reg.type]}`}>
                      {TYPE_LABELS[reg.type]}
                    </span>
                    <span className="font-medium text-slate-900">{reg.name}</span>
                    <span className="text-slate-500 text-sm">({reg.code})</span>
                  </div>
                  <span className={`font-bold ${chunks > 0 ? 'text-teal-600' : 'text-slate-300'}`}>{chunks > 0 ? chunks.toLocaleString() + ' Chunks' : '—'}</span>
                </div>
              )
            })}
        </div>
      </div>
    </div>
  )
}