"use client";

import * as React from "react";
import { useDropzone } from "react-dropzone";
import { Download, FilePlus2, Loader2, Plus, Upload } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { EXCEL_EDITOR_ACCEPT } from "./excel-editor.constants";

type ExcelEditorToolbarProps = {
  onNew: () => void;
  onAddSheet: () => void;
  onOpenFile: (file: File) => void;
  onExport: () => void;
  isParsing?: boolean;
  isExporting?: boolean;
  disabled?: boolean;
};

export function ExcelEditorToolbar({
  onNew,
  onAddSheet,
  onOpenFile,
  onExport,
  isParsing = false,
  isExporting = false,
  disabled = false,
}: ExcelEditorToolbarProps) {
  const fileInputRef = React.useRef<HTMLInputElement>(null);
  const busy = disabled || isParsing || isExporting;

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop: (acceptedFiles) => {
      const file = acceptedFiles[0];
      if (file) onOpenFile(file);
    },
    accept: EXCEL_EDITOR_ACCEPT,
    multiple: false,
    noClick: true,
    disabled: busy,
  });

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) onOpenFile(file);
    event.target.value = "";
  };

  return (
    <div
      {...getRootProps()}
      className={cn(
        "flex flex-wrap items-center gap-2 rounded-xl border border-gray-200 bg-white px-3 py-2",
        isDragActive && "border-accent ring-2 ring-accent/20",
      )}
    >
      <input {...getInputProps()} />
      <input
        ref={fileInputRef}
        type="file"
        className="hidden"
        accept=".xlsx,.xls,.csv"
        onChange={handleFileChange}
      />

      <Button
        type="button"
        size="sm"
        variant="outline"
        className="h-10 gap-1.5"
        onClick={onNew}
        disabled={busy}
      >
        <FilePlus2 size={14} />
        New
      </Button>

      <Button
        type="button"
        size="sm"
        variant="outline"
        className="h-10 gap-1.5"
        onClick={onAddSheet}
        disabled={busy}
      >
        <Plus size={14} />
        New sheet
      </Button>

      <Button
        type="button"
        size="sm"
        variant="outline"
        className="h-10 gap-1.5"
        onClick={() => fileInputRef.current?.click()}
        disabled={busy}
      >
        {isParsing ? (
          <Loader2 size={14} className="animate-spin" />
        ) : (
          <Upload size={14} />
        )}
        Open
      </Button>

      <Button
        type="button"
        size="sm"
        className="h-10 gap-1.5"
        onClick={onExport}
        disabled={busy}
      >
        {isExporting ? (
          <Loader2 size={14} className="animate-spin" />
        ) : (
          <Download size={14} />
        )}
        Export .xlsx
      </Button>

      {isDragActive ? (
        <span className="ml-auto text-[12px] font-medium text-accent">
          Drop spreadsheet file to open
        </span>
      ) : (
        <span className="ml-auto hidden text-[11px] text-gray-400 sm:inline">
          Use New sheet or the + tab below to add worksheets
        </span>
      )}
    </div>
  );
}