import { FileText, Upload } from 'lucide-react'
import React, { useRef } from 'react'
import { Button } from 'shared/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from 'shared/ui/popover'

interface ExcelUploadPanelProps {
  fileName?: string
  isLoading: boolean
  onUploadClick: () => void
  onFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void
}

export const ExcelUploadPanel: React.FC<ExcelUploadPanelProps> = ({
  fileName,
  isLoading,
  onUploadClick,
  onFileChange,
}) => {
  const fileInputRef = useRef<HTMLInputElement>(null)

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="ghost"
          size="sm"
          className="h-6 gap-1 px-2 text-xs"
          disabled={isLoading}
        >
          <FileText
            className={`h-3 w-3 ${fileName ? 'text-emerald-600' : 'text-gray-400'}`}
          />
          {isLoading ? (
            <div className="h-2 w-2 animate-spin rounded-full border border-current border-t-transparent" />
          ) : (
            <span className={fileName ? 'text-emerald-700' : 'text-gray-500'}>
              Шаблон
            </span>
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-80 p-3" align="end">
        <div className="space-y-3">
          <div className="space-y-1">
            <h4 className="text-sm font-medium">Excel файл</h4>
            <p className="text-xs text-muted-foreground">
              Загрузите или обновите Excel файл для шаблона
            </p>
          </div>

          {fileName && (
            <div className="space-y-1">
              <label className="text-xs font-medium text-muted-foreground">
                Текущий файл:
              </label>
              <div className="flex items-center gap-2 rounded border bg-emerald-50 p-2">
                <FileText className="h-3 w-3 text-emerald-600" />
                <span
                  className="flex-1 text-sm text-emerald-700"
                  title={fileName}
                >
                  {fileName}
                </span>
              </div>
            </div>
          )}

          <div className="space-y-2">
            <input
              ref={fileInputRef}
              type="file"
              accept=".xlsx,.xls"
              onChange={onFileChange}
              className="hidden"
            />
            <Button
              variant="outline"
              onClick={() => fileInputRef.current?.click()}
              disabled={isLoading}
              className="w-full gap-2"
              size="sm"
            >
              {isLoading ? (
                <>
                  <div className="h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent" />
                  Загрузка...
                </>
              ) : (
                <>
                  <Upload className="h-3 w-3" />
                  {fileName ? 'Заменить файл' : 'Загрузить файл'}
                </>
              )}
            </Button>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}
