"use client";

import React from "react";
import Image from "next/image";
import { useI18n } from "@/lib/i18n/context";
import { LanguageSwitch } from "./LanguageSwitch";
import { Sparkles, ShieldCheck } from "lucide-react";
import { FREE_SCAN_LIMIT } from "@/lib/limits";

interface NavbarProps {
  scanCount: number;
  isPro: boolean;
  onOpenPaywall: () => void;
  freeAllowance?: number;
}

export function Navbar({ scanCount, isPro, onOpenPaywall, freeAllowance = FREE_SCAN_LIMIT }: NavbarProps) {
  const { t } = useI18n();

  return (
    <header className="sticky top-0 z-40 w-full border-b border-[#E2E8F0] bg-[#F6F9FF]/90 backdrop-blur-md">
      <div className="mx-auto flex h-24 sm:h-28 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
        {/* Brand Logo */}
        <div className="flex items-center gap-4">
          <div className="flex h-20 w-20 sm:h-24 sm:w-24 items-center justify-center bg-white border-2 border-black p-1.5 shadow-lg overflow-hidden shrink-0">
            <Image
              src="/icon.png"
              alt="ScanReceipts Icon"
              width={96}
              height={96}
              className="w-full h-full object-contain"
              priority
            />
          </div>
          <a href="#" className="flex flex-col">
            <div className="flex items-center gap-2">
              <span className="font-display text-xl sm:text-2xl font-black tracking-tight text-black">
                ScanReceipts
              </span>
              <span className="font-mono text-xs uppercase px-2 py-0.5 bg-black text-white font-bold tracking-wider">
                .APP
              </span>
            </div>
            <span className="font-mono text-xs uppercase tracking-caps text-[#475569] font-medium hidden sm:inline mt-1">
              Instant AI OCR & Spreadsheet Engine
            </span>
          </a>
        </div>

        {/* Navigation Links (Desktop) */}
        <nav className="hidden md:flex items-center gap-6 font-mono text-xs uppercase tracking-caps text-[#475569]">
          <a href="#features" className="hover:text-black transition-colors">
            {t.nav.features}
          </a>
          <a href="#comparison" className="hover:text-black transition-colors">
            Vergleich
          </a>
          <a href="#pricing" className="hover:text-black transition-colors">
            {t.nav.pricing}
          </a>
          <a href="#faq" className="hover:text-black transition-colors">
            {t.nav.faq}
          </a>
        </nav>

        {/* Actions (Scan Counter, Language, Pro Upgrade) */}
        <div className="flex items-center gap-3">
          {/* Scan Counter / Pro Badge */}
          {isPro ? (
            <div className="hidden sm:flex items-center gap-1.5 px-2.5 py-1 bg-[#EEF4FC] border border-[#E2E8F0] text-black text-xs font-mono">
              <ShieldCheck className="h-3.5 w-3.5 text-black" />
              <span>{t.nav.proActive}</span>
            </div>
          ) : (
            <div className="flex items-center gap-1.5 px-2.5 py-1 bg-[#F8FAFC] border border-[#E2E8F0] text-[#475569] text-xs font-mono">
              <span>{t.nav.scanCounter}:</span>
              <span className="font-bold text-black">
                {Math.max(0, freeAllowance - scanCount)} / {freeAllowance}
              </span>
            </div>
          )}

          {/* Upgrade Button */}
          {!isPro && (
            <button
              onClick={onOpenPaywall}
              className="hidden sm:inline-flex items-center gap-1.5 px-3.5 py-1.5 bg-black text-white text-xs font-mono uppercase tracking-caps hover:bg-[#334155] transition-all font-medium"
            >
              <Sparkles className="h-3.5 w-3.5" />
              <span>{t.nav.upgradePro}</span>
            </button>
          )}

          {/* Language Switch */}
          <LanguageSwitch />
        </div>
      </div>
    </header>
  );
}
