'use client'

import { Language, PitchFeature, PitchCompetitor } from '@/lib/types'
import { t } from '@/lib/i18n'
import { ShieldCheck, Code2, ScanLine, FileSearch, Package, Bug } from 'lucide-react'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import FeatureMatrix from '../ui/FeatureMatrix'
import GlassCard from '../ui/GlassCard'
import BrandName from '../ui/BrandName'

interface CompetitionSlideProps {
  lang: Language
  features: PitchFeature[]
  competitors: PitchCompetitor[]
}

const securityFeatures = {
  de: [
    { icon: ShieldCheck, title: 'Self-Hosted + PII-Redaction', desc: 'Einziger Anbieter mit On-Premise-Deployment. LLM Gateway maskiert personenbezogene Daten vor KI-Verarbeitung' },
    { icon: ScanLine, title: 'DevSecOps Security Suite', desc: 'Semgrep, Gitleaks, Trivy, Grype — 6 integrierte Tools scannen Code, Container und Dependencies kontinuierlich' },
    { icon: Bug, title: 'SBOM + CI/CD Evidence', desc: 'CycloneDX/SPDX SBOM-Generator + automatische Compliance-Nachweise direkt aus der Build-Pipeline' },
    { icon: Package, title: 'Multi-Framework SDK', desc: 'Consent-Banner und Compliance-Widgets fuer React, Vue, Angular, iOS, Android, Flutter' },
    { icon: FileSearch, title: 'IPFS Dokumenten-Archivierung', desc: 'Dezentrale, manipulationssichere Archivierung mit kryptographischem Nachweis der Unveraendertheit' },
    { icon: Code2, title: 'KI-Compliance-Advisor (RAG)', desc: '2.274 indexierte Rechtstexte, KI-gestuetzte Dokumentenerstellung, Scope Engine L1-L4' },
  ],
  en: [
    { icon: ShieldCheck, title: 'Self-Hosted + PII Redaction', desc: 'Only provider with on-premise deployment. LLM Gateway masks personal data before AI processing' },
    { icon: ScanLine, title: 'DevSecOps Security Suite', desc: 'Semgrep, Gitleaks, Trivy, Grype — 6 integrated tools continuously scan code, containers and dependencies' },
    { icon: Bug, title: 'SBOM + CI/CD Evidence', desc: 'CycloneDX/SPDX SBOM generator + automatic compliance evidence directly from the build pipeline' },
    { icon: Package, title: 'Multi-Framework SDK', desc: 'Consent banners and compliance widgets for React, Vue, Angular, iOS, Android, Flutter' },
    { icon: FileSearch, title: 'IPFS Document Archiving', desc: 'Decentralized, tamper-proof archiving with cryptographic proof of integrity' },
    { icon: Code2, title: 'AI Compliance Advisor (RAG)', desc: '2,274 indexed legal texts, AI-powered document generation, Scope Engine L1-L4' },
  ],
}

export default function CompetitionSlide({ lang, features, competitors }: CompetitionSlideProps) {
  const i = t(lang)
  const coreFeatures = features.filter(f => f.category !== 'security')
  const secFeats = securityFeatures[lang]

  return (
    <div>
      <FadeInView className="text-center mb-8">
        <h2 className="text-4xl md:text-5xl font-bold mb-3">
          <GradientText>{i.competition.title}</GradientText>
        </h2>
        <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.competition.subtitle}</p>
      </FadeInView>

      {/* Feature Matrix (Core Compliance) */}
      <FadeInView delay={0.3}>
        <GlassCard className="mb-6 p-4 overflow-x-auto" hover={false}>
          <FeatureMatrix features={coreFeatures} lang={lang} />
        </GlassCard>
      </FadeInView>

      {/* Security & Developer Features — nur bei ComplAI */}
      <FadeInView delay={0.5}>
        <div className="mb-6">
          <h3 className="text-sm font-semibold text-indigo-400 mb-3 flex items-center gap-2">
            <ShieldCheck className="w-4 h-4" />
            {lang === 'de' ? <>Integrierte Security &amp; Developer Tools — nur bei <BrandName /></> : <>Integrated Security &amp; Developer Tools — <BrandName /> only</>}
          </h3>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
            {secFeats.map((feat, idx) => {
              const Icon = feat.icon
              return (
                <FadeInView key={idx} delay={0.6 + idx * 0.08}>
                  <div className="bg-indigo-500/5 border border-indigo-500/10 rounded-xl p-3">
                    <div className="flex items-center gap-2 mb-1.5">
                      <Icon className="w-4 h-4 text-indigo-400 shrink-0" />
                      <span className="text-xs font-semibold text-white">{feat.title}</span>
                    </div>
                    <p className="text-[11px] text-white/40 leading-relaxed">{feat.desc}</p>
                  </div>
                </FadeInView>
              )
            })}
          </div>
        </div>
      </FadeInView>

      {/* Competitor Summary */}
      <div className="grid md:grid-cols-3 gap-4">
        {competitors.map((c, idx) => (
          <FadeInView key={c.id} delay={0.9 + idx * 0.1}>
            <div className="bg-white/[0.04] border border-white/5 rounded-xl p-4">
              <div className="flex items-center justify-between mb-2">
                <h4 className="font-medium text-white/70">{c.name}</h4>
                <span className="text-xs text-white/30">{c.customers_count.toLocaleString()} {lang === 'de' ? 'Kunden' : 'customers'}</span>
              </div>
              <p className="text-xs text-white/40 mb-2">{c.pricing_range}</p>
              <div className="flex flex-wrap gap-1">
                {(c.weaknesses || []).slice(0, 2).map((w, widx) => (
                  <span key={widx} className="text-xs px-2 py-0.5 rounded-full bg-red-500/10 text-red-400">
                    {w}
                  </span>
                ))}
              </div>
            </div>
          </FadeInView>
        ))}
      </div>
    </div>
  )
}