'use client';

import { useMemo, useState } from 'react';
import { motion } from 'framer-motion';
import { Search, Settings, Trash2 } from 'lucide-react';
import { CustomDropdown } from '@/app/admin/_components/CustomDropdown';
import {
  cn,
  getPlanBadgeClass,
  isRoleFilterOption,
  toApprovalFilter,
  toPlanFilterValue,
  toRoleLabel,
  toRoleValue,
  toUserIdentity,
} from '@/lib/admin/utils';
import {
  APPROVAL_FILTER_LABEL_BY_VALUE,
  DEFAULT_APPROVAL_FILTER,
  DEFAULT_PLAN_FILTER,
  DEFAULT_ROLE_FILTER,
  PLAN_FILTER_LABEL_BY_VALUE,
  PLAN_LABEL,
  ROLE_DROPDOWN_OPTIONS,
  ROLE_FILTER_OPTIONS,
  type AdminUser,
  type ApprovalFilter,
  type PlanFilterOption,
  type RoleFilterOption,
  type UserRole,
} from '@/lib/types/admin';
import { formatDateMoscow } from '@/lib/time';

type UsersTabProps = {
  users: AdminUser[];
  isAdmin: boolean;
  processingUserId: string | null;
  onRoleChange: (userId: string, nextRole: UserRole) => void;
  onApprovalChange: (userId: string, nextIsApproved: boolean) => void;
  onDeleteUser: (user: AdminUser) => void;
  onOpenOverride: (user: AdminUser) => void;
  onOverrideRemove: (userId: string) => void;
};

