'use client'

import React from 'react'
import type { ApplicableRegulation } from '@/lib/sdk/compliance-scope-types'
import type { ObligationStats } from '../_types'

export function ApplicableRegsBanner({ regs }: { regs: ApplicableRegulation[] }) {
  if (regs.length === 0) return null
  return (
    <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
      <h3 className="text-sm font-semibold text-blue-900 mb-2">Anwendbare Regulierungen (aus Auto-Profiling)</h3>
      <div className="flex flex-wrap gap-2">
        {regs.map(reg => (
          <span
            key={reg.id}
            className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-white border border-blue-300 text-blue-800"
          >
            <svg className="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
            {reg.name}
            {reg.classification && <span className="text-blue-500">({reg.classification})</span>}
            <span className="text-blue-400">{reg.obligation_count} Pflichten</span>
          </span>
        ))}
      </div>
    </div>
  )
}

export function NoProfileWarning() {
  return (
    <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-sm text-yellow-700">
      Kein Unternehmensprofil vorhanden. Auto-Profiling verwendet Beispieldaten.{' '}
      <a href="/sdk/company-profile" className="underline font-medium">Profil anlegen →</a>
    </div>
  )
}

export function OverdueAlert({ stats }: { stats: ObligationStats | null }) {
  if ((stats?.overdue ?? 0) <= 0) return null
  return (
    <div className="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center gap-3">
      <div className="w-9 h-9 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
        <svg className="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      </div>
      <div>
        <h4 className="font-medium text-red-800 text-sm">Achtung: {stats?.overdue} ueberfaellige Pflicht(en)</h4>
        <p className="text-xs text-red-600">Diese Pflichten erfordern sofortige Aufmerksamkeit.</p>
      </div>
    </div>
  )
}

export function EmptyList({ onCreate }: { onCreate: () => void }) {
  return (
    <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
      <div className="w-14 h-14 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
        <svg className="w-7 h-7 text-gray-400" 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 2" />
        </svg>
      </div>
      <h3 className="text-base font-semibold text-gray-900">Keine Pflichten gefunden</h3>
      <p className="mt-2 text-sm text-gray-500">
        Klicken Sie auf &quot;Pflicht hinzufuegen&quot;, um die erste Compliance-Pflicht zu erfassen.
      </p>
      <button
        onClick={onCreate}
        className="mt-4 px-5 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700"
      >
        Erste Pflicht erstellen
      </button>
    </div>
  )
}