'use client'

import React from 'react'
import { REGULATIONS_IN_RAG } from '../rag-constants'
import {
  RAG_DOCUMENTS,
  FUTURE_OUTLOOK,
  ADDITIONAL_REGULATIONS,
  LEGAL_BASIS_INFO,
  isInRag,
} from '../rag-data'

export function FutureOutlookSection() {
  return (
    <div className="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl border border-indigo-200 p-6">
      <div className="flex items-center gap-3 mb-4">
        <span className="text-2xl">🔮</span>
        <div>
          <h3 className="font-semibold text-slate-900">Zukunftsaussicht</h3>
          <p className="text-sm text-slate-500">Geplante Aenderungen und neue Regulierungen</p>
        </div>
      </div>

      <div className="space-y-4">
        {FUTURE_OUTLOOK.map((item) => (
          <div key={item.id} className="bg-white rounded-lg border border-slate-200 overflow-hidden">
            <div className="px-4 py-3 flex items-center justify-between bg-slate-50 border-b">
              <div className="flex items-center gap-3">
                <span className={`px-2 py-1 text-xs font-medium rounded ${
                  item.status === 'proposed' ? 'bg-yellow-100 text-yellow-700' :
                  item.status === 'agreed' ? 'bg-green-100 text-green-700' :
                  item.status === 'withdrawn' ? 'bg-red-100 text-red-700' :
                  'bg-blue-100 text-blue-700'
                }`}>
                  {item.statusLabel}
                </span>
                <h4 className="font-semibold text-slate-900">{item.name}</h4>
              </div>
              <span className="text-sm text-slate-500">Erwartet: {item.expectedDate}</span>
            </div>
            <div className="p-4">
              <p className="text-sm text-slate-600 mb-3">{item.description}</p>
              <div className="mb-3">
                <p className="text-xs font-medium text-slate-500 uppercase mb-2">Wichtige Aenderungen:</p>
                <ul className="text-sm text-slate-600 space-y-1">
                  {item.keyChanges.slice(0, 4).map((change, idx) => (
                    <li key={idx} className="flex items-start gap-2">
                      <span className="text-teal-500 mt-1">•</span>
                      <span>{change}</span>
                    </li>
                  ))}
                  {item.keyChanges.length > 4 && (
                    <li className="text-slate-400 text-xs">+ {item.keyChanges.length - 4} weitere...</li>
                  )}
                </ul>
              </div>
              <div className="flex items-center justify-between">
                <div className="flex flex-wrap gap-1">
                  {item.affectedRegulations.map((code) => (
                    <span key={code} className="px-2 py-0.5 text-xs bg-slate-100 text-slate-600 rounded">
                      {code}
                    </span>
                  ))}
                </div>
                <a
                  href={item.source}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-xs text-teal-600 hover:underline"
                >
                  Quelle →
                </a>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export function RagCoverageSection() {
  return (
    <div className="bg-white rounded-xl border border-slate-200 p-6">
      <div className="flex items-center gap-3 mb-4">
        <span className="text-2xl">✅</span>
        <div>
          <h3 className="font-semibold text-slate-900">RAG-Abdeckung ({Object.keys(REGULATIONS_IN_RAG).length} von {RAG_DOCUMENTS.length} Regulierungen)</h3>
          <p className="text-sm text-slate-500">Stand: Maerz 2026 — Alle im RAG-System verfuegbaren Regulierungen (inkl. Verbraucherschutz Phase H)</p>
        </div>
      </div>

      <div className="flex flex-wrap gap-2">
        {RAG_DOCUMENTS.filter((r: any) => isInRag(r.code)).map((reg: any) => (
          <span key={reg.code} className="px-2.5 py-1 text-xs font-medium bg-green-100 text-green-700 rounded-full border border-green-200">
            ✓ {reg.code}
          </span>
        ))}
      </div>
      <div className="mt-4 pt-4 border-t border-slate-100">
        <p className="text-xs font-medium text-slate-500 mb-2">Noch nicht im RAG:</p>
        <div className="flex flex-wrap gap-2">
          {RAG_DOCUMENTS.filter((r: any) => !isInRag(r.code)).map((reg: any) => (
            <span key={reg.code} className="px-2.5 py-1 text-xs font-medium bg-red-50 text-red-400 rounded-full border border-red-100">
              ✗ {reg.code}
            </span>
          ))}
        </div>
      </div>
    </div>
  )
}

export function FutureRegulationsSection() {
  return (
    <div className="bg-white rounded-xl border border-slate-200 p-6">
      <div className="flex items-center gap-3 mb-4">
        <span className="text-2xl">🔮</span>
        <div>
          <h3 className="font-semibold text-slate-900">Zukuenftige Regulierungen</h3>
          <p className="text-sm text-slate-500">Noch nicht verabschiedet oder zur Erweiterung vorgesehen</p>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {ADDITIONAL_REGULATIONS.map((reg) => (
          <div key={reg.code} className={`rounded-lg border p-4 ${
            reg.status === 'active' ? 'border-green-200 bg-green-50' : 'border-yellow-200 bg-yellow-50'
          }`}>
            <div className="flex items-center justify-between mb-2">
              <div className="flex items-center gap-2">
                <span className={`px-2 py-0.5 text-xs font-bold rounded ${
                  reg.type === 'eu_regulation' ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-700'
                }`}>
                  {reg.code}
                </span>
                <span className={`px-2 py-0.5 text-xs rounded ${
                  reg.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'
                }`}>
                  {reg.status === 'active' ? 'In Kraft' : 'Vorgeschlagen'}
                </span>
              </div>
              <span className={`px-2 py-0.5 text-xs rounded ${
                reg.priority === 'high' ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-600'
              }`}>
                {reg.priority === 'high' ? 'Hohe Prioritaet' : 'Mittel'}
              </span>
            </div>
            <h4 className="font-medium text-slate-900 text-sm mb-1">{reg.name}</h4>
            <p className="text-xs text-slate-600 mb-2">{reg.description}</p>
            <div className="flex items-center justify-between text-xs">
              <span className="text-slate-500">Ab: {reg.effectiveDate}</span>
              {reg.celex && (
                <a
                  href={`https://eur-lex.europa.eu/legal-content/DE/TXT/?uri=CELEX:${reg.celex}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-teal-600 hover:underline"
                >
                  EUR-Lex →
                </a>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export function LegalBasisSection() {
  return (
    <div className="bg-emerald-50 rounded-xl border border-emerald-200 p-6">
      <div className="flex items-center gap-3 mb-4">
        <span className="text-2xl">⚖️</span>
        <div>
          <h3 className="font-semibold text-slate-900">{LEGAL_BASIS_INFO.title}</h3>
          <p className="text-sm text-emerald-700">{LEGAL_BASIS_INFO.summary}</p>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {LEGAL_BASIS_INFO.details.map((detail, idx) => (
          <div key={idx} className="bg-white rounded-lg border border-emerald-100 p-3">
            <div className="flex items-center gap-2 mb-1">
              <span className={`px-2 py-0.5 text-xs font-medium rounded ${
                detail.status === 'Erlaubt' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'
              }`}>
                {detail.status}
              </span>
              <span className="font-medium text-sm text-slate-900">{detail.aspect}</span>
            </div>
            <p className="text-xs text-slate-600">{detail.explanation}</p>
          </div>
        ))}
      </div>
    </div>
  )
}