import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  Input,
  Button,
  Textarea,
} from "@repo/ui"
import { zodResolver } from "@hookform/resolvers/zod"
import { Building2Icon } from "lucide-react"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { trpc } from "@/trpc"
import { useNavigate } from "react-router"
import { useLocalStorage } from "usehooks-ts"

const formSchema = z.object({
  name: z
    .string()
    .min(2, { message: "Organization name must be at least 2 characters" })
    .max(50, { message: "Organization name must be less than 50 characters" }),
  description: z.string().optional(),
})

export function OnboardingPage() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      description: "",
    },
  })

  const [, setOrgId] = useLocalStorage("orgId", "")
  const navigate = useNavigate()

  const createOrganization = trpc.organization.create.useMutation()

  function onSubmit(values: z.infer<typeof formSchema>) {
    createOrganization.mutate(values, {
      onSuccess: (data) => {
        setOrgId(data.organization.id)
        navigate("/dashboard")
      },
    })
  }

  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <div className="w-full max-w-md space-y-8">
        <div className="space-y-2 text-center">
          <div className="inline-block p-3 rounded-full bg-primary/10 mb-3">
            <Building2Icon className="h-10 w-10 text-primary" />
          </div>
          <h1 className="text-3xl font-bold tracking-tight">
            Create your organization
          </h1>
          <p className="text-muted-foreground">
            Get started by creating your first organization.
          </p>
        </div>

        <div className="space-y-6 bg-card p-6 rounded-lg border">
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Organization name</FormLabel>
                    <FormControl>
                      <Input placeholder="Acme Inc." {...field} />
                    </FormControl>
                    <FormDescription>
                      This is your organization&apos;s visible name.
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="description"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Description</FormLabel>
                    <FormControl>
                      <Textarea
                        placeholder="Tell us a little bit about your organization..."
                        className="resize-none"
                        {...field}
                      />
                    </FormControl>
                    <FormDescription>
                      A brief description of your organization&apos;s purpose.
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <Button
                type="submit"
                className="w-full"
                loading={createOrganization.isPending}
                disabled={createOrganization.isPending}
              >
                Create Organization
              </Button>
            </form>
          </Form>
        </div>
      </div>
    </div>
  )
}