import { Loader2, LayoutGrid, List, Search, X, Check, GitBranch, Eye, EyeOff, Download, Mic } from 'lucide-react';
import type { UseFileBrowserAppType } from '../../useFileBrowserApp';
import { ActionButtons } from './ActionButtons';

type ToolbarProps = {
  fileBrowserManager: UseFileBrowserAppType;
};

export const Toolbar = ({ fileBrowserManager }: ToolbarProps) => {
  const {
    showCloneInput,
    setShowCloneInput,
    cloneUrl,
    setCloneUrl,
    cloning,
    handleGitClone,
    searchQuery,
    setSearchQuery,
    searchInputRef,
    showHidden,
    setShowHidden,
    viewMode,
    setViewMode,
    setShowVideoDownload,
    setShowDictate,
  } = fileBrowserManager;

  return (
    <div className="shrink-0 flex items-center gap-2 md:gap-3 px-3 md:px-4 h-12 md:h-14 border-b border-duck-dark/10 overflow-hidden">
      <ActionButtons fileBrowserManager={fileBrowserManager} />
      <div className="flex-1" />
      {showCloneInput ? (
        <form
          onSubmit={(ev) => {
            ev.preventDefault();
            handleGitClone();
          }}
          className="hidden md:flex items-center gap-2"
        >
          <input
            autoFocus
            value={cloneUrl}
            onChange={(ev) => setCloneUrl(ev.target.value)}
            placeholder="https://github.com/user/repo.git"
            className="h-8 w-40 md:w-64 text-sm rounded-md border border-duck-dark/20 bg-background/60 text-duck-dark placeholder:text-duck-dark/40 outline-none focus:border-duck-teal/50 px-2"
            disabled={cloning}
            onKeyDown={(ev) => {
              if (ev.key === 'Escape') {
                setShowCloneInput(false);
                setCloneUrl('');
              }
            }}
          />
          <button
            type="submit"
            disabled={cloning}
            className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors disabled:opacity-40"
            title="Clone"
          >
            {cloning ? <Loader2 className="h-4 w-4 animate-spin" /> : <Check className="h-4 w-4" />}
          </button>
          <button
            type="button"
            disabled={cloning}
            onClick={() => {
              setShowCloneInput(false);
              setCloneUrl('');
            }}
            className="p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors disabled:opacity-40"
            title="Cancel"
          >
            <X className="h-4 w-4" />
          </button>
        </form>
      ) : (
        <>
          <button
            onClick={() => setShowVideoDownload(true)}
            title="Download video"
            className="hidden md:block p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
          >
            <Download className="h-4 w-4" />
          </button>
          <button
            onClick={() => setShowDictate(true)}
            title="Dictate"
            className="hidden md:block p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
          >
            <Mic className="h-4 w-4" />
          </button>
          <button
            onClick={() => setShowCloneInput(true)}
            title="Git clone"
            className="hidden md:block p-1.5 rounded-md text-duck-teal hover:bg-duck-dark/5 cursor-pointer transition-colors"
          >
            <GitBranch className="h-4 w-4" />
          </button>
        </>
      )}
      <div className="relative flex items-center">
        <Search className="absolute left-2 h-4 w-4 text-duck-dark/40 pointer-events-none" />
        <input
          ref={searchInputRef}
          value={searchQuery}
          onChange={(ev) => setSearchQuery(ev.target.value)}
          onKeyDown={(ev) => {
            if (ev.key === 'Escape') {
              setSearchQuery('');
              searchInputRef.current?.blur();
            }
          }}
          placeholder="Search files..."
          className="h-8 w-28 focus:w-40 md:w-40 md:focus:w-56 transition-all pl-8 pr-7 text-base md:text-sm rounded-md border border-duck-dark/20 bg-background/60 text-duck-dark placeholder:text-duck-dark/40 outline-none focus:border-duck-teal/50"
        />
        {searchQuery && (
          <button
            onClick={() => setSearchQuery('')}
            className="absolute right-1.5 p-0.5 rounded text-duck-dark/40 hover:text-duck-dark/70 cursor-pointer"
          >
            <X className="h-3.5 w-3.5" />
          </button>
        )}
      </div>
      <button
        onClick={() => setShowHidden((v) => !v)}
        className={`hidden md:block p-1.5 rounded-md cursor-pointer transition-colors ${showHidden ? 'bg-duck-teal text-duck-yellow' : 'text-duck-teal hover:bg-duck-dark/5'}`}
        title={showHidden ? 'Hide hidden files' : 'Show hidden files'}
      >
        {showHidden ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
      </button>
      <div className="flex items-center border border-duck-dark/20 rounded-md overflow-hidden">
        <button
          onClick={() => setViewMode('grid')}
          className={`p-1.5 cursor-pointer transition-colors ${viewMode === 'grid' ? 'bg-duck-teal text-duck-yellow' : 'text-duck-teal hover:bg-duck-dark/5'}`}
        >
          <LayoutGrid className="h-4 w-4" />
        </button>
        <button
          onClick={() => setViewMode('list')}
          className={`p-1.5 cursor-pointer transition-colors ${viewMode === 'list' ? 'bg-duck-teal text-duck-yellow' : 'text-duck-teal hover:bg-duck-dark/5'}`}
        >
          <List className="h-4 w-4" />
        </button>
      </div>
    </div>
  );
};
