"use client";

import { useEffect, useState } from "react";
import { authFetch, clearToken, getApiBase, getToken, logout } from "../lib/auth";
import { setUserViewPreview, useUserViewPreview } from "../lib/viewMode";

export default function HeaderIdentity() {
  const [identity, setIdentity] = useState<{ username: string; role?: string } | null>(null);
  const [buildNumber, setBuildNumber] = useState<string | null>(null);
  const [open, setOpen] = useState(false);
  const viewAsUser = useUserViewPreview();

  useEffect(() => {
    const token = getToken();
    if (!token) {
      setIdentity(null);
      setBuildNumber(null);
      return;
    }
    const load = async () => {
      try {
        const baseUrl = getApiBase();
        const response = await authFetch(`${baseUrl}/auth/me`);
        if (!response.ok) {
          clearToken();
          setIdentity(null);
          return;
        }
        const data = await response.json();
        if (data?.username) {
          setIdentity({ username: data.username, role: data.role });
          if (data.role !== "admin") {
            setUserViewPreview(false);
          }
        }
        const siteResponse = await fetch(`${baseUrl}/site/public`);
        if (siteResponse.ok) {
          const siteInfo = await siteResponse.json();
          if (siteInfo?.buildNumber) {
            setBuildNumber(siteInfo.buildNumber);
          }
        }
      } catch (err) {
        console.error(err);
        setIdentity(null);
      }
    };
    void load();
  }, []);

  if (!identity) {
    return null;
  }

  const label = `${identity.username}${identity.role ? ` (${identity.role})` : ""}`;
  const initial = identity.username.slice(0, 1).toUpperCase();
  const signOut = async () => {
    setUserViewPreview(false);
    await logout().catch(() => undefined);
    clearToken();
    if (typeof window !== "undefined") {
      window.location.href = "/login";
    }
  };

  return (
    <div className="signed-in-context">
      {identity.role === "admin" ? (
        <button
          type="button"
          className={`user-view-toggle ${viewAsUser ? "is-active" : ""}`}
          aria-pressed={viewAsUser}
          onClick={() => setUserViewPreview(!viewAsUser)}
        >
          {viewAsUser ? "Exit user view" : "View as user"}
        </button>
      ) : null}
      <div className="signed-in-menu">
        <button
          type="button"
          className="avatar-button"
          onClick={() => setOpen((prev) => !prev)}
          aria-haspopup="true"
          aria-expanded={open}
          title={label}
        >
          {initial}
        </button>
        {open && (
          <div className="signed-in-dropdown">
            <div className="signed-in-header">
              Signed in as {label}
              {viewAsUser ? <span>Previewing user view</span> : null}
            </div>
            <div className="signed-in-actions">
              <a href="/welcome" onClick={() => setOpen(false)}>
                Welcome page
              </a>
              <a href="/how-it-works" onClick={() => setOpen(false)}>
                How it works
              </a>
              <a href="/profile" onClick={() => setOpen(false)}>
                My profile
              </a>
              {identity.role === "admin" ? (
                <a href="/admin" onClick={() => setOpen(false)}>
                  Settings
                </a>
              ) : null}
              <button type="button" className="signed-in-signout" onClick={() => void signOut()}>
                Sign out
              </button>
            </div>
            {buildNumber ? <div className="signed-in-build">Build {buildNumber}</div> : null}
          </div>
        )}
      </div>
    </div>
  );
}