'use client';

import { useEffect } from 'react';
import type { GenImage } from '@/lib/types';

export type ResultGridProps = {
  images: GenImage[];
  onAction: (imageId: string, action: 'select' | 'reject' | 'reset') => void;
};

export default function ResultGrid({ images, onAction }: ResultGridProps) {
  useEffect(() => {
    function handler(e: KeyboardEvent) {
      const target = e.target as HTMLElement;
      if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) return;
      const n = parseInt(e.key, 10);
      if (isNaN(n) || n < 1 || n > 9 || n > images.length) return;
      const img = images[n - 1];
      if (!img) return;
      const action = e.shiftKey
        ? (img.status === 'rejected' ? 'reset' : 'reject')
        : (img.status === 'selected' ? 'reset' : 'select');
      onAction(img.id, action);
    }
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [images, onAction]);

  const cols = images.length <= 4 ? 'grid-cols-2' : images.length <= 9 ? 'grid-cols-3' : 'grid-cols-4';
  const selectedCount = images.filter(i => i.status === 'selected').length;

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2 text-[11px] text-zinc-500">
          <kbd className="kbd">1</kbd>
          <span>–</span>
          <kbd className="kbd">{Math.min(9, images.length)}</kbd>
          <span>选中</span>
          <span className="text-zinc-300 mx-1">/</span>
          <kbd className="kbd">⇧</kbd>
          <span>+</span>
          <kbd className="kbd">1</kbd>
          <span>打叉</span>
        </div>
        <div className="text-xs text-zinc-600">
          已选 <span className="font-semibold text-zinc-900">{selectedCount}</span>
          <span className="text-zinc-400"> / {images.length}</span>
        </div>
      </div>

      <div className={`grid ${cols} gap-3`}>
        {images.map((img, i) => (
          <div
            key={img.id}
            className={`tile group ${img.status === 'selected' ? 'tile-selected' : ''} ${img.status === 'rejected' ? 'tile-rejected' : ''}`}
          >
            <img src={img.url} alt={`gen ${i + 1}`} className="w-full h-full object-cover" />
            <div className="tile-keynum">{i + 1}</div>

            {img.status === 'selected' && (
              <div className="tile-badge tile-badge-selected">✓</div>
            )}
            {img.status === 'rejected' && (
              <div className="tile-badge tile-badge-rejected">✕</div>
            )}

            <div className="absolute inset-x-0 bottom-0 p-2 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity bg-gradient-to-t from-black/70 via-black/30 to-transparent">
              <button
                onClick={() => onAction(img.id, img.status === 'selected' ? 'reset' : 'select')}
                className="flex-1 px-3 py-1.5 rounded-lg bg-white text-zinc-900 text-xs font-medium hover:bg-zinc-100 transition-colors shadow-sm"
              >
                {img.status === 'selected' ? '✓ 已选' : '选中'}
              </button>
              <button
                onClick={() => onAction(img.id, img.status === 'rejected' ? 'reset' : 'reject')}
                className="px-3 py-1.5 rounded-lg bg-white/90 text-zinc-700 text-xs font-medium hover:bg-white hover:text-red-600 transition-colors shadow-sm"
              >✕</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
