import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { FiUsers } from "react-icons/fi";
import { useApiSocialHubsList } from "@/api/generated/private/hubs/hubs";
import Avatar from "@/components/ui/Avatar";
import Spinner from "@/components/ui/Spinner";
import EmptyState from "@/components/ui/EmptyState";

export default function HubsPage() {
  const { t } = useTranslation("social");
  const { data, isLoading } = useApiSocialHubsList(undefined);
  const hubs = data?.results ?? [];

  return (
    <div>
      <header className="sticky top-0 z-10 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("nav.hubs")}</h1>
      </header>

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

      {!isLoading && hubs.length === 0 && (
        <EmptyState icon={<FiUsers />} message="—" />
      )}

      <ul>
        {hubs.map((hub) => (
          <li key={hub.id}>
            <Link
              to={`/social/hub/${hub.id}`}
              className="flex items-center gap-3 border-b border-brand-lines/10 px-4 py-3 hover:bg-brand-lines/5 transition-colors"
            >
              <Avatar name={hub.name} src={hub.icon ?? undefined} size={40} />
              <div className="min-w-0 flex-1">
                <div className="truncate text-sm font-semibold text-brand-text">
                  {hub.name}
                </div>
                {hub.description && (
                  <div className="truncate text-xs text-brand-text/60">
                    {hub.description}
                  </div>
                )}
              </div>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}
