import { defineRouteConfig } from "@medusajs/admin-sdk"
import { CloudSolid } from "@medusajs/icons"
import { Container, Heading, Button, Text, toast, Label, Textarea } from "@medusajs/ui"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { useState, useEffect } from "react"
import { sdk } from "../../lib/sdk"
import { useTranslation } from "react-i18next"

type AnalyticsScripts = {
  id: string
  header_scripts: string | null
  body_scripts: string | null
  footer_scripts: string | null
  is_active: boolean
}

export const config = defineRouteConfig({
  label: "adminRoutes.analyticsScripts.title",
  translationNs: "translation",
  icon: CloudSolid,
  rank: 52,
})

export default function AnalyticsScriptsPage() {
  const { t } = useTranslation()
  const qc = useQueryClient()
  const [form, setForm] = useState({
    header_scripts: "",
    body_scripts: "",
    footer_scripts: "",
    is_active: true,
  })
  const [originalForm, setOriginalForm] = useState({
    header_scripts: "",
    body_scripts: "",
    footer_scripts: "",
    is_active: true,
  })

  const { data, isLoading } = useQuery({
    queryKey: ["admin", "analytics-scripts"],
    queryFn: async () => {
      const r = await sdk.fetch("/admin/analytics-scripts")
      if (!r.ok) throw new Error(t("adminRoutes.analyticsScripts.loadError"))
      return r.json() as Promise<{ scripts: AnalyticsScripts }>
    },
  })

  useEffect(() => {
    if (data?.scripts) {
      const newForm = {
        header_scripts: data.scripts.header_scripts || "",
        body_scripts: data.scripts.body_scripts || "",
        footer_scripts: data.scripts.footer_scripts || "",
        is_active: data.scripts.is_active ?? true,
      }
      setForm(newForm)
      setOriginalForm(newForm)
    }
  }, [data])

  const hasChanges =
    form.header_scripts !== originalForm.header_scripts ||
    form.body_scripts !== originalForm.body_scripts ||
    form.footer_scripts !== originalForm.footer_scripts ||
    form.is_active !== originalForm.is_active

  const saveMutation = useMutation({
    mutationFn: async () => {
      const r = await sdk.fetch("/admin/analytics-scripts", {
        method: "POST",
        body: JSON.stringify(form),
        headers: { "Content-Type": "application/json" },
      })
      if (!r.ok) throw new Error(await r.text())
      return r.json()
    },
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["admin", "analytics-scripts"] })
      toast.success(t("adminRoutes.analyticsScripts.saveSuccess"))
    },
    onError: (e) => toast.error((e as Error).message || t("adminRoutes.analyticsScripts.saveError")),
  })

  if (isLoading) {
    return (
      <Container className="px-3 sm:px-4">
        <p className="text-ui-fg-subtle">{t("adminRoutes.common.loading")}</p>
      </Container>
    )
  }

  return (
    <Container className="px-3 sm:px-4 max-w-4xl">
      <div className="py-4 sm:py-6">
        <Heading level="h1" className="text-xl sm:text-2xl">
          {t("adminRoutes.analyticsScripts.title")}
        </Heading>
        <Text size="small" className="text-ui-fg-subtle mt-1">
          {t("adminRoutes.analyticsScripts.subtitle")}
        </Text>
      </div>

      <div className="flex flex-col gap-y-6">
        <div className="flex flex-col gap-y-2">
          <Label htmlFor="header-scripts">{t("adminRoutes.analyticsScripts.headerLabel")}</Label>
          <Textarea
            id="header-scripts"
            value={form.header_scripts}
            onChange={(e) => setForm({ ...form, header_scripts: e.target.value })}
            placeholder={t("adminRoutes.analyticsScripts.scriptPlaceholder")}
            rows={6}
            className="font-mono text-sm"
          />
          <Text size="small" className="text-ui-fg-subtle">
            {t("adminRoutes.analyticsScripts.headerHint")}
          </Text>
        </div>

        <div className="flex flex-col gap-y-2">
          <Label htmlFor="body-scripts">{t("adminRoutes.analyticsScripts.bodyLabel")}</Label>
          <Textarea
            id="body-scripts"
            value={form.body_scripts}
            onChange={(e) => setForm({ ...form, body_scripts: e.target.value })}
            placeholder={t("adminRoutes.analyticsScripts.scriptPlaceholder")}
            rows={6}
            className="font-mono text-sm"
          />
          <Text size="small" className="text-ui-fg-subtle">
            {t("adminRoutes.analyticsScripts.bodyHint")}
          </Text>
        </div>

        <div className="flex flex-col gap-y-2">
          <Label htmlFor="footer-scripts">{t("adminRoutes.analyticsScripts.footerLabel")}</Label>
          <Textarea
            id="footer-scripts"
            value={form.footer_scripts}
            onChange={(e) => setForm({ ...form, footer_scripts: e.target.value })}
            placeholder={t("adminRoutes.analyticsScripts.scriptPlaceholder")}
            rows={6}
            className="font-mono text-sm"
          />
          <Text size="small" className="text-ui-fg-subtle">
            {t("adminRoutes.analyticsScripts.footerHint")}
          </Text>
        </div>

        <div className="flex justify-end">
          <Button
            size="small"
            onClick={() => saveMutation.mutate()}
            isLoading={saveMutation.isPending}
            disabled={!hasChanges || saveMutation.isPending}
          >
            {t("adminRoutes.analyticsScripts.save")}
          </Button>
        </div>
      </div>
    </Container>
  )
}