import { Link, useLocation } from "react-router-dom";
import { Upload, History, LayoutDashboard, Moon, Sun } from "lucide-react";
import { useAuth } from "../context/AuthContext.jsx";
import { useTheme } from "../context/ThemeContext.jsx";

const NAV_LINKS = [
  { to: "/", label: "Dashboard", icon: LayoutDashboard },
  { to: "/onboard", label: "New Analysis", icon: Upload },
  { to: "/history", label: "History", icon: History },
];

export default function Navbar() {
  const location = useLocation();
  const { user, logout } = useAuth();
  const { theme, toggleTheme } = useTheme();

  return (
    <nav className="navbar">
      {/* Brand */}
      <Link to="/" className="navbar-brand" style={{ textDecoration: "none" }}>
        <span style={{ fontStyle: "italic", color: "var(--accent)" }}>
          Blue
        </span>
        -Fin
      </Link>

      {/* Center links */}
      <div className="navbar-links hide-mobile">
        {NAV_LINKS.map((link) => {
          const isActive = location.pathname === link.to;
          return (
            <Link
              key={link.to}
              to={link.to}
              className={`navbar-link ${isActive ? "active" : ""}`}
            >
              {link.label}
            </Link>
          );
        })}
      </div>

      {/* Right section */}
      <div className="flex items-center gap-sm">
        {user ? (
          <>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: "8px",
                padding: "6px 14px",
                background: "var(--bg-elevated)",
                borderRadius: "var(--radius-full)",
                border: "1px solid var(--border)",
              }}
            >
              <span
                style={{
                  fontSize: "13px",
                  fontWeight: 500,
                  color: "var(--text-secondary)",
                }}
              >
                {user.email}
              </span>
            </div>
            <button
              onClick={logout}
              className="btn btn-secondary btn-sm"
              style={{ borderRadius: "var(--radius-full)" }}
            >
              Sign Out
            </button>
          </>
        ) : (
          <Link
            to="/auth"
            className="btn btn-primary btn-sm"
            style={{ borderRadius: "var(--radius-full)" }}
          >
            Sign In
          </Link>
        )}
        <button
          onClick={toggleTheme}
          className="btn-icon btn-ghost"
          style={{ borderRadius: "var(--radius-sm)" }}
          title={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
        >
          {theme === "dark" ? <Sun size={16} /> : <Moon size={16} />}
        </button>
      </div>
    </nav>
  );
}