import type XLSX from "xlsx"
import { useCallback, useState } from "react"
import { useRsi } from "../../hooks/useRsi"
import { DropZone } from "./components/DropZone"
import { StepType } from "../UploadFlow"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"

type UploadProps = {
  onContinue: (data: XLSX.WorkBook, file: File) => Promise<void>
  setInitialState?: (state: { type: StepType; data: any[]; isFromScratch?: boolean }) => void
}

export const UploadStep = ({ onContinue, setInitialState }: UploadProps) => {
  const [isLoading, setIsLoading] = useState(false)
  const { translations } = useRsi()
  
  const handleOnContinue = useCallback(
    async (data: XLSX.WorkBook, file: File) => {
      setIsLoading(true)
      await onContinue(data, file)
      setIsLoading(false)
    },
    [onContinue],
  )
  
  const handleStartFromScratch = useCallback(() => {
    if (setInitialState) {
      setInitialState({ type: StepType.validateData, data: [{}], isFromScratch: true })
    }
  }, [setInitialState])
  
  return (
    <div className="p-8">
      <h2 className="text-3xl font-semibold mb-8 text-left">{translations.uploadStep.title}</h2>
      
      <div className="max-w-xl mx-auto w-full space-y-8">
        <div className="rounded-lg p-6 flex flex-col items-center">
          <DropZone onContinue={handleOnContinue} isLoading={isLoading} />
        </div>
        
        <div className="flex items-center justify-center">
          <Separator className="w-24" />
          <span className="px-3 text-muted-foreground text-sm font-medium">OR</span>
          <Separator className="w-24" />
        </div>
        
        <div className="flex justify-center">
          <Button 
            onClick={handleStartFromScratch}
            variant="outline"
            className="min-w-[200px]"
            disabled={!setInitialState}
          >
            Start from scratch
          </Button>
        </div>
      </div>
    </div>
  )
}
