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

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

import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator
} from '@repo/ui/components/ui/breadcrumb'
import { Button } from '@repo/ui/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from '@repo/ui/components/ui/card'
import { 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 { initials } from '@repo/ui/lib/utils'
import { request as req } from '@repo/util/request'
import { BadgeCheckIcon } from 'lucide-react'

export function meta() {
  return [
    {
      title: 'Editar empresa'
    }
  ]
}

export async function loader({ params, request, context }: Route.LoaderArgs) {
  const r = await req({
    url: `/orgs/${params.id}`,
    request,
    context
  })

  if (!r.ok) {
    throw new Response(null, { status: r.status })
  }

  return { org: await r.json() } as { org: any }
}

export default function Route({ loaderData: { org } }: Route.ComponentProps) {
  const form = useForm({ defaultValues: org })
  const { handleSubmit } = form

  const onSubmit = async () => {}

  return (
    <div className="space-y-2.5">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink asChild>
              <Link to="../orgs">Empresas</Link>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Editar empresa</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>

      <div className="lg:max-w-2xl mx-auto space-y-2.5">
        <div className="flex gap-2.5 items-center mb-5">
          <div className="relative">
            {org?.subscription ? (
              <BadgeCheckIcon className="fill-blue-500 stroke-white absolute size-4 dark:size-3.5 -top-0 -right-0 z-2" />
            ) : null}

            <Avatar className="size-12">
              <AvatarFallback>{initials(org.name)}</AvatarFallback>
            </Avatar>
          </div>

          <ul>
            <li className="font-bold text-lg">{org.name}</li>
            <li className="text-muted-foreground text-sm truncate max-lg:max-w-62">
              {org.email}
            </li>
          </ul>
        </div>

        <Form {...form}>
          <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
            <Card>
              <CardHeader>
                <CardTitle className="font-semibold text-2xl">
                  Editar empresa
                </CardTitle>
                <CardDescription>
                  Configurar as informações gerais para esta empresa.
                </CardDescription>
              </CardHeader>

              <CardContent>
                <FieldSet disabled={true}>
                  <FormField
                    control={form.control}
                    name="name"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Nome</FormLabel>
                        <FormControl>
                          <Input {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="email"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Email</FormLabel>
                        <FormControl>
                          <Input {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="cnpj"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>CNPJ</FormLabel>
                        <FormControl>
                          <Input {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <div className="flex justify-end">
                    <Button type="submit">Editar</Button>
                  </div>
                </FieldSet>
              </CardContent>
            </Card>
          </form>
        </Form>
      </div>
    </div>
  )
}