'use client'

import { useState } from 'react'
import { DisplayChecklistItem, DisplayStatus } from './types'

interface ChecklistItemCardProps {
  item: DisplayChecklistItem
  onStatusChange: (status: DisplayStatus) => void
  onNotesChange: (notes: string) => void
  onAddEvidence: () => void
}

export function ChecklistItemCard({
  item,
  onStatusChange,
  onNotesChange,
  onAddEvidence,
}: ChecklistItemCardProps) {
  const [showNotes, setShowNotes] = useState(false)

  const statusColors = {
    compliant: 'bg-green-100 text-green-700 border-green-300',
    'non-compliant': 'bg-red-100 text-red-700 border-red-300',
    partial: 'bg-yellow-100 text-yellow-700 border-yellow-300',
    'not-reviewed': 'bg-gray-100 text-gray-500 border-gray-300',
  }

  const priorityColors = {
    critical: 'bg-red-100 text-red-700',
    high: 'bg-orange-100 text-orange-700',
    medium: 'bg-yellow-100 text-yellow-700',
    low: 'bg-green-100 text-green-700',
  }

  return (
    <div className={`bg-white rounded-xl border-2 p-6 ${
      item.status === 'non-compliant' ? 'border-red-200' :
      item.status === 'partial' ? 'border-yellow-200' :
      item.status === 'compliant' ? 'border-green-200' : 'border-gray-200'
    }`}>
      <div className="flex items-start gap-4">
        <div className="flex-1">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xs text-gray-500">{item.category}</span>
            <span className={`px-2 py-0.5 text-xs rounded-full ${priorityColors[item.priority]}`}>
              {item.priority === 'critical' ? 'Kritisch' :
               item.priority === 'high' ? 'Hoch' :
               item.priority === 'medium' ? 'Mittel' : 'Niedrig'}
            </span>
            <span className="px-2 py-0.5 text-xs bg-blue-50 text-blue-600 rounded">
              {item.requirementId}
            </span>
          </div>
          <p className="text-gray-900 font-medium">{item.question}</p>
        </div>
        <select
          value={item.status}
          onChange={(e) => onStatusChange(e.target.value as DisplayStatus)}
          className={`px-3 py-2 rounded-lg border text-sm font-medium ${statusColors[item.status]}`}
        >
          <option value="not-reviewed">Nicht geprueft</option>
          <option value="compliant">Konform</option>
          <option value="partial">Teilweise</option>
          <option value="non-compliant">Nicht konform</option>
        </select>
      </div>

      {item.notes && (
        <div className="mt-3 p-3 bg-gray-50 rounded-lg text-sm text-gray-600">
          {item.notes}
        </div>
      )}

      {item.evidence.length > 0 && (
        <div className="mt-3 flex items-center gap-2">
          <span className="text-sm text-gray-500">Nachweise:</span>
          {item.evidence.map(ev => (
            <span key={ev} className="px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded">
              {ev}
            </span>
          ))}
        </div>
      )}

      {item.verifiedBy && item.verifiedAt && (
        <div className="mt-3 text-sm text-gray-500">
          Geprueft von {item.verifiedBy} am {item.verifiedAt.toLocaleDateString('de-DE')}
        </div>
      )}

      <div className="mt-3 flex items-center gap-2">
        <button
          onClick={() => setShowNotes(!showNotes)}
          className="text-sm text-purple-600 hover:text-purple-700"
        >
          {showNotes ? 'Notizen ausblenden' : 'Notizen bearbeiten'}
        </button>
        <button
          onClick={onAddEvidence}
          className="text-sm text-gray-500 hover:text-gray-700"
        >
          Nachweis hinzufuegen
        </button>
      </div>

      {showNotes && (
        <div className="mt-3">
          <textarea
            value={item.notes}
            onChange={(e) => onNotesChange(e.target.value)}
            placeholder="Notizen hinzufuegen..."
            rows={2}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm"
          />
        </div>
      )}
    </div>
  )
}
