import { getAllUsers } from "@/pages/users/lib/api";
import formatPhone from "@/shared/lib/formatPhone";
import { Avatar, AvatarFallback, AvatarImage } from "@/shared/ui/avatar";
import { Button } from "@/shared/ui/button";
import { useQuery } from "@tanstack/react-query";
import {
  AlertTriangle,
  Calendar,
  ChevronLeft,
  ChevronRight,
  Eye,
  Loader2,
  Mail,
  Pencil,
  Phone,
  Search,
  Trash2,
  Users,
} from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";

export default function UserList() {
  const [searchQuery, setSearchQuery] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const usersPerPage = 6;
  const { t } = useTranslation();
  const navigate = useNavigate();

  const { data, isLoading, isError, refetch } = useQuery({
    queryKey: ["user_all", currentPage, searchQuery],
    queryFn: () =>
      getAllUsers({
        page: currentPage,
        page_size: usersPerPage,
        search: searchQuery,
      }),
  });

  const getAvatarGradient = (id: number) => {
    const gradients = ["from-blue-600 to-cyan-500"];
    return gradients[id % gradients.length];
  };

  if (isError) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen bg-slate-900 w-full text-center text-white gap-4">
        <AlertTriangle className="w-10 h-10 text-red-500" />
        <p className="text-lg">
          {t("Ma'lumotlarni yuklashda xatolik yuz berdi.")}
        </p>
        <Button
          onClick={() => refetch()}
          className="bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-lg px-5 py-2 hover:opacity-90"
        >
          {t("Qayta urinish")}
        </Button>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 py-12 px-4 w-full">
      <div className="max-w-[90%] mx-auto">
        <div className="flex justify-between items-center">
          <div className="mb-12">
            <div className="flex items-center gap-3 mb-3">
              <div className="p-3 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl shadow-lg shadow-cyan-500/20">
                <Users className="w-8 h-8 text-white" />
              </div>
              <h1 className="text-5xl font-bold bg-gradient-to-r from-blue-400 via-cyan-300 to-blue-400 bg-clip-text text-transparent">
                {t("Foydalanuvchilar")}
              </h1>
            </div>
            <p className="text-slate-400 text-lg ml-14">
              {t("Jami")} {data?.data.data.total_items}{" "}
              {t("ta foydalanuvchini boshqaring")}
            </p>
          </div>
          {/* <Button
            onClick={() => navigate("/users/create")}
            className="py-5 px-4 bg-gradient-to-br text-white cursor-pointer from-blue-500 to-cyan-500 rounded-xl shadow-lg shadow-cyan-500/20"
          >
            <Plus />
            <p>{t("Foydalanuvchi Qo'shish")}</p>
          </Button> */}
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12">
          <StatCard
            title={t("Jami foydalanuvchilar")}
            value={data ? data.data.data.total_items : "0"}
            icon={<Users className="w-6 h-6" />}
            gradient="from-blue-600 to-blue-400"
          />
          <StatCard
            title={t("Email bilan ro'yxatlangan")}
            value={data ? data.data.data.results.user_register_email : "0"}
            icon={<Mail className="w-6 h-6" />}
            gradient="from-cyan-600 to-cyan-400"
          />
          <StatCard
            title={t("Telefon bilan ro'yxatlangan")}
            value={data ? data.data.data.results.user_register_phone : "0"}
            icon={<Phone className="w-6 h-6" />}
            gradient="from-purple-600 to-pink-400"
          />
        </div>

        <div className="mb-10 relative">
          <div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 to-cyan-600/10 rounded-2xl blur-xl" />
          <div className="relative bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6 backdrop-blur-sm">
            <Search className="absolute left-8 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
            <input
              type="text"
              placeholder={t(
                "Username, email yoki telefon raqami bo'yicha qidirish",
              )}
              value={searchQuery}
              onChange={(e) => {
                setSearchQuery(e.target.value);
                setCurrentPage(1);
              }}
              className="w-full pl-14 pr-4 py-3 bg-slate-700/30 border border-slate-600/50 text-white placeholder-slate-400 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
            />
          </div>
        </div>
      </div>
      {isLoading ? (
        <div className="flex flex-col items-center justify-center min-h-screen bg-slate-900 text-white gap-4 w-full">
          <Loader2 className="w-10 h-10 animate-spin text-cyan-400" />
          <p className="text-slate-400">{t("Ma'lumotlar yuklanmoqda...")}</p>
        </div>
      ) : (
        <>
          <div className="max-w-[90%] mx-auto">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6 mb-10">
              {data &&
                data.data.data.results.users.map((e) => (
                  <div className="group relative hover:scale-105 transition-transform duration-300">
                    <div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-cyan-600/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all opacity-0 group-hover:opacity-100" />
                    <div className="relative h-full flex flex-col justify-between bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-700/50 rounded-2xl p-6 shadow-2xl hover:border-slate-600/70 transition-all backdrop-blur-sm">
                      <div>
                        <div className="flex flex-col items-center gap-4 mb-4">
                          <Avatar
                            className={`w-16 h-16 rounded-xl bg-gradient-to-br ${getAvatarGradient(
                              e.id,
                            )} flex items-center justify-center text-white text-xl font-bold shadow-lg`}
                          >
                            <AvatarImage src={e.avatar} />
                            <AvatarFallback
                              className={`w-16 h-16 rounded-xl bg-gradient-to-br ${getAvatarGradient(
                                e.id,
                              )} flex items-center justify-center text-white text-xl font-bold shadow-lg`}
                            >
                              {e.first_name.slice(0, 1).toUpperCase()}
                              {e.last_name.slice(0, 1).toUpperCase()}
                            </AvatarFallback>
                          </Avatar>
                          <div className="flex-1 text-center">
                            <h3 className="text-xl font-bold text-white truncate">
                              {e.first_name} {e.last_name}
                            </h3>
                          </div>
                        </div>
                        <div className="space-y-3 pt-4 border-t border-slate-700/50">
                          {e.email && (
                            <div className="flex items-center gap-3">
                              <Mail className="w-5 h-5 text-cyan-400" />
                              <span className="text-slate-300 text-sm truncate">
                                {e.email}
                              </span>
                            </div>
                          )}
                          {e.phone && (
                            <div className="flex items-center gap-3">
                              <Phone className="w-5 h-5 text-cyan-400" />
                              <span className="text-slate-300 text-sm">
                                {formatPhone(e.phone)}
                              </span>
                            </div>
                          )}
                          <div className="flex items-center gap-3">
                            <Calendar className="w-5 h-5 text-cyan-400" />
                            <span className="text-slate-300 text-sm">
                              {e.validated_at}
                            </span>
                          </div>
                        </div>
                      </div>

                      <div className="grid gap-2 pt-4 mt-4 border-t border-slate-700/50">
                        <button
                          onClick={() => navigate(`/users/${e.id}/`)}
                          className="flex-1 flex cursor-pointer items-center justify-center gap-2 px-4 py-2.5 bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 font-medium rounded-lg transition-all border border-blue-500/30 hover:border-blue-500/50"
                        >
                          <Eye className="w-4 h-4" />
                          {t("Ko'rish")}
                        </button>
                        <button
                          onClick={() => navigate(`/users/${e.id}/edit`)}
                          className="flex-1 flex items-center cursor-pointer justify-center gap-2 px-4 py-2.5 bg-green-500/20 hover:bg-green-500/30 text-green-300 font-medium rounded-lg transition-all border border-green-500/30 hover:border-green-500/50"
                        >
                          <Pencil className="w-4 h-4" />
                          {t("Tahrirlash")}
                        </button>
                        <button className="flex-1 flex items-center cursor-pointer justify-center gap-2 px-4 py-2.5 bg-red-500/20 hover:bg-red-500/30 text-red-300 font-medium rounded-lg transition-all border border-red-500/30 hover:border-red-500/50">
                          <Trash2 className="w-4 h-4" />
                          {t("O'chirish")}
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
            </div>

            <div className="flex justify-end gap-2">
              <button
                disabled={currentPage === 1}
                onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
                className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
              >
                <ChevronLeft className="w-5 h-5" />
              </button>

              {[...Array(data?.data.data.total_pages)].map((_, i) => (
                <button
                  key={i}
                  onClick={() => setCurrentPage(i + 1)}
                  className={`px-4 py-2 rounded-lg border transition-all font-medium ${
                    currentPage === i + 1
                      ? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
                      : "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
                  }`}
                >
                  {i + 1}
                </button>
              ))}

              <button
                disabled={
                  data
                    ? currentPage === data.data.data.total_pages
                    : currentPage === 1
                }
                onClick={() =>
                  setCurrentPage((p) =>
                    Math.min(p + 1, data ? data.data.data.total_pages : 1),
                  )
                }
                className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
              >
                <ChevronRight className="w-5 h-5" />
              </button>
            </div>
          </div>

          {/* {confirmDelete && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50">
        <div className="bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-700/50 rounded-2xl shadow-2xl max-w-md w-full p-6 space-y-6">
        <div className="flex items-start justify-between">
        <div className="flex items-center gap-3">
        <div className="p-3 bg-red-500/20 rounded-xl border border-red-500/30">
        <Trash2 className="w-6 h-6 text-red-400" />
                </div>
                <h2 className="text-xl font-bold text-white">
                {t("Foydalanuvchini o'chirish")}
                </h2>
              </div>
              <button
              onClick={() => setConfirmDelete(null)}
              className="p-2 hover:bg-slate-700/50 rounded-lg transition-colors"
              >
              <X className="w-5 h-5 text-slate-400" />
              </button>
              </div>
              
              <div className="py-4">
              <p className="text-slate-300">
              {t("Siz")}{" "}
              <span className="font-semibold text-white">
              {confirmDelete.username}
              </span>{" "}
              {t("foydalanuvchini o'chirmoqchimisiz?")}
              </p>
              <div className="mt-3 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
                <p className="text-sm text-red-300 font-medium flex items-center gap-2">
                <AlertTriangle className="w-4 h-4" />
                <span>{t("Ushbu amalni qaytarib bo'lmaydi")}</span>
                </p>
                </div>
                </div>
                
                <div className="flex gap-3 pt-2">
              <button
                onClick={() => setConfirmDelete(null)}
                className="flex-1 px-4 py-3 border border-slate-600 hover:bg-slate-700/50 text-slate-300 font-medium rounded-lg transition-all"
              >
              {t("Bekor qilish")}
              </button>
              <button
              onClick={() => handleDelete(confirmDelete.id)}
              className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-red-600 to-red-700 hover:from-red-500 hover:to-red-600 text-white font-medium rounded-lg transition-all shadow-lg"
              >
              <Trash2 className="w-4 h-4" />
              <span>{t("O'chirish")}</span>
              </button>
              </div>
              </div>
              </div>
              )} */}
        </>
      )}
    </div>
  );
}

function StatCard({
  title,
  value,
  icon,
  gradient,
}: {
  title: string;
  value: string;
  icon: React.ReactNode;
  gradient: string;
}) {
  return (
    <div className="group relative hover:scale-105 transition-transform duration-300">
      <div
        className={`absolute inset-0 bg-gradient-to-r ${gradient} rounded-xl blur-lg opacity-20 group-hover:opacity-40 transition-all`}
      />
      <div
        className={`relative bg-gradient-to-br ${gradient} bg-opacity-10 border border-white/10 backdrop-blur-sm rounded-xl p-6 shadow-xl hover:shadow-2xl transition-all hover:border-white/20`}
      >
        <div className="flex justify-between items-start mb-3">
          <p className="text-slate-300 text-sm font-medium">{title}</p>
          <div
            className={`bg-gradient-to-br ${gradient} p-2 rounded-lg text-white shadow-lg`}
          >
            {icon}
          </div>
        </div>
        <p className="text-3xl font-bold text-white">{value}</p>
      </div>
    </div>
  );
}