"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useI18n } from "@/lib/i18n";
import { Bell, Globe, ChevronDown, Menu, LogOut, User, Trash2 } from "lucide-react";
import Link from "next/link";
import { ApiError, apiRequest } from "@/lib/api";
import { clearCafeSession, readCafeToken } from "@/lib/cafeSession";
import { CAFE_PUSH_EVENT, unregisterCafePush } from "@/lib/cafePush";

function recordOf(value: unknown) {
  return value && typeof value === "object" && !Array.isArray(value) ? (value as Record<string, unknown>) : {};
}

function textOf(value: unknown) {
  if (typeof value === "string") return value.trim();
  if (typeof value === "number" && Number.isFinite(value)) return String(value);
  return "";
}

function numberOf(value: unknown) {
  if (typeof value === "number" && Number.isFinite(value)) return value;
  if (typeof value === "string" && value.trim() && Number.isFinite(Number(value))) return Number(value);
  return null;
}

function cafeNameOf(profile: unknown) {
  const root = recordOf(profile);
  const cafe = recordOf(root.cafe || root.profile || root);
  return textOf(cafe.name || cafe.cafe_name);
}

function initialsOf(name: string) {
  return name
    .trim()
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((part) => Array.from(part)[0] || "")
    .join("");
}

function listOf(value: unknown) {
  if (Array.isArray(value)) return value;
  const record = recordOf(value);
  const nested = [record.data, record.notifications, record.items, record.rows].find(Array.isArray);
  return nested || [];
}

function unreadOf(data: unknown) {
  const root = recordOf(data);
  const meta = recordOf(root.meta || root.pagination || root.notifications);
  const direct = numberOf(
    root.unread_count ?? root.unread ?? meta.unread_count ?? meta.unread ?? meta.unread_notifications_count
  );
  if (direct != null) return direct;
  const items = listOf(root.notifications || root.items || root.data || data);
  if (!items.length && !Array.isArray(data) && !Array.isArray(root.data) && !Array.isArray(root.notifications) && !Array.isArray(root.items)) {
    return null;
  }
  const flagged = items.filter((item) => {
    const row = recordOf(item);
    return "is_read" in row || "read" in row || "read_at" in row;
  });
  if (!flagged.length) return null;
  return flagged.filter((item) => {
    const row = recordOf(item);
    if ("is_read" in row) return row.is_read === false || row.is_read === 0 || row.is_read === "0";
    if ("read" in row) return row.read === false || row.read === 0 || row.read === "0";
    return row.read_at == null || row.read_at === "";
  }).length;
}

