"use client";

import React from 'react';
import { Play, ChevronDown, User, Settings, LogOut, Wifi, Circle } from 'lucide-react';
import { useEditorStore } from '@/store/editor-store';
import { useAppStore } from '@/store/app-store';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';

export function Navbar() {
  const { isSaving } = useEditorStore();
  const { setDeployModalOpen, setSettingsModalOpen, setNewProjectModalOpen } = useAppStore();

  return (
    <nav className="h-16 bg-[#0a0a0f] border-b border-gray-800 flex items-center justify-between px-6">
      {/* Left: Logo */}
      <div className="flex items-center gap-4">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white font-bold text-xl">
            A
          </div>
          <span className="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
            AeThex Studio
          </span>
        </div>
        
        <button 
          onClick={() => setNewProjectModalOpen(true)}
          className="px-3 py-1.5 text-sm bg-surface hover:bg-surface/70 rounded-lg transition-colors text-gray-300"
        >
          New Project
        </button>
      </div>

      {/* Center: Project name & save status */}
      <div className="flex items-center gap-3">
        <span className="text-gray-300 font-medium">My Awesome Game</span>
        <div className="flex items-center gap-2">
          {isSaving ? (
            <>
              <div className="w-2 h-2 rounded-full bg-yellow-500 animate-pulse" />
              <span className="text-xs text-gray-400">Saving...</span>
            </>
          ) : (
            <>
              <div className="w-2 h-2 rounded-full bg-green-500" />
              <span className="text-xs text-gray-400">All changes saved</span>
            </>
          )}
        </div>
      </div>

      {/* Right: Actions */}
      <div className="flex items-center gap-3">
        {/* Deploy Dropdown */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" className="gap-2 border-gray-700 hover:bg-surface">
              Deploy
              <ChevronDown className="w-4 h-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-64 bg-surface border-gray-700">
            <DropdownMenuItem onClick={() => setDeployModalOpen(true)} className="flex items-center gap-2">
              <span className="text-lg">🎮</span>
              <div className="flex-1">
                <div>Deploy to Roblox</div>
                <div className="text-xs text-gray-400">Last: 5 minutes ago</div>
              </div>
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setDeployModalOpen(true)} className="flex items-center gap-2">
              <span className="text-lg">🌐</span>
              <div className="flex-1">
                <div>Deploy to Web</div>
                <div className="text-xs text-gray-400">game.aethex.com</div>
              </div>
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setDeployModalOpen(true)} className="flex items-center gap-2">
              <span className="text-lg">📱</span>
              <div className="flex-1">
                <div>Deploy to Mobile</div>
                <div className="text-xs text-gray-400">Build: v1.2.3</div>
              </div>
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setDeployModalOpen(true)} className="flex items-center gap-2">
              <span className="text-lg">🖥️</span>
              <div className="flex-1">
                <div>Deploy to Desktop</div>
                <div className="text-xs text-gray-400">Version: 1.0.0</div>
              </div>
            </DropdownMenuItem>
            <DropdownMenuSeparator className="bg-gray-700" />
            <DropdownMenuItem onClick={() => setDeployModalOpen(true)} className="flex items-center gap-2 font-semibold text-primary">
              <span className="text-lg">🚀</span>
              Deploy to All Platforms
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setSettingsModalOpen(true)} className="flex items-center gap-2">
              <Settings className="w-4 h-4" />
              Deployment Settings
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>

        {/* Run All Platforms */}
        <Button className="gap-2 bg-gradient-to-r from-primary to-secondary hover:opacity-90 transition-opacity">
          <Play className="w-4 h-4 fill-current" />
          Run All Platforms
        </Button>

        {/* Sync Status */}
        <div className="flex items-center gap-2 px-3 py-1.5 bg-surface rounded-lg">
          <Wifi className="w-4 h-4 text-green-500" />
          <span className="text-xs text-gray-400">Synced</span>
        </div>

        {/* User Menu */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button className="w-9 h-9 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white font-semibold hover:opacity-90 transition-opacity">
              <User className="w-5 h-5" />
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-48 bg-surface border-gray-700">
            <DropdownMenuItem onClick={() => setSettingsModalOpen(true)}>
              <Settings className="w-4 h-4 mr-2" />
              Settings
            </DropdownMenuItem>
            <DropdownMenuSeparator className="bg-gray-700" />
            <DropdownMenuItem className="text-red-400">
              <LogOut className="w-4 h-4 mr-2" />
              Logout
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </nav>
  );
}