"use client";

/**
 * MIRROR of main frontend `frontend/src/components/auth/UserMenu.tsx`
 * — keep in sync manually. Tradein-mvp бандлится отдельно (basePath=/trade-in)
 * и НЕ имеет `lucide-react` в deps, поэтому icon заменён на inline SVG.
 *
 * UserMenu — личный кабинет в правом верхнем углу Topbar (gendsgn.ru/trade-in/).
 *
 * Avatar-кнопка с инициалом из username + dropdown:
 *   - текущий username
 *   - role badge («Админ» / «Пилот»)
 *   - кнопка «Выйти» — invalidate Caddy basic_auth cached creds в browser
 *
 * Logout flow — basic_auth quirk:
 *   1. Отправляем fetch с заведомо неправильными Basic creds → 401 от Caddy
 *      → браузер забывает cached creds для этого origin.
 *   2. Hard reload (`window.location.href = "/"`) — basic_auth prompt
 *      покажется заново.
 */

import type { CSSProperties } from "react";
import { useEffect, useRef, useState } from "react";

import { API_BASE_URL } from "@/lib/api";
import { logout } from "@/lib/logout";

import { useMe } from "@/lib/useMe";

/** Inline LogOut icon (lucide-react `LogOut` SVG path, stroke 1.5). */
function LogOutIcon() {
  return (
    <svg
      width={16}
      height={16}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.5}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
      <polyline points="16 17 21 12 16 7" />
      <line x1="21" y1="12" x2="9" y2="12" />
    </svg>
  );
}

/** Inline Shield icon (lucide-react `Shield` SVG path, stroke 1.5) — для
    admin-ссылки «Аудит доступа». Та же inline-SVG конвенция, что LogOutIcon
    (tradein-mvp не тянет lucide-react в deps). */
function ShieldIcon() {
  return (
    <svg
      width={16}
      height={16}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.5}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
    </svg>
  );
}

/** Inline BarChart icon (lucide-react `BarChart3` SVG path, stroke 1.5) —
    для admin-ссылки «Активность». */
function BarChartIcon() {
  return (
    <svg
      width={16}
      height={16}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.5}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="M3 3v16a2 2 0 0 0 2 2h16" />
      <path d="M18 17V9" />
      <path d="M13 17V5" />
      <path d="M8 17v-3" />
    </svg>
  );
}

/** Общий inline-стиль для admin-nav-пунктов дропдауна (Аудит/Активность) —
    тот же паттерн, что «Выйти», но нейтральный цвет вместо var(--danger). */
const adminMenuItemStyle: CSSProperties = {
  display: "flex",
  alignItems: "center",
  gap: 8,
  width: "100%",
  background: "none",
  border: "none",
  padding: "4px 0",
  cursor: "pointer",
  color: "var(--fg-primary)",
  fontWeight: 500,
  fontSize: 14,
  textAlign: "left",
  fontFamily: "inherit",
  textDecoration: "none",
};

export function UserMenu() {
  const { data, isLoading, error } = useMe();
  const [open, setOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);

  // Click outside → закрыть dropdown.
  useEffect(() => {
    if (!open) return;
    function handleClick(e: MouseEvent) {
      if (
        containerRef.current &&
        !containerRef.current.contains(e.target as Node)
      ) {
        setOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, [open]);

  // Escape key → закрыть + вернуть focus на avatar.
  useEffect(() => {
    if (!open) return;
    function handleKey(e: KeyboardEvent) {
      if (e.key === "Escape") {
        setOpen(false);
        buttonRef.current?.focus();
      }
    }
    document.addEventListener("keydown", handleKey);
    return () => document.removeEventListener("keydown", handleKey);
  }, [open]);

  // Loading / 401 / no data — ничего не рендерим.
  if (isLoading || error || !data) return null;

  const initial = data.username[0]?.toUpperCase() ?? "?";
  const roleLabel = data.role === "admin" ? "Админ" : "Пилот";

  return (
    <div ref={containerRef} style={{ position: "relative" }}>
      <button
        ref={buttonRef}
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-label="Личный кабинет"
        aria-haspopup="menu"
        aria-expanded={open}
        style={{
          width: 32,
          height: 32,
          borderRadius: "50%",
          background: "var(--accent-soft)",
          color: "var(--accent)",
          border: "none",
          fontWeight: 600,
          fontSize: 14,
          cursor: "pointer",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          padding: 0,
          fontFamily: "inherit",
        }}
      >
        {initial}
      </button>

      {open && (
        <div
          role="menu"
          aria-label="Личный кабинет"
          style={{
            position: "absolute",
            top: "calc(100% + 8px)",
            right: 0,
            minWidth: 200,
            background: "var(--bg-card)",
            border: "1px solid var(--border-card)",
            borderRadius: 8,
            padding: 12,
            // Popover (не card) — допустимая лёгкая тень для отделения.
            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
            zIndex: 200,
          }}
        >
          <div
            style={{
              fontSize: 14,
              fontWeight: 500,
              color: "var(--fg-primary)",
              marginBottom: 4,
              wordBreak: "break-all",
            }}
          >
            {data.username}
          </div>
          <div
            style={{
              display: "inline-block",
              background: "var(--accent-soft)",
              color: "var(--accent)",
              padding: "2px 8px",
              borderRadius: 4,
              fontSize: 11,
              textTransform: "uppercase",
              letterSpacing: "0.04em",
              fontWeight: 500,
            }}
          >
            {roleLabel}
          </div>
          {data.role === "admin" && (
            <>
              <hr
                style={{
                  margin: "12px 0",
                  border: "none",
                  borderTop: "1px solid var(--border-soft)",
                }}
              />
              <a
                role="menuitem"
                href={`${API_BASE_URL}/admin/audit`}
                onClick={() => setOpen(false)}
                style={adminMenuItemStyle}
              >
                <ShieldIcon />
                Аудит доступа
              </a>
              <a
                role="menuitem"
                href={`${API_BASE_URL}/admin/analytics`}
                onClick={() => setOpen(false)}
                style={{ ...adminMenuItemStyle, marginTop: 4 }}
              >
                <BarChartIcon />
                Активность
              </a>
            </>
          )}
          <hr
            style={{
              margin: "12px 0",
              border: "none",
              borderTop: "1px solid var(--border-soft)",
            }}
          />
          <button
            role="menuitem"
            type="button"
            onClick={logout}
            style={{
              display: "flex",
              alignItems: "center",
              gap: 8,
              width: "100%",
              background: "none",
              border: "none",
              padding: "4px 0",
              cursor: "pointer",
              color: "var(--danger)",
              fontWeight: 500,
              fontSize: 14,
              textAlign: "left",
              fontFamily: "inherit",
            }}
          >
            <LogOutIcon />
            Выйти
          </button>
        </div>
      )}
    </div>
  );
}
