'use client'

import React from 'react'

interface Violation {
  service: string
  severity: string
  text: string
  legal_ref: string
}

interface PhaseData {
  scripts: string[]
  cookies: string[]
  tracking_services?: string[]
  new_tracking?: string[]
  violations?: Violation[]
  undocumented?: string[]
}

interface ConsentData {
  banner_detected: boolean
  banner_provider: string
  phases: {
    before_consent: PhaseData
    after_reject: PhaseData
    after_accept: PhaseData
  }
  summary: {
    critical: number
    high: number
    undocumented: number
    total_violations: number
  }
}

const SEV = {
  CRITICAL: { bg: 'bg-red-100 border-red-300', text: 'text-red-800', badge: 'bg-red-600' },
  HIGH: { bg: 'bg-orange-100 border-orange-300', text: 'text-orange-800', badge: 'bg-orange-500' },
}

function PhaseCard({ title, icon, data, type }: {
  title: string; icon: string; data: PhaseData; type: 'before' | 'reject' | 'accept'
}) {
  const violations = data.violations || []
  const tracking = data.tracking_services || data.new_tracking || []
  const undocumented = data.undocumented || []
  const hasProblem = violations.length > 0 || undocumented.length > 0

  return (
    <div className={`border rounded-lg p-4 ${hasProblem ? 'border-red-200 bg-red-50' : 'border-green-200 bg-green-50'}`}>
      <h4 className="text-sm font-semibold text-gray-900 mb-2 flex items-center gap-2">
        <span>{icon}</span> {title}
      </h4>

      {/* Violations */}
      {violations.map((v, i) => (
        <div key={i} className={`mb-2 p-2 rounded border ${SEV[v.severity as keyof typeof SEV]?.bg || SEV.HIGH.bg}`}>
          <div className="flex items-center gap-2">
            <span className={`text-[10px] px-1.5 py-0.5 rounded text-white ${SEV[v.severity as keyof typeof SEV]?.badge || SEV.HIGH.badge}`}>
              {v.severity}
            </span>
            <span className={`text-xs font-medium ${SEV[v.severity as keyof typeof SEV]?.text || SEV.HIGH.text}`}>
              {v.service}
            </span>
          </div>
          <p className="text-xs text-gray-700 mt-1">{v.text}</p>
          <p className="text-[10px] text-gray-500 mt-0.5">{v.legal_ref}</p>
        </div>
      ))}

      {/* Undocumented (Phase C only) */}
      {undocumented.map((s, i) => (
        <div key={i} className="mb-2 p-2 rounded border border-yellow-300 bg-yellow-50">
          <span className="text-xs text-yellow-800">✗ {s} — nicht in Cookie-Policy dokumentiert</span>
        </div>
      ))}

      {/* Tracking services (no violations) */}
      {violations.length === 0 && undocumented.length === 0 && tracking.length > 0 && (
        <div className="text-xs text-green-700">
          {tracking.map((t, i) => <div key={i}>✓ {t} — {type === 'accept' ? 'mit Consent OK' : 'erkannt'}</div>)}
        </div>
      )}

      {violations.length === 0 && undocumented.length === 0 && tracking.length === 0 && (
        <p className="text-xs text-green-700">✓ Keine Tracking-Dienste erkannt</p>
      )}

      {/* Cookie/Script count */}
      <div className="flex gap-3 mt-2 text-[10px] text-gray-400">
        <span>{data.scripts?.length || 0} Scripts</span>
        <span>{data.cookies?.length || 0} Cookies</span>
      </div>
    </div>
  )
}

export function ConsentTestResult({ data }: { data: ConsentData }) {
  const s = data.summary

  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <span className={`w-3 h-3 rounded-full ${data.banner_detected ? 'bg-green-500' : 'bg-red-500'}`} />
          <span className="text-sm font-medium text-gray-900">
            Cookie-Banner: {data.banner_detected ? data.banner_provider : 'Nicht erkannt'}
          </span>
        </div>
        <div className="flex gap-2">
          {s.critical > 0 && (
            <span className="text-xs px-2 py-1 rounded bg-red-600 text-white font-medium">
              {s.critical} Kritisch
            </span>
          )}
          {s.high > 0 && (
            <span className="text-xs px-2 py-1 rounded bg-orange-500 text-white font-medium">
              {s.high} Hoch
            </span>
          )}
          {s.total_violations === 0 && (
            <span className="text-xs px-2 py-1 rounded bg-green-500 text-white font-medium">
              Keine Verstoesse
            </span>
          )}
        </div>
      </div>

      {/* Three Phases */}
      <div className="space-y-3">
        <PhaseCard
          title="Phase A: Vor Einwilligung"
          icon="🔍"
          data={data.phases.before_consent}
          type="before"
        />
        {data.banner_detected && (
          <>
            <PhaseCard
              title="Phase B: Nach Ablehnung"
              icon="🚫"
              data={data.phases.after_reject}
              type="reject"
            />
            <PhaseCard
              title="Phase C: Nach Zustimmung"
              icon="✅"
              data={data.phases.after_accept}
              type="accept"
            />
          </>
        )}
      </div>

      {/* No banner warning */}
      {!data.banner_detected && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-xs text-red-700">
          <strong>Kein Cookie-Banner erkannt.</strong> Alle erkannten Tracking-Dienste laden ohne
          Einwilligung — dies ist ein Verstoss gegen §25 TDDDG.
        </div>
      )}
    </div>
  )
}