'use client';

import type { Timestamp } from '@/types/firestore';

interface ReviewStatusPopoverProps {
  review: {
    reviewerName: string;
    createdAt: Timestamp;
    decision: string;
    comment: string;
  } | null;
  onViewHistory: () => void;
  children: React.ReactNode;
}

export default function ReviewStatusPopover({ review, onViewHistory, children }: ReviewStatusPopoverProps) {
  return (
    <div className="relative group inline-block">
      {children}

      {review && (
        <div className="absolute left-1/2 -translate-x-1/2 top-full mt-3 z-50 min-w-[280px] bg-white shadow-xl rounded-2xl p-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none group-hover:pointer-events-auto">
          {/* 위쪽 화살표 triangle */}
          <div className="absolute -top-2 left-1/2 -translate-x-1/2 w-4 h-2 overflow-hidden">
            <div className="w-3 h-3 bg-white shadow-sm rotate-45 mx-auto translate-y-1.5" />
          </div>

          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <span className="text-xs font-bold text-gray-500 uppercase tracking-wide">최근 검토</span>
              <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${
                review.decision === 'approve'
                  ? 'bg-green-100 text-green-700'
                  : review.decision === 'reject'
                  ? 'bg-red-100 text-red-700'
                  : 'bg-amber-100 text-amber-700'
              }`}>
                {review.decision === 'approve' ? '승인' : review.decision === 'reject' ? '반려' : '수정요청'}
              </span>
            </div>

            <div className="text-sm font-semibold text-gray-800">{review.reviewerName}</div>
            <div className="text-xs text-gray-500">{review.createdAt?.toDate?.().toLocaleString() ?? '-'}</div>

            {review.comment && (
              <p className="text-xs text-gray-600 bg-gray-50 rounded-lg p-2 leading-relaxed line-clamp-3">
                {review.comment.slice(0, 100)}{review.comment.length > 100 ? '...' : ''}
              </p>
            )}

            <button
              onClick={onViewHistory}
              className="w-full text-xs text-indigo-600 hover:text-indigo-800 font-bold pt-1 text-left hover:underline"
            >
              이력 보기 →
            </button>
          </div>
        </div>
      )}
    </div>
  );
}