import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { FiSearch, FiPlus, FiUsers } from "react-icons/fi";
import { useApiSocialHubsList } from "@/api/generated/private/hubs/hubs";
import { useAuth } from "@/hooks/useAuth";
import HubCard from "@/components/social/hub/HubCard";
import Spinner from "@/components/ui/Spinner";
import EmptyState from "@/components/ui/EmptyState";
import Button from "@/components/ui/Button";

export default function HubsPage() {
  const { t } = useTranslation("social");
  const navigate = useNavigate();
  const { user } = useAuth();
  const [search, setSearch] = useState("");

  const { data, isLoading } = useApiSocialHubsList(undefined);
  const hubs = data?.results ?? [];

  const joined = hubs.filter((h) => h.members?.includes(user?.id as number));
  const discover = hubs.filter((h) => !h.members?.includes(user?.id as number));

  const q = search.trim().toLowerCase();
  const filteredDiscover = q
    ? discover.filter(
        (h) =>
          h.name.toLowerCase().includes(q) ||
          (h.description ?? "").toLowerCase().includes(q),
      )
    : discover;

  return (
    <div>
      <header className="sticky top-0 z-10 flex items-center justify-between gap-3 border-b border-brand-lines/10 bg-brand-bg/80 px-4 py-3 backdrop-blur">
        <h1 className="text-lg font-bold text-brand-text">{t("hubs.title")}</h1>
        <Button
          size="sm"
          variant="primary"
          leftIcon={<FiPlus size={14} />}
          onClick={() => navigate("/social/h/create")}
        >
          {t("hubs.create")}
        </Button>
      </header>

      {/* Search */}
      <div className="px-4 py-3 border-b border-brand-lines/10">
        <div className="flex items-center gap-2 rounded-xl border border-brand-lines/20 bg-brand-bgLight/40 px-3 py-2">
          <FiSearch size={15} className="shrink-0 text-brand-text/40" />
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder={t("hubs.searchPlaceholder")}
            className="min-w-0 flex-1 bg-transparent text-sm text-brand-text placeholder:text-brand-text/40 outline-none"
          />
        </div>
      </div>

      {isLoading && (
        <div className="flex justify-center py-10">
          <Spinner size={28} />
        </div>
      )}

      {!isLoading && (
        <>
          {/* Joined */}
          {joined.length > 0 && (
            <section className="px-4 py-4">
              <h2 className="mb-3 text-xs font-semibold uppercase tracking-wider text-brand-text/50">
                {t("hubs.myHubs")}
              </h2>
              <div className="flex flex-col gap-2">
                {joined.map((hub) => (
                  <HubCard key={hub.id} hub={hub} isMember />
                ))}
              </div>
            </section>
          )}

          {/* Divider */}
          {joined.length > 0 && <div className="mx-4 border-t border-brand-lines/10" />}

          {/* Discover */}
          <section className="px-4 py-4">
            <h2 className="mb-3 text-xs font-semibold uppercase tracking-wider text-brand-text/50">
              {t("hubs.discover")}
            </h2>
            {filteredDiscover.length === 0 ? (
              <EmptyState
                icon={<FiUsers />}
                message={search ? t("hubs.noHubsMatch") : t("hubs.noMoreHubs")}
              />
            ) : (
              <div className="flex flex-col gap-2">
                {filteredDiscover.map((hub) => (
                  <HubCard key={hub.id} hub={hub} isMember={false} />
                ))}
              </div>
            )}
          </section>
        </>
      )}
    </div>
  );
}
