"use client";

import { Search, User } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { NotificationBell } from "@/components/notifications/NotificationPanel";
import { motion } from "framer-motion";
import { useAuthStore } from "@/lib/stores/authStore";
import { useThemeStore } from "@/lib/stores/themeStore";

export function Navbar() {
  const { user } = useAuthStore();
  const { theme } = useThemeStore();
  const isLight = theme === "light";

  const displayName = user?.name || "User";
  const initials = displayName
    .split(" ")
    .map((n) => n[0])
    .join("")
    .toUpperCase()
    .slice(0, 2);

  return (
    <header
      className="sticky top-0 z-40 flex h-16 w-full items-center justify-between backdrop-blur-xl border-b px-8 transition-colors duration-300"
      style={{ background: "var(--navbar-bg)", borderColor: "var(--border)" }}
    >
      {/* Search */}
      <div className="flex flex-1 items-center">
        <div className="relative w-full max-w-sm">
          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
            <Search className="h-4 w-4" style={{ color: "var(--fg-subtle)" }} aria-hidden="true" />
          </div>
          <input
            id="search"
            className={`block w-full rounded-xl border py-2 pl-9 pr-3 text-sm transition-all duration-200 outline-none focus:ring-1 focus:ring-emerald-500/40 ${
              isLight
                ? "bg-white border-slate-200 text-slate-800 placeholder:text-slate-400 focus:bg-white focus:border-emerald-400/50"
                : "bg-white/5 border-white/10 text-white placeholder:text-zinc-500 focus:bg-white/8 border-0"
            }`}
            placeholder="Search transactions, ask AI..."
            type="search"
          />
          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
            <kbd
              className={`hidden sm:inline-flex h-5 items-center gap-1 rounded border px-1.5 text-[10px] ${
                isLight ? "border-slate-200 bg-slate-100 text-slate-400" : "border-white/10 bg-white/5 text-zinc-500"
              }`}
            >
              ⌘K
            </kbd>
          </div>
        </div>
      </div>

      {/* Right side */}
      <div className="ml-4 flex items-center gap-4">
        {/* Notification Bell */}
        <NotificationBell />

        {/* Divider */}
        <div className="h-6 w-px" style={{ background: "var(--border-strong)" }} />

        {/* User */}
        <motion.div
          whileHover={{ scale: 1.02 }}
          className="flex items-center gap-3 cursor-pointer group"
        >
          <div className="flex flex-col text-right">
            <span
              className="text-sm font-semibold group-hover:text-emerald-500 transition-colors leading-tight"
              style={{ color: "var(--fg)" }}
            >
              {displayName}
            </span>
            <span className="text-xs text-emerald-500 leading-tight">
              {user?.financial_personality || "Premium"}
            </span>
          </div>
          <Avatar className="h-9 w-9 border border-emerald-500/30 ring-2 ring-emerald-500/10">
            <AvatarImage src="" alt={displayName} />
            <AvatarFallback
              className={`text-xs font-bold ${
                isLight ? "bg-emerald-100 text-emerald-700" : "bg-emerald-900 text-emerald-400"
              }`}
            >
              {initials || <User className="h-4 w-4" />}
            </AvatarFallback>
          </Avatar>
        </motion.div>
      </div>
    </header>
  );
}