/**
 * AnnotationCard
 * Displays one saved annotation summary in the dashboard, including progress,
 * atlas metadata, check state, selection, export, and delete actions.
 */
import React from 'react';
import { 
  FileText, Play, Clock, Download, Trash2, User, 
  Check, BookOpen
} from 'lucide-react';
import { useLanguage } from '../../context/LanguageContext';

export default function AnnotationCard({ 
  item,
  onSelect, 
  onExport, 
  onDelete, 
  isSelected, 
  onToggleSelection
}) {
  const { t, lang } = useLanguage();
  const filled = item.filledTraitsCount || 0;
  const total = item.totalTraitsInAtlas || 0; 
  const isDone = filled >= total && total > 0;
  const progress = total > 0 ? Math.round((filled / total) * 100) : 0;
  const isChecked = item.isChecked || false;

  return (
    <div className={`group bg-white border-2 transition-all flex flex-col relative overflow-hidden rounded-[28px] p-4 shadow-sm hover:shadow-xl
      ${isSelected ? 'border-blue-500 ring-4 ring-blue-500/10' : isChecked ? 'border-green-100 bg-green-50/20' : 'border-slate-100'}`}>
      <div 
        onClick={(e) => { e.stopPropagation(); onToggleSelection(item.annotationId); }}
        className={`absolute top-4 left-4 w-5 h-5 rounded-md border-2 z-20 flex items-center justify-center cursor-pointer transition-all ${
          isSelected 
            ? 'bg-blue-600 border-blue-600 text-white' 
            : 'bg-white border-slate-300 opacity-0 group-hover:opacity-100'
        }`}
      >
        {isSelected && <Check size={11} strokeWidth={4} />}
      </div>

      <div className="absolute top-3.5 right-3.5 flex gap-1 z-20">
        <button
          onClick={(e) => onDelete(e, item)}
          className="p-1.5 text-slate-300 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all opacity-0 group-hover:opacity-100"
          title={t('deleteTooltip')}
        >
          <Trash2 size={16} />
        </button>
      </div>

      <div className="flex justify-between items-center mb-4 mt-6">
        <div className="flex items-center gap-2">
          <div className={`p-1.5 rounded-xl ${isDone ? 'bg-green-50 text-green-600' : 'bg-blue-50 text-blue-600'}`}>
            <FileText size={16} />
          </div>
          {isChecked && (
            <span className="flex items-center justify-center text-green-700 bg-green-100 w-7 h-7 rounded-full shrink-0">
              <Check size={11} />
            </span>
          )}
        </div>
      </div>

      <div className="flex-1">
        <h3 className={`font-bold text-base mb-1 truncate ${isChecked ? 'text-green-900' : 'text-slate-900'}`} title={item.modelLabel}>
          {item.modelLabel}
        </h3>

        <div className="flex flex-col gap-1 mb-3">
          <p className="text-[10px] text-slate-400 font-bold uppercase tracking-tight flex items-center gap-1.5">
            <Clock size={12} /> {new Date(item.lastUpdated).toLocaleString(lang === 'cs' ? 'cs-CZ' : 'en-US')}
          </p>
          
          <p className="text-[10px] text-slate-500 font-bold uppercase tracking-tight flex items-center gap-1.5">
            <User size={12} className="text-blue-500" />
            <span className="text-slate-400">{t('processedBy')}:</span>
            <span className="text-slate-900 truncate">{item.annotator}</span>
          </p>

          <div className="text-[10px] text-slate-500 font-bold uppercase tracking-tight flex items-center gap-1.5">
            <BookOpen size={12} className="text-amber-500" />
            <span className="text-slate-400">{t('methodology') || 'Atlas'}:</span>
            <span className="text-slate-900 truncate max-w-[120px]">
                {(lang === 'cs' ? item.atlasNameCs : item.atlasNameEn) || t('valueNotSpecified')}
            </span>
          </div>
        </div>

        <div className="mb-4">
          <div className="flex justify-between text-[10px] font-black uppercase text-slate-400 mb-1">
            <span>{filled} / {total} {t('traitsCount')}</span>
            <span>{progress}%</span>
          </div>
          <div className="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
            <div
              className={`h-full transition-all duration-700 ${isChecked ? 'bg-green-500' : isDone ? 'bg-green-400' : 'bg-blue-600'}`}
              style={{ width: `${Math.min(progress, 100)}%` }}
            />
          </div>
        </div>
      </div>

      <div className="flex gap-2 mt-auto items-center">
        <button
          onClick={() => onSelect(item.annotationId)}
          className={`flex-1 flex items-center justify-center gap-1.5 py-2.5 px-3 rounded-xl transition-all text-xs font-bold shadow-sm
            ${isChecked ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-slate-900 hover:bg-blue-600 text-white'}`}
        >
          <Play size={12} fill="currentColor" /> {t('continue')}
        </button>
        <button
          onClick={(e) => onExport(e, item)}
          className="px-3 py-2.5 bg-white text-slate-600 rounded-xl hover:bg-blue-50 transition-all border-2 border-slate-100"
          title={t('exportCsvTooltip')}
        >
          <Download size={16} />
        </button>
      </div>
    </div>
  );
}