import React from 'react';
import Input from '@/components/elements/Input';

interface Props {
    showSearchPanel: boolean;
    searchQuery: string;
    setSearchQuery: (value: string) => void;
    isSearching: boolean;
    searchError: string | null;
    searchInputRef: React.RefObject<HTMLInputElement>;
    canSearchContents: boolean;
    searchIncludeContent: boolean;
    setSearchIncludeContent: (value: boolean) => void;
    isLocalSearch: boolean;
    searchResultsLength: number;
}

const SearchPanel: React.FC<Props> = ({
    showSearchPanel,
    searchQuery,
    setSearchQuery,
    isSearching,
    searchError,
    searchInputRef,
    canSearchContents,
    searchIncludeContent,
    setSearchIncludeContent,
    isLocalSearch,
    searchResultsLength,
}) => (
    <div
        className="overflow-hidden transition-all duration-200 ease-in-out"
        style={{
            maxHeight: showSearchPanel ? '76px' : '0',
            opacity: showSearchPanel ? 1 : 0,
            marginTop: showSearchPanel ? '0.35rem' : '0',
        }}
    >
        <div className="border-t border-gray-700/70 pt-1.5">
            <div className="relative flex items-center">
                <svg
                    className="absolute left-2.5 w-4 h-4 text-neutral-400 pointer-events-none"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                {isSearching && (
                    <svg
                        className="absolute right-2.5 w-4 h-4 text-blue-400 animate-spin"
                        fill="none"
                        viewBox="0 0 24 24"
                    >
                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                    </svg>
                )}
                <Input
                    type="text"
                    placeholder="Search files..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="w-full text-xs text-neutral-300 placeholder:text-neutral-500"
                    style={{
                        height: 28,
                        padding: '4px 30px',
                    }}
                    ref={searchInputRef}
                />
            </div>
            {canSearchContents && (
                <label className="mt-1.5 flex items-center gap-2 text-[11px] text-neutral-400 cursor-pointer">
                    <Input
                        type="checkbox"
                        checked={searchIncludeContent}
                        onChange={(e) => setSearchIncludeContent(e.currentTarget.checked)}
                        className="h-3.5 w-3.5"
                    />
                    Search contents
                </label>
            )}
            {isLocalSearch && searchResultsLength > 0 && (
                <div className="text-yellow-400 text-[11px] mt-1.5 flex items-center gap-1">
                    <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.72-1.36 3.485 0l6.518 11.59c.75 1.334-.213 2.99-1.742 2.99H3.48c-1.53 0-2.492-1.656-1.743-2.99l6.52-11.59zM11 13a1 1 0 10-2 0 1 1 0 002 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                    </svg>
                    Results are local fallback only
                </div>
            )}
            {searchError && (
                <div className="text-red-400 text-[11px] mt-1.5">
                    {searchError}
                </div>
            )}
            {searchQuery && !isSearching && searchResultsLength === 0 && !searchError && (
                <div className="text-neutral-400 text-[11px] mt-1.5">
                    No files found matching "{searchQuery}"
                </div>
            )}
        </div>
    </div>
);

export default SearchPanel;