"use client"

import { useMemo, useState } from "react"
import { z } from "zod"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { useTranslations } from "next-intl"
import { toast } from "sonner"

import { AclTree, buildAclNodes } from "@/components/acl-tree"
import { FormSection } from "@/components/form-section"
import { PageHeader } from "@/components/page-header"
import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { ApiError } from "@/lib/api/errors"
import { createRole } from "@/lib/api/roles"
import { Link, useRouter } from "@/i18n/navigation"

const schema = z.object({
  name: z.string().min(2, "Name is required."),
  description: z.string().optional(),
  permissionType: z.enum(["custom", "all"]),
  permissions: z.array(z.string()),
})

export default function Page() {
  const t = useTranslations("Roles.Create")
  const tc = useTranslations("Common")
  const tNav = useTranslations("Nav")
  const router = useRouter()
  const [submitting, setSubmitting] = useState(false)

  const form = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: {
      name: "",
      description: "",
      permissionType: "custom",
      permissions: [],
    },
  })

  const permissionType = form.watch("permissionType")

  const acl = useMemo(
    () => buildAclNodes({ tNav, tCommon: tc }),
    [tNav, tc]
  )

  const handleSubmit = async (values: z.infer<typeof schema>) => {
    setSubmitting(true)
    try {
      await createRole({
        name: values.name.trim(),
        description: values.description?.trim() ?? "",
        permissionType: values.permissionType,
        permissions: values.permissionType === "all" ? [] : values.permissions,
      })
      toast.success(t("toast.created"))
      router.back()
    } catch (e) {
      if (e instanceof ApiError) {
        toast.error(e.message)
      } else {
        toast.error(tc("api.errorFallback"))
      }
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div className="flex flex-col gap-4 md:gap-6 py-4 md:py-6">
      <PageHeader
        title={t("title")}
        actions={
          <Button variant="outline" type="button" onClick={() => router.back()}>
            {tc("actions.back")}
          </Button>
        }
      />

      <Form {...form}>
        <form
          className="gap-6 grid"
          onSubmit={form.handleSubmit(handleSubmit)}
        >
          <FormSection title={t("sections.general")}>
            <div className="gap-4 grid md:grid-cols-2">
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem className="md:col-span-2">
                    <FormLabel>{t("labels.name")}</FormLabel>
                    <FormControl>
                      <Input placeholder={t("placeholders.name")} {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="description"
                render={({ field }) => (
                  <FormItem className="md:col-span-2">
                    <FormLabel>{t("labels.description")}</FormLabel>
                    <FormControl>
                      <Textarea
                        placeholder={t("placeholders.description")}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
          </FormSection>

          <FormSection title={t("sections.accessControl")}>
            <div className="gap-4 grid">
              <FormField
                control={form.control}
                name="permissionType"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t("labels.permissions")}</FormLabel>
                    <Select value={field.value} onValueChange={field.onChange}>
                      <FormControl>
                        <SelectTrigger className="w-full sm:max-w-xs">
                          <SelectValue />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="custom">
                          {t("permissionTypes.custom")}
                        </SelectItem>
                        <SelectItem value="all">
                          {t("permissionTypes.all")}
                        </SelectItem>
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {permissionType === "custom" ? (
                <FormField
                  control={form.control}
                  name="permissions"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t("labels.selectPermissions")}</FormLabel>
                      <FormControl>
                        <div className="bg-background p-4 border rounded-lg">
                          <AclTree
                            nodes={acl}
                            value={field.value ?? []}
                            onChange={field.onChange}
                          />
                        </div>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              ) : (
                <div className="bg-muted/30 p-4 border rounded-lg text-muted-foreground text-sm">
                  {t("fullAccessNote")}
                </div>
              )}
            </div>
          </FormSection>

          <div className="px-4 lg:px-6">
            <div className="flex justify-end items-center gap-2">
              <Button variant="outline" type="button" onClick={() => router.back()}>
                {tc("actions.cancel")}
              </Button>
              <Button type="submit" disabled={submitting}>
                {t("actions.createRole")}
              </Button>
            </div>
          </div>
        </form>
      </Form>
    </div>
  )
}