export default function TopBar({ onMenuClick }: { onMenuClick: () => void }) {
  const { t, lang, setLang } = useI18n();
  const router = useRouter();
  const [profileOpen, setProfileOpen] = useState(false);
  const [langOpen, setLangOpen] = useState(false);
  const [loading, setLoading] = useState(true);
  const [cafeName, setCafeName] = useState("");
  const [unreadCount, setUnreadCount] = useState<number | null>(null);

  useEffect(() => {
    let cancelled = false;
    const token = readCafeToken();
    if (!token) {
      setLoading(false);
      return;
    }
    setLoading(true);
    Promise.all([
      apiRequest("cafe/profile", { lang, token }),
      apiRequest("cafe/notifications", { lang, token }).catch((caught) => {
        if (caught instanceof ApiError && caught.status === 401) throw caught;
        return null;
      }),
    ])
      .then(([profileResult, notificationsResult]) => {
        if (cancelled) return;
        setCafeName(cafeNameOf(profileResult.data));
        setUnreadCount(notificationsResult ? unreadOf(notificationsResult.data) : null);
      })
      .catch((caught) => {
        if (cancelled) return;
        if (caught instanceof ApiError && caught.status === 401) {
          clearCafeSession();
          router.push("/login");
        }
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [lang, router]);

  useEffect(() => {
    const refresh = () => {
      const token = readCafeToken();
      if (!token) return;
      apiRequest("cafe/notifications", { lang, token })
        .then((result) => setUnreadCount(unreadOf(result.data)))
        .catch(() => {});
    };
    window.addEventListener(CAFE_PUSH_EVENT, refresh);
    return () => window.removeEventListener(CAFE_PUSH_EVENT, refresh);
  }, [lang]);

  const logout = async () => {
    setProfileOpen(false);
    try {
      await apiRequest("cafe/auth/logout", {
        method: "POST",
        body: new FormData(),
        lang,
        token: readCafeToken(),
      });
    } catch (caught) {
      if (!(caught instanceof ApiError && caught.status === 401)) return;
    }
    await unregisterCafePush(lang);
    clearCafeSession();
    router.push("/login");
  };

  return (
    <header className="sticky top-0 z-30 bg-white/80 backdrop-blur-xl border-b border-[#E8E4D9]">
      <div className="flex items-center justify-between px-4 lg:px-8 h-16">
        <div className="flex items-center gap-4">
          <button
            onClick={onMenuClick}
            className="lg:hidden w-10 h-10 flex items-center justify-center rounded-xl hover:bg-[#FAFAF8]"
          >
            <div className="w-5 h-5 flex items-center justify-center">
              <Menu className="w-5 h-5 text-[#1A1A2E]" />
            </div>
          </button>
          {loading ? (
            <div className="animate-pulse">
              <div className="h-5 w-36 rounded-lg bg-[#E8E4D9]" />
              <div className="mt-2 h-3 w-16 rounded-lg bg-[#FAFAF8]" />
            </div>
          ) : (
            <div>
              <h1 className="text-lg font-bold text-[#1A1A2E]">{cafeName}</h1>
              <p className="text-xs text-[#4A4A6A]">{t("appName")}</p>
            </div>
          )}
        </div>

        <div className="flex items-center gap-2">
          <Link
            href="/notifications"
            className="relative w-10 h-10 flex items-center justify-center rounded-xl hover:bg-[#FAFAF8] transition-colors"
          >
            <div className="w-5 h-5 flex items-center justify-center">
              <Bell className="w-5 h-5 text-[#4A4A6A]" />
            </div>
            {unreadCount != null && unreadCount > 0 && (
              <span className="absolute end-1 top-1 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-gradient-to-br from-[#C9A84C] to-[#E8C94A] px-1 text-[10px] font-extrabold text-[#1A1A2E]">
                {unreadCount}
              </span>
            )}
          </Link>

          <div className="relative">
            <button
              onClick={() => { setLangOpen(!langOpen); setProfileOpen(false); }}
              className="flex items-center gap-1.5 px-3 py-2 rounded-xl hover:bg-[#FAFAF8] transition-colors"
            >
              <div className="w-4 h-4 flex items-center justify-center">
                <Globe className="w-4 h-4 text-[#4A4A6A]" />
              </div>
              <span className="text-sm font-medium text-[#1A1A2E]">{lang === "ar" ? "العربية" : "English"}</span>
              <div className="w-4 h-4 flex items-center justify-center">
                <ChevronDown className="w-4 h-4 text-[#4A4A6A]" />
              </div>
            </button>
            {langOpen && (
              <div className="absolute end-0 top-full mt-2 w-40 overflow-hidden rounded-xl border border-[#E8E4D9] bg-white shadow-xl">
                <button
                  onClick={() => { setLang("ar"); setLangOpen(false); }}
                  className={`w-full px-4 py-2.5 text-start text-sm transition-colors hover:bg-[#FAFAF8] ${lang === "ar" ? "bg-[#FAFAF8] font-bold text-[#C9A84C]" : "text-[#1A1A2E]"}`}
                >
                  العربية
                </button>
                <button
                  onClick={() => { setLang("en"); setLangOpen(false); }}
                  className={`w-full px-4 py-2.5 text-start text-sm transition-colors hover:bg-[#FAFAF8] ${lang === "en" ? "bg-[#FAFAF8] font-bold text-[#C9A84C]" : "text-[#1A1A2E]"}`}
                >
                  English
                </button>
              </div>
            )}
          </div>

          <div className="relative">
            {loading ? (
              <div className="h-10 w-10 animate-pulse rounded-xl bg-[#E8E4D9]" />
            ) : (
            <button
              onClick={() => { setProfileOpen(!profileOpen); setLangOpen(false); }}
              className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#C9A84C] via-[#E8C94A] to-[#A07830] flex items-center justify-center text-white font-bold text-sm hover:opacity-90 transition-opacity"
            >
              {initialsOf(cafeName)}
            </button>
            )}
            {profileOpen && (
              <div className="absolute end-0 top-full mt-2 w-48 overflow-hidden rounded-xl border border-[#E8E4D9] bg-white shadow-xl">
                <Link
                  href="/settings"
                  onClick={() => setProfileOpen(false)}
                  className="flex items-center gap-3 px-4 py-2.5 text-sm text-[#1A1A2E] hover:bg-[#FAFAF8] transition-colors"
                >
                  <div className="w-4 h-4 flex items-center justify-center">
                    <User className="w-4 h-4" />
                  </div>
                  {t("profile")}
                </Link>
                <button
                  type="button"
                  onClick={logout}
                  className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-[#1A1A2E] hover:bg-[#FAFAF8] transition-colors"
                >
                  <div className="w-4 h-4 flex items-center justify-center">
                    <LogOut className="w-4 h-4" />
                  </div>
                  {t("logout")}
                </button>
                <button className="flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 transition-colors w-full">
                  <div className="w-4 h-4 flex items-center justify-center">
                    <Trash2 className="w-4 h-4" />
                  </div>
                  {t("deleteAccount")}
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </header>
  );
}