"use client";

import { useState } from "react";
import { Menu, X, Globe, Phone } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useLanguage } from "@/contexts/language-context";
import Link from "next/link";
import Image from "next/image";

export default function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const { language, setLanguage, t } = useLanguage();

  const languages = [
    { code: "en" as const, name: "English" },
    { code: "uz" as const, name: "O'zbekcha" },
    { code: "ru" as const, name: "Русский" },
  ];

  return (
    <header className="sticky top-0 z-50 bg-background border-b border-border">
      <div className="bg-slate-900 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2 flex items-center justify-between text-sm">
          <div className="flex items-center gap-2">
            <Phone size={16} />
            <span>+998 (50) 505-55-45</span>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button className="flex items-center gap-1 hover:text-primary transition-colors">
                <Globe size={16} />
                {language.toUpperCase()}
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              align="end"
              className="bg-slate-800 border-slate-700"
            >
              {languages.map((lang) => (
                <DropdownMenuItem
                  key={lang.code}
                  onClick={() => setLanguage(lang.code)}
                  className="cursor-pointer hover:bg-slate-700 text-white"
                >
                  {lang.name}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Image src="/logo.png" alt="logo image" width={120} height={50}/>
        </div>

        <div className="hidden md:flex items-center gap-8">
          <a
            href="#features"
            className="text-foreground hover:text-primary transition-colors"
          >
            {t.nav.features}
          </a>
          <a
            href="#pricing"
            className="text-foreground hover:text-primary transition-colors"
          >
            {t.nav.pricing}
          </a>
          <a
            href="#faq"
            className="text-foreground hover:text-primary transition-colors"
          >
            {t.nav.faq}
          </a>
        </div>

        <div className="hidden md:flex items-center gap-4">
          <Link href="https://demo.dwatt.uz/">
            <Button variant="outline" className="border-border bg-transparent">
              {t.nav.login}
            </Button>
          </Link>
          <a href="#contact">
            <Button className="bg-primary hover:bg-primary/90">
              {t.nav.signup}
            </Button>
          </a>
        </div>

        <button
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          className="md:hidden"
        >
          {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
        </button>
      </nav>

      {mobileMenuOpen && (
        <div className="md:hidden border-t border-border bg-background">
          <div className="px-4 py-4 space-y-4">
            <a
              href="#features"
              className="block text-foreground hover:text-primary"
            >
              {t.nav.features}
            </a>
            <a
              href="#pricing"
              className="block text-foreground hover:text-primary"
            >
              {t.nav.pricing}
            </a>
            <a href="#faq" className="block text-foreground hover:text-primary">
              {t.nav.faq}
            </a>
            <div className="flex gap-2 pt-4 border-t border-border">
              <Button variant="outline" className="flex-1 bg-transparent">
                {t.nav.login}
              </Button>
              <Button className="flex-1 bg-primary hover:bg-primary/90">
                {t.nav.signup}
              </Button>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}