import type { Route } from './+types/route'

import { useForm } from 'react-hook-form'
import { useOutletContext } from 'react-router'

import { Button } from '@repo/ui/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from '@repo/ui/components/ui/card'
import { FieldGroup, FieldLegend, FieldSet } from '@repo/ui/components/ui/field'
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@repo/ui/components/ui/form'
import { Input } from '@repo/ui/components/ui/input'
import { Label } from '@repo/ui/components/ui/label'
import {
  NativeSelect,
  NativeSelectOption
} from '@repo/ui/components/ui/native-select'
import { RadioGroup, RadioGroupItem } from '@repo/ui/components/ui/radio-group'

export default function Route({}: Route.ComponentProps) {
  const { org } = useOutletContext()
  const form = useForm({ defaultValues: org?.subscription })
  const { handleSubmit, formState } = form

  const onSubmit = async (data) => {
    console.log(data)
  }

  return (
    <Form {...form}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Card>
          <CardHeader>
            <CardTitle className="font-semibold text-lg">
              Escolha seu plano
            </CardTitle>
            <CardDescription>
              Escolha o plano que será utilizado para configurar o funcionamento
              e os recursos da empresa.
            </CardDescription>
          </CardHeader>

          <CardContent className="space-y-6">
            <RadioGroup
              defaultValue="none"
              className="lg:grid-cols-2 *:border *:p-4 *:rounded-lg *:cursor-pointer
                          *:has-[[aria-checked=true]]:bg-muted"
            >
              <Label className="flex items-center gap-3">
                <RadioGroupItem value="none" />
                <div>Nenhum</div>
              </Label>
              <Label className="flex items-center gap-3">
                <RadioGroupItem value="flexivel" />
                <div>Flexível</div>
              </Label>
            </RadioGroup>

            <FieldSet className="border rounded-lg p-6 bg-accent/10">
              <FieldLegend className="mb-0">Configurações do plano</FieldLegend>

              <FieldGroup>
                <FormField
                  control={form.control}
                  name="billing_day"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Dia para faturar</FormLabel>
                      <FormControl>
                        <Input type="number" min={1} max={30} {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="payment_method"
                  render={({ field }) => (
                    <FormItem className="*:w-full">
                      <FormLabel>Forma de pagamento</FormLabel>
                      <FormControl>
                        <NativeSelect {...field}>
                          <NativeSelectOption value="BANK_SLIP">
                            Boleto bancário
                          </NativeSelectOption>
                          <NativeSelectOption value="MANUAL">
                            Depósito bancário
                          </NativeSelectOption>
                        </NativeSelect>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </FieldGroup>
            </FieldSet>

            <Button
              type="submit"
              className="cursor-pointer"
              disabled={formState.isSubmitting}
            >
              Atualizar plano
            </Button>
          </CardContent>
        </Card>
      </form>
    </Form>
  )
}