import { Drawer, DrawerBody, DrawerFooter, DrawerHeader } from '@nextui-org/drawer'
import {
    Autocomplete,
    AutocompleteItem,
    Button,
    Checkbox,
    DrawerContent,
    Input,
    Select,
    SelectItem,
} from '@nextui-org/react'
import { message } from '@tauri-apps/plugin-dialog'
import { ChevronDown, ChevronUp, RefreshCcwIcon } from 'lucide-react'
import { useEffect, useMemo, useState } from 'react'
import { createRemote } from '../../lib/rclone/api'
import { getBackends } from '../../lib/rclone/api'
import { useStore } from '../../lib/store'
import { triggerTrayRebuild } from '../../lib/tray'
import type { Backend, BackendOption } from '../../types/rclone'

export default function RemoteCreateDrawer({
    isOpen,
    onClose,
}: { isOpen: boolean; onClose: () => void }) {
    const addRemote = useStore((state) => state.addRemote)
    const [config, setConfig] = useState<Record<string, any>>({})
    const [showMoreOptions, setShowMoreOptions] = useState(false)
    const [isSaving, setIsSaving] = useState(false)
    const [backends, setBackends] = useState<Backend[]>([])

    useEffect(() => {
        getBackends().then((b) => {
            setBackends(b)
        })
    }, [])

    const handleTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const newType = e.target.value

        // preserve name when resetting type
        setConfig((prev) => ({ name: prev.name, type: newType }))
    }

    const renderField = (option: BackendOption) => {
        // Skip rendering if the field should be hidden
        if (option.Hide !== 0) return null

        // For S3 type, only show fields that match the current provider or have no provider specified
        if (config.type === 's3' && option.Provider && option.Provider !== config.provider) {
            return null
        }

        const fieldId = `field-${option.Name}`
        const fieldValue = config[option.Name] || option.DefaultStr

        switch (option.Type) {
            case 'bool':
                return (
                    <div key={option.Name} className="flex flex-col gap-0.5">
                        <Checkbox
                            checked={fieldValue === 'true'}
                            name={option.Name}
                            radius="sm"
                            onValueChange={(checked) =>
                                setConfig({ ...config, [option.Name]: checked })
                            }
                        >
                            {option.Name}
                        </Checkbox>
                        {option.Help.includes('\n') && (
                            <p className="text-xs text-foreground-400">
                                {option.Help.split('\n').slice(1).join('\n')}
                            </p>
                        )}
                    </div>
                    //         <input
                    //             type="checkbox"
                    //             id={fieldId}
                    //             name={option.Name}
                    //             className="form-checkbox"
                    //             defaultChecked={fieldValue === 'true'}
                    //             onChange={(e) =>
                    //                 setConfig({ ...config, [option.Name]: e.target.checked })
                    //             }
                    //             autoComplete="off"
                    //             autoCapitalize="off"
                    //             autoCorrect="off"
                    //             spellCheck={false}
                    //         />
                )
            case 'string': {
                if (option.Examples && option.Examples.length > 0) {
                    return (
                        <Autocomplete
                            id={fieldId}
                            name={option.Name}
                            defaultInputValue={fieldValue}
                            defaultItems={option.Examples}
                            label={option.Name}
                            labelPlacement="outside"
                            placeholder={option.Help.split('\n')[0]}
                            description={option.Help.split('\n').slice(1).join('\n')}
                            isRequired={option.Required}
                            onInputChange={(value) => {
                                // console.log(value)
                                setConfig({ ...config, [option.Name]: value })
                            }}
                        >
                            {(item) => (
                                <AutocompleteItem key={item.Value}>
                                    {item.Help || item.Value}
                                </AutocompleteItem>
                            )}
                        </Autocomplete>
                    )
                }
                return (
                    <Input
                        key={option.Name}
                        id={fieldId}
                        name={option.Name}
                        label={option.Name}
                        labelPlacement="outside"
                        placeholder={option.Help.split('\n')[0]}
                        type={option.IsPassword ? 'password' : 'text'}
                        value={fieldValue}
                        autoComplete="off"
                        autoCapitalize="off"
                        autoCorrect="off"
                        spellCheck={false}
                        description={option.Help.split('\n').slice(1).join('\n')}
                        isRequired={option.Required}
                        onValueChange={(value) => {
                            // console.log(value)
                            setConfig({ ...config, [option.Name]: value })
                        }}
                    />
                )
                // if (option.Examples && option.Examples.length > 0) {
                //     return (
                //             <select
                //                 id={fieldId}
                //                 name={option.Name}
                //                 className="w-full p-2 border rounded dark:bg-gray-800"
                //                 value={fieldValue}
                //                 onChange={(e) =>
                //                     setConfig({ ...config, [option.Name]: e.target.value })
                //                 }
                //             >
                //                 <option value="">Select {option.Name}</option>
                //                 {option.Examples.map((example) => (
                //                     <option key={example.Value} value={example.Value}>
                //                         {example.Help || example.Value}
                //                     </option>
                //                 ))}
                //             </select>
                //     )
                // }
                // return (
                //         <input
                //             id={fieldId}
                //             name={option.Name}
                //             type={option.IsPassword ? 'password' : 'text'}
                //             value={fieldValue || ''}
                //             onChange={(e) =>
                //                 setConfig({ ...config, [option.Name]: e.target.value })
                //             }
                //         />
                // )
            }
            default:
                return null
        }
    }

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        setIsSaving(true)

        try {
            const formData = new FormData(e.currentTarget)
            const data: Record<string, string | boolean> = {}

            // First collect all form values
            for (const [key, value] of formData.entries()) {
                if (value.toString().trim() === '') continue
                if (
                    e.currentTarget[key] instanceof HTMLInputElement &&
                    e.currentTarget[key].type === 'checkbox'
                ) {
                    data[key] = (e.currentTarget[key] as HTMLInputElement).checked
                } else {
                    data[key] = value.toString()
                }
            }

            const name = data.name as string
            const type = data.type as string
            const parameters = Object.fromEntries(
                Object.entries(data).filter(([key]) => key !== 'name' && key !== 'type')
            )

            // Create the remote
            await createRemote(name, type, parameters)
            addRemote(name)
            onClose()
            await triggerTrayRebuild()
        } catch (error) {
            console.error('Failed to create remote:', error)
            await message(error instanceof Error ? error.message : 'Unknown error occurred', {
                title: 'Could not create remote',
                kind: 'error',
            })
        } finally {
            setIsSaving(false)
        }
    }

    const currentBackend = useMemo(() => {
        if (!config.type) return null
        return backends.find((b) => b.Name === config.type)
    }, [config, backends])

    const currentBackendFields = useMemo(() => {
        if (!currentBackend) return []
        const options =
            (currentBackend?.Options as BackendOption[]).filter(
                (opt) =>
                    !opt.Provider ||
                    (opt.Provider.includes(config.provider) && !opt.Provider.startsWith('!'))
            ) || []

        return options
    }, [config.provider, currentBackend])

    return (
        <Drawer
            isOpen={isOpen}
            placement={'bottom'}
            size="full"
            onClose={onClose}
            hideCloseButton={true}
        >
            <DrawerContent>
                {(close) => (
                    <>
                        <DrawerHeader className="flex flex-row justify-between gap-1">
                            <span>Create Remote</span>
                            <Button
                                size="sm"
                                variant="faded"
                                color="danger"
                                startContent={<RefreshCcwIcon className="w-3 h-3" />}
                                onPress={() => setConfig({})}
                                data-focus-visible="false"
                            >
                                Reset
                            </Button>
                        </DrawerHeader>
                        <DrawerBody>
                            <form
                                className="flex flex-col gap-4"
                                onSubmit={handleSubmit}
                                id="create-form"
                            >
                                <Input
                                    id="remote-name"
                                    name="name"
                                    label="name"
                                    labelPlacement="outside"
                                    placeholder="Remote Name"
                                    value={config.name || ''}
                                    onValueChange={(value) => setConfig({ ...config, name: value })}
                                    isRequired={true}
                                    autoComplete="off"
                                    autoCapitalize="off"
                                    autoCorrect="off"
                                    spellCheck={false}
                                />

                                <Select
                                    id="remote-type"
                                    name="type"
                                    label="type"
                                    labelPlacement="outside"
                                    selectionMode="single"
                                    placeholder="Select Type"
                                    selectedKeys={[config.type]}
                                    onChange={handleTypeChange}
                                    isRequired={true}
                                >
                                    {backends.map((backend) => (
                                        <SelectItem key={backend.Name} value={backend.Name}>
                                            {backend.Description.includes('Compliant')
                                                ? `${backend.Description.split('Compliant')[0]} Compliant`
                                                : backend.Description || backend.Name}
                                        </SelectItem>
                                    ))}
                                </Select>

                                {/* Normal Fields */}
                                {currentBackendFields
                                    .filter((opt) => !opt.Advanced)
                                    .map(renderField)}

                                {/* Advanced Fields */}
                                {currentBackendFields.some((opt) => opt.Advanced) && (
                                    <div className="pt-4">
                                        <button
                                            type="button"
                                            onClick={() => setShowMoreOptions(!showMoreOptions)}
                                            className="flex items-center space-x-2 text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
                                        >
                                            {showMoreOptions ? (
                                                <ChevronUp className="w-4 h-4" />
                                            ) : (
                                                <ChevronDown className="w-4 h-4" />
                                            )}
                                            <span>More Options</span>
                                        </button>
                                        {showMoreOptions && (
                                            <div className="flex flex-col gap-4 pt-4 mt-4">
                                                {currentBackendFields
                                                    .filter((opt) => opt.Advanced)
                                                    .map(renderField)}
                                            </div>
                                        )}
                                    </div>
                                )}
                            </form>
                        </DrawerBody>
                        <DrawerFooter>
                            <Button
                                color="danger"
                                variant="light"
                                onPress={close}
                                data-focus-visible="false"
                            >
                                Cancel
                            </Button>
                            <Button
                                color="primary"
                                type="submit"
                                form="create-form"
                                isLoading={isSaving}
                                data-focus-visible="false"
                            >
                                {isSaving ? 'Creating...' : 'Create Remote'}
                            </Button>
                        </DrawerFooter>
                    </>
                )}
            </DrawerContent>
        </Drawer>
    )
}