export function UsersTab({
  users,
  isAdmin,
  processingUserId,
  onRoleChange,
  onApprovalChange,
  onDeleteUser,
  onOpenOverride,
  onOverrideRemove,
}: UsersTabProps) {
  const [searchQuery, setSearchQuery] = useState('');
  const [activeRoleFilter, setActiveRoleFilter] = useState<RoleFilterOption>(DEFAULT_ROLE_FILTER);
  const [activePlanFilter, setActivePlanFilter] = useState<PlanFilterOption>(DEFAULT_PLAN_FILTER);
  const [activeApprovalFilter, setActiveApprovalFilter] = useState<ApprovalFilter>(DEFAULT_APPROVAL_FILTER);

  const filteredUsers = useMemo(() => {
    const query = searchQuery.trim().toLowerCase();
    return users.filter((user) => {
      if (activeRoleFilter === ROLE_FILTER_OPTIONS[1] && user.role !== 'USER') return false;
      if (activeRoleFilter === ROLE_FILTER_OPTIONS[2] && user.role !== 'MODERATOR') return false;
      if (activeRoleFilter === ROLE_FILTER_OPTIONS[3] && user.role !== 'ADMIN') return false;
      if (activeApprovalFilter === 'PENDING' && user.isApproved) return false;
      if (activeApprovalFilter === 'APPROVED' && !user.isApproved) return false;

      if (activePlanFilter !== DEFAULT_PLAN_FILTER && user.effectivePlan !== activePlanFilter) return false;

      if (!query) return true;
      const identity = toUserIdentity(user).toLowerCase();
      return (
        identity.includes(query)
        || (user.name || '').toLowerCase().includes(query)
        || (user.telegramId || '').toLowerCase().includes(query)
      );
    });
  }, [activeApprovalFilter, activePlanFilter, activeRoleFilter, searchQuery, users]);

  return (
    <motion.div key="users" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="space-y-6">
      <div className="bg-[#0A0A0A] border border-white/5 rounded-3xl p-6 shadow-xl flex flex-col lg:flex-row gap-6 justify-between items-start lg:items-center relative z-20">
        <div className="absolute top-0 inset-x-0 mx-auto w-1/2 h-px bg-gradient-to-r from-transparent via-violet-500/20 to-transparent" />
        <div className="flex flex-wrap lg:flex-nowrap gap-4 w-full lg:w-auto relative z-30">
          <CustomDropdown
            value={activeRoleFilter}
            onChange={(value) => setActiveRoleFilter(isRoleFilterOption(value) ? value : DEFAULT_ROLE_FILTER)}
            options={[...ROLE_FILTER_OPTIONS]}
            prefix="Роль:"
            className="w-full sm:w-auto"
          />
          <CustomDropdown
            value={PLAN_FILTER_LABEL_BY_VALUE[activePlanFilter]}
            onChange={(value) => setActivePlanFilter(toPlanFilterValue(value))}
            options={Object.values(PLAN_FILTER_LABEL_BY_VALUE)}
            prefix="Тариф:"
            className="w-full sm:w-auto"
          />
          <CustomDropdown
            value={APPROVAL_FILTER_LABEL_BY_VALUE[activeApprovalFilter]}
            onChange={(value) => setActiveApprovalFilter(toApprovalFilter(value))}
            options={Object.values(APPROVAL_FILTER_LABEL_BY_VALUE)}
            prefix="Одобрение:"
            className="w-full sm:w-auto"
          />
        </div>

        <div className="relative w-full lg:w-80 relative z-10">
          <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
          <input type="text" placeholder="Поиск (ID, @username)" className="w-full bg-black/40 border border-white/10 hover:border-white/20 rounded-2xl pl-11 pr-4 py-3 text-sm outline-none focus:border-violet-500/50 focus:bg-white/[0.02] placeholder-gray-600 transition-all text-white" value={searchQuery} onChange={(event) => setSearchQuery(event.target.value)} />
        </div>
      </div>

      <div className="bg-[#0A0A0A] border border-white/5 rounded-3xl shadow-xl relative group hover:border-white/10 transition-colors">
        {filteredUsers.length === 0 ? (
          <div className="px-6 py-10 text-center text-sm text-gray-500">
            Пользователи не найдены по текущим фильтрам.
          </div>
        ) : (
          <>
            {/* Desktop table */}
            <div className="hidden lg:block overflow-x-auto w-full p-1 -m-1">
              <table className="w-full text-left bg-black/20 rounded-2xl overflow-hidden">
                <thead>
                  <tr className="border-b border-white/5 text-xs font-semibold text-gray-400 uppercase tracking-wider bg-white/[0.02]">
                    <th className="px-6 py-5 rounded-tl-2xl">Telegram</th>
                    <th className="px-6 py-5">Имя / Роль</th>
                    <th className="px-6 py-5">Тариф и биллинг</th>
                    <th className="px-6 py-5">Активность</th>
                    <th className="px-6 py-5 text-right rounded-tr-2xl">Действия</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-white/5">
                  {filteredUsers.map((user) => (
                    <tr key={user.id} className="hover:bg-white/[0.02] transition-colors group">
                      <td className="px-6 py-6 font-medium text-sm text-gray-200">
                        {toUserIdentity(user)}
                        <div className="text-[10px] text-gray-500 mt-1 font-mono">ID: {user.telegramId || user.id.slice(0, 8)}</div>
                      </td>
                      <td className="px-6 py-6">
                        <div className="font-medium text-sm text-white mb-2">{user.name || '—'}</div>
                        {isAdmin ? (
                          <CustomDropdown
                            value={toRoleLabel(user.role)}
                            onChange={(value) => {
                              const nextRole = toRoleValue(value);
                              if (nextRole && nextRole !== user.role) {
                                onRoleChange(user.id, nextRole);
                              }
                            }}
                            options={[...ROLE_DROPDOWN_OPTIONS]}
                            className="w-max [&>button]:py-1.5 [&>button]:text-xs [&>button]:px-3"
                          />
                        ) : (
                          <span className="inline-flex px-2 py-1 rounded-lg text-xs bg-white/5 border border-white/10 text-gray-300">
                            {toRoleLabel(user.role)}
                          </span>
                        )}
                        <div className="mt-2 flex flex-wrap items-center gap-2">
                          <span
                            className={cn(
                              'inline-flex px-2 py-1 rounded-lg text-[10px] border font-semibold uppercase tracking-wider',
                              user.isApproved
                                ? 'bg-emerald-500/10 text-emerald-300 border-emerald-500/20'
                                : 'bg-amber-500/10 text-amber-300 border-amber-500/20',
                            )}
                          >
                            {user.isApproved ? 'Одобрен' : 'Ожидает'}
                          </span>
                          <button
                            type="button"
                            onClick={() => onApprovalChange(user.id, !user.isApproved)}
                            disabled={processingUserId === user.id}
                            className={cn(
                              'px-2.5 py-1 rounded-lg text-[10px] border font-semibold uppercase tracking-wider transition-colors disabled:opacity-60',
                              user.isApproved
                                ? 'bg-red-500/10 hover:bg-red-500/20 text-red-300 border-red-500/20'
                                : 'bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-300 border-emerald-500/20',
                            )}
                          >
                            {user.isApproved ? 'Снять' : 'Одобрить'}
                          </button>
                        </div>
                      </td>
                      <td className="px-6 py-6">
                        <div className="flex flex-col gap-3 w-max">
                          <div className="flex items-center gap-2">
                            <span className={cn('text-[10px] font-bold tracking-wider uppercase border px-2.5 py-1 rounded-lg', getPlanBadgeClass(user.effectivePlan))}>
                              {PLAN_LABEL[user.effectivePlan]}
                            </span>
                            {user.hasAdminOverride ? (
                              <span className="text-[10px] font-bold tracking-wider uppercase text-yellow-400/80 border border-yellow-500/30 bg-yellow-500/10 px-2.5 py-1 rounded-lg flex items-center gap-1.5">
                                <Settings className="w-3 h-3" /> Ручное назначение
                              </span>
                            ) : null}
                          </div>

                          <div className="text-xs text-gray-500">
                            {user.planExpiresAt ? `Активен до ${formatDateMoscow(user.planExpiresAt)}` : 'Срок не ограничен'}
                          </div>

                          {isAdmin ? (
                            <div className="flex items-center gap-2 mt-1">
                              <button
                                type="button"
                                onClick={() => onOpenOverride(user)}
                                disabled={processingUserId === user.id}
                                className="bg-violet-500/10 hover:bg-violet-500/20 border border-violet-500/20 text-violet-300 rounded-xl px-3 py-1.5 text-xs font-medium transition-colors disabled:opacity-60"
                              >
                                Сменить тариф
                              </button>
                              {user.hasAdminOverride ? (
                                <button
                                  type="button"
                                  onClick={() => onOverrideRemove(user.id)}
                                  disabled={processingUserId === user.id}
                                  className="bg-red-500/10 hover:bg-red-500/20 border border-red-500/20 text-red-400 rounded-xl px-3 py-1.5 text-xs font-medium transition-colors disabled:opacity-60"
                                >
                                  Снять назначение
                                </button>
                              ) : null}
                            </div>
                          ) : null}
                        </div>
                      </td>
                      <td className="px-6 py-6">
                        <div className="space-y-1.5 text-xs font-medium text-gray-300">
                          <div className="flex items-center gap-2"><span className="text-gray-500 w-16">Ссылок:</span><span className="bg-white/5 px-2 py-0.5 rounded border border-white/5">{user.linksCount}</span></div>
                          <div className="flex items-center gap-2"><span className="text-gray-500 w-16">С нами с:</span><span className="text-gray-400">{formatDateMoscow(user.createdAt)}</span></div>
                        </div>
                      </td>
                      <td className="px-6 py-6">
                        <div className="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                          {isAdmin ? (
                            <button
                              type="button"
                              onClick={() => onDeleteUser(user)}
                              disabled={processingUserId === user.id}
                              className="p-2.5 bg-white/5 hover:bg-red-500/10 text-gray-400 hover:text-red-400 rounded-xl border border-white/5 hover:border-red-500/20 transition-colors disabled:opacity-60"
                              title="Удалить"
                            >
                              <Trash2 className="w-4 h-4" />
                            </button>
                          ) : null}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Mobile card list */}
            <div className="lg:hidden divide-y divide-white/5">
              {filteredUsers.map((user) => (
                <div key={user.id} className="p-4 space-y-3">
                  <div className="flex items-start justify-between gap-3">
                    <div className="min-w-0">
                      <div className="font-semibold text-sm text-white truncate">{toUserIdentity(user)}</div>
                      <div className="text-[10px] text-gray-500 font-mono mt-0.5">ID: {user.telegramId || user.id.slice(0, 8)}</div>
                      {user.name ? <div className="text-xs text-gray-400 mt-1">{user.name}</div> : null}
                    </div>
                    <div className="flex items-center gap-1.5 shrink-0">
                      <span className={cn('text-[10px] font-bold tracking-wider uppercase border px-2 py-0.5 rounded-lg', getPlanBadgeClass(user.effectivePlan))}>
                        {PLAN_LABEL[user.effectivePlan]}
                      </span>
                      {isAdmin ? (
                        <button
                          type="button"
                          onClick={() => onDeleteUser(user)}
                          disabled={processingUserId === user.id}
                          className="p-1.5 bg-white/5 hover:bg-red-500/10 text-gray-400 hover:text-red-400 rounded-lg border border-white/5 hover:border-red-500/20 transition-colors disabled:opacity-60"
                          title="Удалить"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      ) : null}
                    </div>
                  </div>

                  <div className="flex flex-wrap items-center gap-2">
                    {isAdmin ? (
                      <CustomDropdown
                        value={toRoleLabel(user.role)}
                        onChange={(value) => {
                          const nextRole = toRoleValue(value);
                          if (nextRole && nextRole !== user.role) {
                            onRoleChange(user.id, nextRole);
                          }
                        }}
                        options={[...ROLE_DROPDOWN_OPTIONS]}
                        className="w-max [&>button]:py-1.5 [&>button]:text-xs [&>button]:px-3"
                      />
                    ) : (
                      <span className="inline-flex px-2 py-1 rounded-lg text-xs bg-white/5 border border-white/10 text-gray-300">
                        {toRoleLabel(user.role)}
                      </span>
                    )}
                    <span
                      className={cn(
                        'inline-flex px-2 py-1 rounded-lg text-[10px] border font-semibold uppercase tracking-wider',
                        user.isApproved
                          ? 'bg-emerald-500/10 text-emerald-300 border-emerald-500/20'
                          : 'bg-amber-500/10 text-amber-300 border-amber-500/20',
                      )}
                    >
                      {user.isApproved ? 'Одобрен' : 'Ожидает'}
                    </span>
                    <button
                      type="button"
                      onClick={() => onApprovalChange(user.id, !user.isApproved)}
                      disabled={processingUserId === user.id}
                      className={cn(
                        'px-2 py-1 rounded-lg text-[10px] border font-semibold uppercase tracking-wider transition-colors disabled:opacity-60',
                        user.isApproved
                          ? 'bg-red-500/10 hover:bg-red-500/20 text-red-300 border-red-500/20'
                          : 'bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-300 border-emerald-500/20',
                      )}
                    >
                      {user.isApproved ? 'Снять' : 'Одобрить'}
                    </button>
                    {user.hasAdminOverride ? (
                      <span className="text-[10px] font-bold tracking-wider uppercase text-yellow-400/80 border border-yellow-500/30 bg-yellow-500/10 px-2 py-0.5 rounded-lg flex items-center gap-1">
                        <Settings className="w-3 h-3" /> Ручное
                      </span>
                    ) : null}
                  </div>

                  <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500">
                    <span>Ссылок: <span className="text-gray-300">{user.linksCount}</span></span>
                    <span>С {formatDateMoscow(user.createdAt)}</span>
                    {user.planExpiresAt ? <span>До {formatDateMoscow(user.planExpiresAt)}</span> : null}
                  </div>

                  {isAdmin ? (
                    <div className="flex flex-wrap items-center gap-2">
                      <button
                        type="button"
                        onClick={() => onOpenOverride(user)}
                        disabled={processingUserId === user.id}
                        className="bg-violet-500/10 hover:bg-violet-500/20 border border-violet-500/20 text-violet-300 rounded-xl px-3 py-1.5 text-xs font-medium transition-colors disabled:opacity-60"
                      >
                        Сменить тариф
                      </button>
                      {user.hasAdminOverride ? (
                        <button
                          type="button"
                          onClick={() => onOverrideRemove(user.id)}
                          disabled={processingUserId === user.id}
                          className="bg-red-500/10 hover:bg-red-500/20 border border-red-500/20 text-red-400 rounded-xl px-3 py-1.5 text-xs font-medium transition-colors disabled:opacity-60"
                        >
                          Снять назначение
                        </button>
                      ) : null}
                    </div>
                  ) : null}
                </div>
              ))}
            </div>
          </>
        )}
      </div>
    </motion.div>
  );
}