import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { FiSettings, FiUsers, FiGlobe, FiLock } from "react-icons/fi";
import type { Hub } from "@/api/generated/private/models/hub";
import Avatar from "@/components/ui/Avatar";
import Button from "@/components/ui/Button";
import { mediaUrl } from "@/utils/mediaUrl";

interface Props {
  hub: Hub;
  isMember: boolean;
  isOwner: boolean;
  isModerator: boolean;
  joining?: boolean;
  onJoin: () => void;
  onLeave: () => void;
}

export default function HubHeader({ hub, isMember, isOwner, isModerator, joining, onJoin, onLeave }: Props) {
  const { t } = useTranslation("social");
  const canManage = isOwner || isModerator;

  return (
    <div className="w-full">
      {/* Banner */}
      <div className="relative h-32 w-full overflow-hidden bg-gradient-to-br from-brand-accent/30 to-brand-bgLight">
        {hub.banner && (
          <img
            src={mediaUrl(hub.banner) ?? undefined}
            alt=""
            className="h-full w-full object-cover"
          />
        )}
      </div>

      {/* Avatar + info row */}
      <div className="relative px-4 pb-3">
        {/* Avatar overlapping banner */}
        <div className="absolute -top-8 left-4 rounded-full border-4 border-brand-bg bg-brand-bg">
          <Avatar name={hub.name} src={hub.icon ?? undefined} size={64} />
        </div>

        {/* Action buttons — top-right */}
        <div className="flex justify-end gap-2 pt-2 pb-1">
          {canManage && (
            <Link to={`/social/h/${hub.name}/settings`}>
              <Button variant="ghost" size="sm" leftIcon={<FiSettings size={14} />}>
                {t("hub.settings")}
              </Button>
            </Link>
          )}
          {isOwner ? null : isMember ? (
            <Button variant="secondary" size="sm" onClick={onLeave} loading={joining}>
              {t("hub.leave")}
            </Button>
          ) : (
            <Button variant="primary" size="sm" onClick={onJoin} loading={joining}>
              {t("hub.join")}
            </Button>
          )}
        </div>

        {/* Name + meta — with left margin to clear the avatar */}
        <div className="mt-1 pl-[88px] sm:pl-0 sm:mt-1">
          <h1 className="text-xl font-bold text-brand-text leading-tight">
            <span className="text-brand-accent/60 font-normal">h/</span>{hub.name}
          </h1>
          <div className="mt-1 flex flex-wrap items-center gap-3 text-xs text-brand-text/60">
            <span className="flex items-center gap-1">
              <FiUsers size={12} />
              {t("hub.members", { count: hub.members?.length ?? 0 })}
            </span>
            <span className="flex items-center gap-1">
              {hub.is_public ? <FiGlobe size={12} /> : <FiLock size={12} />}
              {hub.is_public ? t("hub.public") : t("hub.private")}
            </span>
          </div>
          {hub.description && (
            <p className="mt-2 text-sm text-brand-text/70 leading-relaxed">{hub.description}</p>
          )}
        </div>
      </div>
    </div>
  );
}
