'use client'

import { getAreas } from '@/api/areas'
import { getAudiences } from '@/api/audiences'
import { getCategories } from '@/api/categories'
import { createModules, getModules, ModulesProps } from '@/api/modules'
import InputFile from '@/components/input-file'
import { LoadingSpinIcon } from '@/components/loading-spin-icon'
import { StyledInputs } from '@/components/mui/styled-inputs'
import { Button } from '@/components/ui/button'
import { Calendar } from '@/components/ui/calendar'
import { Checkbox } from '@/components/ui/checkbox'
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
} from '@/components/ui/form'
import { Label } from '@/components/ui/label'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { Separator } from '@/components/ui/separator'
import { cn } from '@/lib/utils'
import { zodResolver } from '@hookform/resolvers/zod'
import { Box, Chip, MenuItem, TextField } from '@mui/material'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { format } from 'date-fns'
import { CalendarIcon, PlusIcon, Trash2 } from 'lucide-react'
import { useState } from 'react'
import { Controller, useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { z } from 'zod'

// type CoursesProps = {
//   name: string
//   description: string
//   desktopBanner: string
//   mobileBanner: string
//   duration: number
//   startDate: Date
//   endDate: Date
//   professors: string[]
//   workload: number
//   areaId: string
//   audienceId: string
//   categoryId: string
//   moduleIds: string[]
// }

const FormSchema = z.object({
  name: z.string().trim().min(3, { message: 'Título obrigatório' }),
  description: z.string().trim().min(3, { message: 'Descrição obrigatória' }),
  desktopBanner: z.string(),
  mobileBanner: z.string(),
  duration: z.number(),
  startDate: z.date().optional(),
  endDate: z.date().optional(),
  professors: z.array(z.string()),
  workload: z.number(),
  areaId: z.string(),
  audienceId: z.string(),
  categoryId: z.string(),
  moduleIds: z.array(z.string()),
})

export default function Curso() {
  const [checkedStart, setCheckedStart] = useState<boolean>(false)
  const [checkedEnd, setCheckedEnd] = useState<boolean>(false)
  const [dateStart, setDateStart] = useState<Date>()
  const [dateEnd, setDateEnd] = useState<Date>()
  const [inputValue, setInputValue] = useState<string>('')

  const queryClient = useQueryClient()

  // const { form.register, watch, handleSubmit, control } = useForm<CoursesProps>()
  const { register, handleSubmit, reset } = useForm<ModulesProps>()
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      areaId: '',
      professors: [],
      moduleIds: [],
    },
  })
  const values = form.watch()
  const valueDesktopBanner = values?.desktopBanner?.['0']
  const valueMobileBanner = values?.mobileBanner?.['0']

  const { data: areas } = useQuery({
    queryKey: ['areas'],
    queryFn: getAreas,
  })

  const { data: modules } = useQuery({
    queryKey: ['modules'],
    queryFn: getModules,
  })

  const { data: audiences, isLoading: audiencesLoading } = useQuery({
    queryKey: ['audiences'],
    queryFn: getAudiences,
  })

  const { data: categories, isLoading: categoriesLoading } = useQuery({
    queryKey: ['categories'],
    queryFn: getCategories,
  })

  function onCheckedStart(checkedStart: boolean) {
    setCheckedStart(checkedStart)
  }

  function onCheckedEnd(checkedEnd: boolean) {
    setCheckedEnd(checkedEnd)
  }

  const handleKeyDown = (event: React.KeyboardEvent) => {
    if (event.key === 'Enter' && inputValue.trim()) {
      event.preventDefault()
      form.setValue('professors', [...values.professors, inputValue.trim()])
      setInputValue('')
    }
  }

  const handleDelete = (professorToDelete: string) => {
    form.setValue(
      'professors',
      values.professors.filter((str) => str !== professorToDelete),
    )
  }

  const mutation = useMutation({
    mutationFn: createModules,
    onSuccess: () => {
      toast.success('Módulo criado com sucesso!')
      queryClient.invalidateQueries({ queryKey: ['modules'] })
    },
  })

  async function addNewModuler(data: ModulesProps) {
    const response = await mutation.mutateAsync(data)
    const responseModuleId = response.data.id

    form.setValue('moduleIds', [...selectedIds, responseModuleId])

    reset()
  }

  const selectedIds = form.watch('moduleIds') || []

  const selectedModules = modules?.data.filter((module) =>
    selectedIds.includes(module.id),
  )

  const handleSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const selectedId = event.target.value

    if (selectedId && !selectedIds.includes(selectedId)) {
      form.setValue('moduleIds', [...selectedIds, selectedId])
    }
  }

  const handleDeleteModule = (idToRemove: string) => {
    form.setValue(
      'moduleIds',
      selectedIds.filter((id) => id !== idToRemove),
    )
  }

  function onSubmit(data: z.infer<typeof FormSchema>) {
    const body = {
      ...data,
      startDate: dateStart?.toLocaleDateString() || '',
      endDate: dateEnd?.toLocaleDateString() || '',
    }
    console.log(body)
  }

  console.log('error: ', form.formState.errors)

  return (
    <section className="container py-10">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <div className="flex items-center gap-6">
            <h1 className="text-3xl font-bold">Criar curso</h1>
            <Button type="submit" variant="secondary" className="uppercase">
              Salvar e publicar
            </Button>
          </div>
          <div className="flex w-full mt-10">
            <div className="flex-1 flex flex-col border-r border-gray-50 pr-6 space-y-4">
              <h6 className="text-xl text-purple-100">
                Informações sobre o curso
              </h6>

              <TextField
                label="Nome do curso"
                variant="standard"
                type="text"
                {...form.register('name')}
                sx={StyledInputs({ color: '#26AAA7' })}
              />
              {form.formState.errors.name && (
                <p>{form.formState.errors.name.message}</p>
              )}

              <TextField
                type="text"
                variant="standard"
                label="Área"
                select
                sx={StyledInputs({ color: '#26AAA7' })}
                defaultValue={''}
                {...form.register('areaId')}
              >
                <MenuItem value="" className="hidden">
                  Selecione a área
                </MenuItem>
                {areas?.data.map((option) => (
                  <MenuItem key={option.id} value={option.id}>
                    {option.name}
                  </MenuItem>
                ))}
              </TextField>

              <TextField
                label="Descrição do Curso"
                variant="standard"
                type="text"
                multiline
                rows={4}
                sx={StyledInputs({ color: '#26AAA7' })}
                {...form.register('description')}
              />

              <Controller
                control={form.control}
                name="professors"
                render={({ field }) => (
                  <Box
                    sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
                  >
                    <TextField
                      label="Digite os nomes dos professores e pressione Enter"
                      value={inputValue}
                      onChange={(e) => setInputValue(e.target.value)}
                      onKeyDown={handleKeyDown}
                      variant="standard"
                      sx={StyledInputs({ color: '#26AAA7' })}
                    />
                    <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
                      {field.value.map((str, index) => (
                        <Chip
                          key={index}
                          label={str}
                          onDelete={() => handleDelete(str)}
                          variant="outlined"
                          color="secondary"
                          sx={{ color: 'white' }}
                        />
                      ))}
                    </Box>
                  </Box>
                )}
              />

              <div className="flex justify-between flex-wrap gap-6 py-6">
                <div className="flex flex-col flex-1 mt-6">
                  <h6 className="text-xl text-purple-100">Banner Desktop</h6>
                  <span className="mt-4">
                    Dimensões recomendadas: 1512 x 300
                  </span>
                  <span>Formatos aceitos: .png, .jpg</span>

                  <InputFile
                    id="desktopBanner"
                    values={valueDesktopBanner}
                    label="Adicionar banner"
                    {...form.register('desktopBanner')}
                  />
                </div>
                <div className="flex flex-col flex-1 mt-6">
                  <h6 className="text-xl text-purple-100">Banner Mobile</h6>
                  <span className="mt-4">
                    Dimensões recomendadas: 390 x 300
                  </span>
                  <span>Formatos aceitos: .png, .jpg</span>
                  <InputFile
                    id="mobileBanner"
                    values={valueMobileBanner}
                    label="Adicionar banner"
                    {...form.register('mobileBanner')}
                  />
                </div>
              </div>

              <Separator className="!mt-10 !mb-4" />
              <h6 className="text-xl text-purple-100 mb-4">Datas</h6>
              <div className="flex flex-col space-y-6">
                <div className="flex justify-between items-center">
                  <div className="flex items-center gap-2">
                    <Checkbox id="start" onCheckedChange={onCheckedStart} />
                    <label
                      htmlFor="start"
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Definir data de início
                    </label>
                  </div>
                  {checkedStart && (
                    <div className="flex flex-col">
                      <Label>Data de início</Label>
                      <Popover>
                        <PopoverTrigger asChild>
                          <Button
                            variant={'ghost'}
                            type="button"
                            className={cn(
                              'lg:w-[450px] justify-start text-left font-normal border-b rounded-none pl-0 border-green-400',
                              !dateStart && 'text-muted-foreground',
                            )}
                          >
                            {dateStart ? (
                              format(dateStart, 'dd/MM/yyyy')
                            ) : (
                              <span className="text-gray-600">MM/DD/YYYY</span>
                            )}
                            <CalendarIcon className="ml-auto h-4 w-4 text-green-400" />
                          </Button>
                        </PopoverTrigger>
                        <PopoverContent className="w-auto p-0">
                          <Calendar
                            mode="single"
                            selected={dateStart}
                            onSelect={setDateStart}
                            initialFocus
                            {...form.register('startDate')}
                          />
                        </PopoverContent>
                      </Popover>
                    </div>
                  )}
                </div>
                <div className="flex justify-between items-center">
                  <div className="flex items-center gap-2">
                    <Checkbox id="end" onCheckedChange={onCheckedEnd} />
                    <label
                      htmlFor="closure"
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Definir data de encerramento
                    </label>
                  </div>
                  {checkedEnd && (
                    <div className="flex flex-col">
                      <Label>Data de encerramento</Label>
                      <Popover>
                        <PopoverTrigger asChild>
                          <Button
                            variant={'ghost'}
                            type="button"
                            className={cn(
                              'lg:w-[450px] justify-start text-left font-normal border-b rounded-none pl-0 border-green-400',
                              !dateEnd && 'text-muted-foreground',
                            )}
                          >
                            {dateEnd ? (
                              format(dateEnd, 'dd/MM/yyyy')
                            ) : (
                              <span className="text-gray-600">MM/DD/YYYY</span>
                            )}
                            <CalendarIcon className="ml-auto h-4 w-4 text-green-400" />
                          </Button>
                        </PopoverTrigger>
                        <PopoverContent className="w-auto p-0">
                          <Calendar
                            mode="single"
                            selected={dateEnd}
                            onSelect={setDateEnd}
                            initialFocus
                            {...form.register('endDate')}
                          />
                        </PopoverContent>
                      </Popover>
                    </div>
                  )}
                </div>
              </div>

              <Separator className="!mt-10 !mb-4" />

              <h6 className="text-xl text-purple-100 mb-4">Módulos</h6>

              <TextField
                type="text"
                variant="standard"
                label="Selecione os módulos do curso"
                select
                sx={StyledInputs({ color: '#26AAA7' })}
                defaultValue={''}
                value=""
                onChange={handleSelect}
                // {...form.register('moduleIds')}
              >
                <MenuItem value="" className="hidden">
                  Selecione os módulos
                </MenuItem>
                {modules?.data.map((option) => (
                  <MenuItem key={option.id} value={option.id}>
                    {option.name}
                  </MenuItem>
                ))}
              </TextField>

              {selectedModules?.map((item) => (
                <div
                  key={item.id}
                  className="w-full flex justify-between bg-green-800/30 py-2 px-4 rounded-sm"
                >
                  <p>{item.name}</p>
                  <Trash2
                    className="cursor-pointer text-red-400 hover:text-red-100"
                    onClick={() => handleDeleteModule(item.id)}
                  />
                </div>
              ))}

              <div className="flex flex-col p-4 gap-6 border border-gray-100">
                <TextField
                  label="Título"
                  variant="standard"
                  type="text"
                  sx={StyledInputs({ color: '#26AAA7' })}
                  {...register('name')}
                />

                <TextField
                  label="Descrição"
                  variant="standard"
                  type="text"
                  multiline
                  rows={4}
                  sx={StyledInputs({ color: '#26AAA7' })}
                  {...register('description')}
                />
              </div>

              <Button
                variant="third"
                type="button"
                className="uppercase w-52 flex items-center gap-2 !mt-8"
                onClick={handleSubmit(addNewModuler)}
              >
                <PlusIcon size={20} /> <span>Criar novo Módulo</span>
              </Button>
            </div>

            <div className="w-[380px] pl-6 flex flex-col gap-4">
              <h6 className="text-xl text-purple-100 mb-4">
                Qual o público alvo?
              </h6>
              {audiencesLoading && <LoadingSpinIcon className="ml-10" />}
              <div className="flex items-center gap-2 ml-4">
                <FormField
                  control={form.control}
                  name="audienceId"
                  render={({ field }) => (
                    <FormControl>
                      <RadioGroup
                        onValueChange={field.onChange}
                        defaultValue={field.value}
                        className="flex flex-col space-y-4"
                      >
                        {audiences?.data.map((audience) => (
                          <FormItem
                            className="flex items-center space-x-3 space-y-0"
                            key={audience.id}
                          >
                            <FormControl>
                              <RadioGroupItem value={audience.id} />
                            </FormControl>
                            <FormLabel className="font-normal">
                              {audience.name}
                            </FormLabel>
                          </FormItem>
                        ))}
                      </RadioGroup>
                    </FormControl>
                  )}
                />
              </div>
              <h6 className="text-xl text-purple-100 my-4">
                Qual o tipo de curso?
              </h6>
              {categoriesLoading && <LoadingSpinIcon className="ml-10" />}
              <div className="flex items-center gap-2 ml-4">
                <FormField
                  control={form.control}
                  name="categoryId"
                  render={({ field }) => (
                    <FormControl>
                      <RadioGroup
                        onValueChange={field.onChange}
                        defaultValue={field.value}
                        className="flex flex-col space-y-4"
                      >
                        {categories?.data.map((category) => (
                          <FormItem
                            className="flex items-center space-x-3 space-y-0"
                            key={category.id}
                          >
                            <FormControl>
                              <RadioGroupItem value={category.id} />
                            </FormControl>
                            <FormLabel className="font-normal">
                              {category.name}
                            </FormLabel>
                          </FormItem>
                        ))}
                      </RadioGroup>
                    </FormControl>
                  )}
                />
              </div>
            </div>
          </div>
        </form>
      </Form>
    </section>
  )
}
