'use client'

import { AuditChecklistItem, RESULT_STATUS } from './types'
import { Language } from '@/lib/compliance-i18n'

export default function ChecklistItemRow({
  item,
  index,
  onSignOff,
  lang,
}: {
  item: AuditChecklistItem
  index: number
  onSignOff: () => void
  lang: Language
}) {
  const status = RESULT_STATUS[item.current_result]

  return (
    <div className="p-4 hover:bg-slate-50 transition-colors">
      <div className="flex items-start gap-4">
        {/* Status Icon */}
        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-lg ${status.color}`}>
          {status.icon}
        </div>

        {/* Content */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1">
            <span className="text-xs font-medium text-slate-500">{index}.</span>
            <span className="font-mono text-sm text-primary-600">{item.regulation_code}</span>
            <span className="font-mono text-sm text-slate-700">{item.article}</span>
            {item.is_signed && (
              <span className="px-1.5 py-0.5 text-xs bg-green-100 text-green-700 rounded flex items-center gap-1">
                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
                Signiert
              </span>
            )}
          </div>
          <h4 className="text-sm font-medium text-slate-900 mb-1">{item.title}</h4>
          {item.notes && (
            <p className="text-xs text-slate-500 italic mb-2">&quot;{item.notes}&quot;</p>
          )}
          <div className="flex items-center gap-4 text-xs text-slate-500">
            <span>{item.controls_mapped} Controls</span>
            <span>{item.evidence_count} Nachweise</span>
            {item.signed_at && (
              <span>Signiert: {new Date(item.signed_at).toLocaleDateString('de-DE')}</span>
            )}
          </div>
        </div>

        {/* Actions */}
        <div className="flex items-center gap-2">
          <span className={`px-2 py-1 text-xs font-medium rounded ${status.color}`}>
            {lang === 'de' ? status.label : status.labelEn}
          </span>
          <button
            onClick={onSignOff}
            className="p-2 text-slate-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors"
            title="Sign-off"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  )
}
