import { useTranslation } from "react-i18next";
import { FiLogOut, FiUser } from "react-icons/fi";
import { Link } from "react-router-dom";
import { useAuth } from "@/hooks/useAuth";
import Avatar from "@/components/ui/Avatar";
import Card from "@/components/ui/Card";
import EmptyState from "@/components/ui/EmptyState";

export default function ProfilePage() {
  const { t } = useTranslation("social");
  const { user } = useAuth();

  if (!user) return <EmptyState icon={<FiUser />} title="—" />;

  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.profile")}</h1>
      </header>

      <div className="p-4">
        <Card className="flex items-center gap-4">
          <Avatar name={user.username || user.email} size={64} />
          <div className="min-w-0 flex-1">
            <div className="truncate text-lg font-semibold text-brand-text">
              @{user.username}
            </div>
            {user.email && (
              <div className="truncate text-sm text-brand-text/60">{user.email}</div>
            )}
            {(user.first_name || user.last_name) && (
              <div className="text-sm text-brand-text/70">
                {[user.first_name, user.last_name].filter(Boolean).join(" ")}
              </div>
            )}
          </div>
        </Card>

        <div className="mt-4 flex justify-end">
          <Link
            to="/social/logout"
            className="inline-flex items-center gap-2 rounded-xl border border-brand-lines/20 px-3 py-2 text-sm text-brand-text/80 hover:bg-brand-lines/10 hover:text-brand-accent"
          >
            <FiLogOut size={16} /> {t("nav.logout")}
          </Link>
        </div>
      </div>
    </div>
  );
}