'use client';

import { useMemo } from 'react';
import { motion } from 'framer-motion';
import { CheckCircle2, Clock, Trash2, UserCheck } from 'lucide-react';
import { formatDateTime, toUserIdentity } from '@/lib/admin/utils';
import type { AdminUser } from '@/lib/types/admin';

type ApprovalsTabProps = {
  users: AdminUser[];
  processingUserId: string | null;
  isAdmin: boolean;
  onApprove: (userId: string) => void;
  onUnapprove: (userId: string) => void;
  onDeleteUser: (user: AdminUser) => void;
};

export function ApprovalsTab({ users, processingUserId, isAdmin, onApprove, onUnapprove, onDeleteUser }: ApprovalsTabProps) {
  // onUnapprove — прокидывается из родителя для симметрии API пары Approvals/Users,
  // в текущем списке (только pending) вызывается только onApprove.
  void onUnapprove;
  const pendingUsers = useMemo(() => users.filter((user) => !user.isApproved), [users]);

  return (
    <motion.div key="approvals" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="space-y-6 max-w-5xl mx-auto pb-10">
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
          <h2 className="text-2xl font-bold flex items-center gap-3">
            <div className="p-2.5 bg-emerald-500/10 rounded-xl border border-emerald-500/20">
              <UserCheck className="w-6 h-6 text-emerald-400" />
            </div>
            Очередь на одобрение
          </h2>
          <p className="text-sm text-gray-400 mt-2 max-w-2xl">
            Пользователи, ожидающие проверки. Одобрите, чтобы дать им доступ к LinkSnap, или снимите одобрение позже во вкладке «Пользователи».
          </p>
        </div>
        <div className="shrink-0 flex items-center gap-2">
          <span className="inline-flex items-center gap-2 px-3 py-2 rounded-xl border border-amber-500/30 bg-amber-500/10 text-amber-200 text-sm font-semibold">
            <Clock className="w-4 h-4" />
            В очереди: {pendingUsers.length}
          </span>
        </div>
      </div>

      {pendingUsers.length === 0 ? (
        <div className="bg-[#0A0A0A] border border-white/5 rounded-3xl p-10 text-center">
          <div className="mx-auto w-14 h-14 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center mb-4">
            <CheckCircle2 className="w-7 h-7 text-emerald-400" />
          </div>
          <h3 className="text-lg font-bold text-white">Очередь пуста</h3>
          <p className="text-sm text-gray-400 mt-2">Все зарегистрированные пользователи уже одобрены.</p>
        </div>
      ) : (
        <div className="bg-[#0A0A0A] border border-white/5 rounded-3xl shadow-xl overflow-hidden">
          <div className="divide-y divide-white/5">
            {pendingUsers.map((user) => (
              <div key={user.id} className="flex flex-col sm:flex-row sm:items-center gap-4 p-5 hover:bg-white/[0.02] transition-colors group">
                <div className="w-10 h-10 rounded-xl bg-violet-500/10 border border-violet-500/20 flex items-center justify-center shrink-0 text-violet-300 font-bold">
                  {(user.telegramUsername || user.name || user.telegramId || 'U').slice(0, 1).toUpperCase()}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex flex-wrap items-center gap-2 text-sm font-semibold text-white">
                    {toUserIdentity(user)}
                    <span className="text-[10px] font-mono uppercase tracking-wider text-gray-500 bg-white/5 px-2 py-0.5 rounded border border-white/5">
                      {user.telegramId || user.id.slice(0, 8)}
                    </span>
                  </div>
                  <div className="text-xs text-gray-500 mt-1 flex flex-wrap items-center gap-3">
                    {user.name ? <span className="text-gray-300">{user.name}</span> : null}
                    <span className="inline-flex items-center gap-1">
                      <Clock className="w-3 h-3" />
                      {formatDateTime(user.createdAt)}
                    </span>
                  </div>
                </div>
                <div className="flex items-center gap-2 shrink-0">
                  <button
                    type="button"
                    onClick={() => onApprove(user.id)}
                    disabled={processingUserId === user.id}
                    className="inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-emerald-500/30 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-200 text-sm font-semibold transition-colors disabled:opacity-60"
                  >
                    <CheckCircle2 className="w-4 h-4" />
                    {processingUserId === user.id ? 'Сохраняем...' : 'Одобрить'}
                  </button>
                  {isAdmin ? (
                    <button
                      type="button"
                      onClick={() => onDeleteUser(user)}
                      disabled={processingUserId === user.id}
                      className="p-2 rounded-xl border border-white/10 bg-white/[0.03] hover:bg-red-500/10 hover:border-red-500/20 text-gray-400 hover:text-red-300 transition-colors disabled:opacity-60"
                      title="Удалить"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  ) : null}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </motion.div>
  );
}