import React, { useState } from 'react';
import { ArrowLeft, ArrowRight, RotateCcw, Home, Shield, Star, MoreVertical } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

interface ChromeAddressBarProps {
  currentUrl?: string;
  onNavigate: (url: string) => void;
  onBack: () => void;
  onForward: () => void;
  onRefresh: () => void;
  onHome: () => void;
  onBookmark: () => void;
  onSummarize?: () => void;
  onShowScriptPanel?: () => void;
  canGoBack: boolean;
  canGoForward: boolean;
}

const ChromeAddressBar = ({
  currentUrl = '',
  onNavigate,
  onBack,
  onForward,
  onRefresh,
  onHome,
  onBookmark,
  onSummarize,
  onShowScriptPanel,
  canGoBack,
  canGoForward
}: ChromeAddressBarProps) => {
  const [addressInput, setAddressInput] = useState(currentUrl);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (addressInput.trim()) {
      onNavigate(addressInput.trim());
    }
  };

  return (
    <div className="bg-white border-b border-gray-200 px-3 py-2 flex items-center gap-2">
      {/* Navigation buttons */}
      <div className="flex items-center gap-1">
        <Button
          variant="ghost"
          size="sm"
          onClick={onBack}
          disabled={!canGoBack}
          className="w-8 h-8 p-0 rounded-full hover:bg-gray-100"
        >
          <ArrowLeft className="w-4 h-4" />
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={onForward}
          disabled={!canGoForward}
          className="w-8 h-8 p-0 rounded-full hover:bg-gray-100"
        >
          <ArrowRight className="w-4 h-4" />
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={onRefresh}
          className="w-8 h-8 p-0 rounded-full hover:bg-gray-100"
        >
          <RotateCcw className="w-4 h-4" />
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={onHome}
          className="w-8 h-8 p-0 rounded-full hover:bg-gray-100"
        >
          <Home className="w-4 h-4" />
        </Button>
      </div>

      {/* Address bar */}
      <form onSubmit={handleSubmit} className="flex-1 max-w-2xl mx-auto">
        <div className="relative flex items-center">
          <Shield className="absolute left-3 w-4 h-4 text-green-600" />
          <Input
            value={addressInput}
            onChange={(e) => setAddressInput(e.target.value)}
            placeholder="Search Google or type a URL"
            className="pl-10 pr-10 rounded-full border-2 border-gray-200 focus:border-blue-400 h-10"
          />
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={onBookmark}
            className="absolute right-2 w-6 h-6 p-0 rounded-full hover:bg-gray-100"
          >
            <Star className="w-4 h-4" />
          </Button>
        </div>
      </form>

      {/* Extensions area */}
      <div className="flex items-center gap-2">
        {/* Extensions menu */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              size="sm"
              className="w-8 h-8 p-0 rounded-full hover:bg-gray-100"
            >
              <MoreVertical className="w-4 h-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-48">
            <DropdownMenuItem onClick={onSummarize} className="cursor-pointer">
              <span className="mr-2">🧠</span>
              Summarize Page
            </DropdownMenuItem>
            <DropdownMenuItem onClick={onShowScriptPanel} className="cursor-pointer">
              <span className="mr-2">💡</span>
              User Script
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>

        {/* Profile/Menu area */}
        <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-medium">
          U
        </div>
      </div>
    </div>
  );
};

export default ChromeAddressBar;