"use client"

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

import { QueryState } from "@/components/api/query-state"
import { FormSection } from "@/components/form-section"
import { PageHeader } from "@/components/page-header"
import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Textarea } from "@/components/ui/textarea"
import {
  useAnalyticsScripts,
  useUpdateAnalyticsScripts,
} from "@/hooks/api/use-analytics-scripts"
import { ApiError } from "@/lib/api/errors"

const schema = z.object({
  scripts: z.string(),
})

type FormValues = z.infer<typeof schema>

function AnalyticsScriptsForm({ analytics }: { analytics: string }) {
  const t = useTranslations("AnalyticsScripts")
  const tc = useTranslations("Common")
  const updateScripts = useUpdateAnalyticsScripts()

  const form = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: { scripts: analytics },
  })

  const { reset } = form

  useEffect(() => {
    reset({ scripts: analytics })
  }, [analytics, reset])

  const showApiError = (e: unknown) => {
    toast.error(e instanceof ApiError ? e.message : tc("api.errorFallback"))
  }

  async function onSubmit(values: FormValues) {
    try {
      await updateScripts.mutateAsync({ analytics: values.scripts })
      toast.success(t("toast.saved"))
    } catch (e) {
      showApiError(e)
    }
  }

  return (
    <Form {...form}>
      <form className="grid gap-6" onSubmit={form.handleSubmit(onSubmit)}>
        <FormSection title={t("sectionTitle")}>
          <div className="grid gap-4">
            <FormField
              control={form.control}
              name="scripts"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>{t("labels.scripts")}</FormLabel>
                  <FormControl>
                    <Textarea
                      rows={16}
                      className="min-h-64 font-mono text-sm"
                      spellCheck={false}
                      placeholder={t("placeholders.scripts")}
                      {...field}
                    />
                  </FormControl>
                  <FormDescription>{t("help.scriptsOnly")}</FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>
        </FormSection>

        <div className="px-4 lg:px-6">
          <div className="flex items-center justify-end gap-2">
            <Button type="submit" disabled={updateScripts.isPending}>
              {updateScripts.isPending ? tc("api.saving") : t("actions.saveScripts")}
            </Button>
          </div>
        </div>
      </form>
    </Form>
  )
}

export default function Page() {
  const t = useTranslations("AnalyticsScripts")
  const { data, isLoading, isError, error } = useAnalyticsScripts()

  return (
    <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
      <PageHeader title={t("title")} description={t("description")} />

      <QueryState isLoading={isLoading} isError={isError} error={error}>
        {data ? <AnalyticsScriptsForm analytics={data.analytics} /> : null}
      </QueryState>
    </div>
  )
}