"use client"

import type React from "react"
import { Button } from "@/components/ui/button"
import {
  Instagram,
  LockIcon,
  Menu,
  Phone,
  Plus,
  X,
} from "lucide-react"

import Link from "next/link"
import { LogoutButton } from "./logout-button"
import { getValidAuthTokens } from "@/lib/features/login/session"
import { TokenProps } from "@/lib/features/login/type"
import { useEffect, useState } from "react"

import { FaLinkedin } from "react-icons/fa"
import Image from "next/image"

import Logo from "@/img/bkpro.png"

export const Navbar = () => {
  const [user, setUser] = useState<TokenProps | null>(null)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  useEffect(() => {
    const loadUser = async () => {
      const { decoded } = await getValidAuthTokens()

      if (decoded) {
        setUser(decoded as TokenProps)
      }
    }

    loadUser()
  }, [])

  return (
    <header className="border-b sticky top-0 z-50" style={{ backgroundColor: "#034ea2" }}>
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <div className="flex items-center space-x-2">

            <Link href="/">
              <div className="mt-2">
                <Image
                  src={Logo}
                  alt="Pharmacy interior"
                  width={100}
                  height={60}
                  className="rounded-2xl shadow-2xl"
                />

              </div>
            </Link>
          </div>

          {/* Desktop Menu */}
          <nav className="hidden md:flex items-center space-x-8">

          </nav>

          {/* Right Side */}
          <div className="flex items-center space-x-4">


            {user ? (
              <LogoutButton userName={user?.data?.NAME} />
            ) : (
              <>
              </>
            )}

            {/* Mobile Menu Button */}
            <Button
              variant="ghost"
              size="sm"
              className="md:hidden"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            >
              {mobileMenuOpen ? (
                <X className="h-5 w-5" />
              ) : (
                <Menu className="h-5 w-5" />
              )}
            </Button>
          </div>
        </div>

        {/* Mobile Menu */}
        {mobileMenuOpen && (
          <div className="md:hidden py-4 border-t flex flex-col space-y-4">
            <Link href="/" onClick={() => setMobileMenuOpen(false)}>
              Home
            </Link>

            <Link href="/about" onClick={() => setMobileMenuOpen(false)}>
              About
            </Link>

            <Link href="/contact" onClick={() => setMobileMenuOpen(false)}>
              Contact
            </Link>

            <Link href="tel:+250780603408">
              <div className="flex items-center gap-2">
                <Phone className="h-4 w-4" />
                Call Now
              </div>
            </Link>

            <Link
              target="_blank"
              href="https://www.instagram.com/kigalisafetyacademy_1/"
            >
              <div className="flex items-center gap-2">
                <Instagram className="h-4 w-4" />
                Instagram
              </div>
            </Link>

            <Link
              target="_blank"
              href="https://www.linkedin.com/in/kigali-safety-academy-353697367"
            >
              <div className="flex items-center gap-2">
                <FaLinkedin size={18} />
                LinkedIn
              </div>
            </Link>

            {!user && (
              <>
                <Link href="/register">
                  <div className="flex items-center gap-2">
                    <Plus className="h-4 w-4" />
                    Register
                  </div>
                </Link>

                <Link href="/login">
                  <Button
                    style={{ backgroundColor: "#1B3261" }}
                    className="w-full hover:bg-green-700"
                  >
                    <LockIcon className="mr-2 h-4 w-4" />
                    Sign In
                  </Button>
                </Link>
              </>
            )}
          </div>
        )}
      </div>
    </header>
  )
}