"use client"

import { use, useCallback, useEffect, 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 { QueryState } from "@/components/api/query-state"
import { EditDangerSection } from "@/components/edit-danger-section"
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 { deleteRole, fetchRole, updateRole } 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({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
  const t = useTranslations("Roles.Create")
  const tEdit = useTranslations("Roles.Edit")
  const tc = useTranslations("Common")
  const tNav = useTranslations("Nav")
  const router = useRouter()

  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<Error | null>(null)
  const [saving, setSaving] = useState(false)
  const [deleting, setDeleting] = useState(false)
  const [headerName, setHeaderName] = useState("")

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

  const permissionType = form.watch("permissionType")

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

  const load = useCallback(async () => {
    setLoading(true)
    setError(null)
    try {
      const role = await fetchRole(id)
      reset({
        name: role.name,
        description: role.description,
        permissionType: role.permissionType,
        permissions: role.permissions,
      })
      setHeaderName(role.name)
    } catch (e) {
      setError(e instanceof Error ? e : new Error(String(e)))
    } finally {
      setLoading(false)
    }
  }, [id, reset])

  useEffect(() => {
    const timer = setTimeout(() => {
      void load()
    }, 0)
    return () => clearTimeout(timer)
  }, [load])

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

  const handleDelete = async () => {
    setDeleting(true)
    try {
      await deleteRole(id)
      toast.success(tEdit("toast.deleted"))
      router.back()
    } catch (e) {
      if (e instanceof ApiError) {
        toast.error(e.message)
      } else {
        toast.error(tc("api.errorFallback"))
      }
    } finally {
      setDeleting(false)
    }
  }

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

      <QueryState isLoading={loading} isError={Boolean(error)} error={error}>
        <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 {...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>

            <EditDangerSection
              sectionTitle={tEdit("sections.dangerZone")}
              actionTitle={tEdit("danger.deleteTitle")}
              actionDescription={tEdit("danger.deleteDescription")}
              confirmMessage={tEdit("confirm.delete", {
                name: headerName || id,
              })}
              actionLabel={tc("actions.delete")}
              disabled={deleting || loading || saving}
              isPending={deleting}
              onDelete={handleDelete}
            />

            <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={saving}>
                  {tc("actions.saveChanges")}
                </Button>
              </div>
            </div>
          </form>
        </Form>
      </QueryState>
    </div>
  )
}