import { useState, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import { importChecklistFromJSON } from '../hooks/useLocalStorage'
import { Card, Heading, Text, TextField, Button, Flex, Box, Separator } from '@radix-ui/themes'
import { UploadIcon } from '@radix-ui/react-icons'

interface CreateChecklistProps {
  className?: string
}

export default function CreateChecklist({ className = '' }: CreateChecklistProps) {
  const [checklistName, setChecklistName] = useState('')
  const [isCreating, setIsCreating] = useState(false)
  const [isImporting, setIsImporting] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const navigate = useNavigate()

  const createChecklist = async () => {
    if (!checklistName.trim()) return

    setIsCreating(true)
    try {
      const response = await fetch('/api/checklists', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ name: checklistName.trim() }),
      })

      if (response.ok) {
        const data = await response.json()

        // Navigate to the new checklist
        navigate(`/${data.uuid}`)
      } else {
        alert('Failed to create checklist')
      }
    } catch (error) {
      console.error('Error creating checklist:', error)
      alert('Failed to create checklist')
    } finally {
      setIsCreating(false)
      setChecklistName('')
    }
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      createChecklist()
    }
  }

  const handleImportChecklist = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (!file) return

    setIsImporting(true)
    try {
      const newUuid = await importChecklistFromJSON(file)
      navigate(`/${newUuid}`)
    } catch (error) {
      console.error('Error importing checklist:', error)
      alert('Failed to import checklist. Please check the file format.')
    } finally {
      setIsImporting(false)
      // Reset the file input
      if (fileInputRef.current) {
        fileInputRef.current.value = ''
      }
    }
  }

  const triggerFileInput = () => {
    fileInputRef.current?.click()
  }

  return (
    <Card size="3" className={className}>
      <Heading size="5" mb="5">Create New Checklist</Heading>
      
      <Flex direction={{ initial: 'column', sm: 'row' }} gap="3" mb="5">
        <Box style={{ flex: 1 }}>
          <TextField.Root
            size="3"
            placeholder="Enter checklist name..."
            value={checklistName}
            onChange={(e) => setChecklistName(e.target.value)}
            onKeyDown={handleKeyDown}
            disabled={isCreating || isImporting}
          />
        </Box>
        <Button 
          onClick={createChecklist} 
          disabled={isCreating || isImporting || !checklistName.trim()}
          size="3"
        >
          {isCreating ? 'Creating...' : 'Create'}
        </Button>
      </Flex>

      <Separator size="4" />
      
      <Box pt="5">
        <Heading size="4" mb="3">Import Checklist</Heading>
        <Flex direction={{ initial: 'column', sm: 'row' }} gap="3" align={{ sm: 'end' }}>
          <Box style={{ flex: 1 }}>
            <Text size="2" color="gray">
              Import a previously exported checklist JSON file
            </Text>
            <input
              ref={fileInputRef}
              type="file"
              accept=".json"
              onChange={handleImportChecklist}
              className="hidden"
            />
          </Box>
          <Button 
            onClick={triggerFileInput}
            disabled={isCreating || isImporting}
            size="3"
            color="green"
          >
            <UploadIcon />
            {isImporting ? 'Importing...' : 'Import JSON'}
          </Button>
        </Flex>
      </Box>
    </Card>
  )
}