"use client";

import { useEffect, useState } from "react";
import Container from "@/components/elements/Container";
import PageTitle from "@/components/settings/PageTitle";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import useAxios from "@/hooks/useAxios";
import { buildStorageUrl } from "@/components/main/BaseUrl";
import Image from "next/image";
import Link from "next/link";
import { useTranslation } from "react-i18next";

type BlockedUser = {
  _id: string;
  user_name: string;
  first_name?: string;
  last_name?: string;
  profile_image?: string;
};

function BlockedUsersPage() {
  const { t } = useTranslation("common");
  const { request } = useAxios();
  const [users, setUsers] = useState<BlockedUser[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    request<{ users: BlockedUser[] }>("GET", "/users/blocked/list", null, {
      noToast: true,
    })
      .then((res) => setUsers(res?.users || []))
      .catch(() => setUsers([]))
      .finally(() => setLoading(false));
  }, [request]);

  return (
    <LocalePageShell>
      <Container>
        <PageTitle>{t("settings.edit.nav.blockedUsers")}</PageTitle>
        <div className="my-6">
          {loading ? (
            <div className="space-y-2">
              {Array.from({ length: 5 }).map((_, i) => (
                <div
                  key={i}
                  className="flex animate-pulse items-center gap-3 rounded-xl px-2 py-2"
                >
                  <div className="h-11 w-11 shrink-0 rounded-full bg-neutral-200 dark:bg-neutral-800" />
                  <div className="flex-1 space-y-2">
                    <div className="h-3 w-1/3 rounded bg-neutral-200 dark:bg-neutral-800" />
                    <div className="h-3 w-1/4 rounded bg-neutral-200 dark:bg-neutral-800" />
                  </div>
                </div>
              ))}
            </div>
          ) : users.length === 0 ? (
            <p className="py-10 text-center text-sm text-neutral-500">
              {t("models.nothingFound")}
            </p>
          ) : (
            <ul className="space-y-1">
              {users.map((u) => {
                const name =
                  [u.first_name, u.last_name].filter(Boolean).join(" ") ||
                  u.user_name;
                return (
                  <li key={u._id}>
                    <Link
                      href={`/users/${u.user_name}`}
                      className="flex items-center gap-3 rounded-xl px-2 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-800"
                    >
                      <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-full bg-neutral-200">
                        <Image
                          src={
                            u.profile_image
                              ? buildStorageUrl(u.profile_image)
                              : "/images/fake-avatar.png"
                          }
                          alt=""
                          fill
                          className="object-cover"
                          unoptimized
                        />
                      </div>
                      <div className="min-w-0">
                        <p className="truncate text-sm font-bold">{name}</p>
                        <p className="truncate text-xs text-neutral-500">
                          @{u.user_name}
                        </p>
                      </div>
                    </Link>
                  </li>
                );
              })}
            </ul>
          )}
        </div>
      </Container>
    </LocalePageShell>
  );
}

export default BlockedUsersPage;
