'use client'

import React from 'react'
import type { LegalDocument } from '../_hooks/useConsentDocuments'

export function DocumentCard({
  document,
  onDelete,
  onEdit,
  onPreview,
}: {
  document: LegalDocument
  onDelete: (id: string) => void
  onEdit: (id: string) => void
  onPreview: (doc: LegalDocument) => void
}) {
  const typeColors = {
    'privacy-policy': 'bg-blue-100 text-blue-700',
    terms: 'bg-green-100 text-green-700',
    'cookie-policy': 'bg-yellow-100 text-yellow-700',
    imprint: 'bg-gray-100 text-gray-700',
    dpa: 'bg-purple-100 text-purple-700',
  }

  const typeLabels = {
    'privacy-policy': 'Datenschutz',
    terms: 'AGB',
    'cookie-policy': 'Cookie-Richtlinie',
    imprint: 'Impressum',
    dpa: 'AVV',
  }

  const statusColors = {
    draft: 'bg-yellow-100 text-yellow-700',
    active: 'bg-green-100 text-green-700',
    archived: 'bg-gray-100 text-gray-500',
  }

  const statusLabels = {
    draft: 'Entwurf',
    active: 'Aktiv',
    archived: 'Archiviert',
  }

  return (
    <div className={`bg-white rounded-xl border-2 p-6 ${
      document.status === 'draft' ? 'border-yellow-200' : 'border-gray-200'
    }`}>
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <div className="flex items-center gap-2 mb-2">
            <span className={`px-2 py-1 text-xs rounded-full ${typeColors[document.type]}`}>
              {typeLabels[document.type]}
            </span>
            <span className={`px-2 py-1 text-xs rounded-full ${statusColors[document.status]}`}>
              {statusLabels[document.status]}
            </span>
            <span className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded uppercase">
              {document.language}
            </span>
            <span className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded">
              v{document.version}
            </span>
          </div>
          <h3 className="text-lg font-semibold text-gray-900">{document.name}</h3>
        </div>
      </div>

      {document.changes.length > 0 && (
        <div className="mt-3">
          <span className="text-sm text-gray-500">Letzte Aenderungen:</span>
          <ul className="mt-1 text-sm text-gray-600 list-disc list-inside">
            {document.changes.slice(0, 2).map((change, i) => (
              <li key={i}>{change}</li>
            ))}
          </ul>
        </div>
      )}

      <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-sm">
        <div className="text-gray-500">
          <span>Autor: {document.author}</span>
          <span className="mx-2">|</span>
          <span>Aktualisiert: {document.lastUpdated.toLocaleDateString('de-DE')}</span>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={() => onEdit(document.id)}
            className="px-3 py-1 text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
          >
            Bearbeiten
          </button>
          <button
            onClick={() => onPreview(document)}
            className="px-3 py-1 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
          >
            Vorschau
          </button>
          {document.status === 'draft' && (
            <button
              onClick={() => onEdit(document.id)}
              className="px-3 py-1 bg-green-50 text-green-700 hover:bg-green-100 rounded-lg transition-colors"
            >
              Veroeffentlichen
            </button>
          )}
          <button
            onClick={() => onDelete(document.id)}
            className="px-3 py-1 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
          >
            Loeschen
          </button>
        </div>
      </div>
    </div>
  )
}