"use client"

import { use, useCallback, useEffect, useState } from "react"

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 { StatusSwitch } from "@/components/status-switch-field"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ApiError } from "@/lib/api/errors"
import {
  fetchTenant,
  permanentDeleteTenantCatalog,
  type TenantDetail,
} from "@/lib/api/tenants"
import { Link, useRouter } from "@/i18n/navigation"

export default function Page({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id: tenantId } = use(params)
  const t = useTranslations("Tenants.Detail")
  const tEdit = useTranslations("Tenants.Edit")
  const tc = useTranslations("Common")
  const router = useRouter()

  const [tenant, setTenant] = useState<TenantDetail | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<Error | null>(null)
  const [deletingCatalog, setDeletingCatalog] = useState(false)

  const load = useCallback(async () => {
    setLoading(true)
    setError(null)
    try {
      const data = await fetchTenant(tenantId)
      setTenant(data)
    } catch (e) {
      setTenant(null)
      setError(e instanceof Error ? e : new Error(String(e)))
    } finally {
      setLoading(false)
    }
  }, [tenantId])

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

  return (
    <div className="flex flex-col gap-4 md:gap-6 py-4 md:py-6">
      <PageHeader
        title={t("title", { name: tenant?.name ?? `#${tenantId}` })}
        actions={
          <div className="flex flex-wrap items-center gap-2">
            <Button variant="outline" asChild>
              <Link href={`/tenants/${tenantId}/edit`}>{tc("actions.edit")}</Link>
            </Button>
            <Button type="button" onClick={() => router.back()}>
              {tc("actions.back")}
            </Button>
          </div>
        }
      />

      <QueryState isLoading={loading} isError={Boolean(error)} error={error}>
        {tenant ? (
          <div className="gap-6 grid px-4 lg:px-6">
            <FormSection title={t("sections.configuration")}>
              <div className="gap-6 grid">
                <div className="gap-3 grid sm:grid-cols-2 xl:grid-cols-3">
                  <StatusSwitch
                    checked={tenant.isActive}
                    disabled
                    label={t("labels.status")}
                    description={
                      tenant.isActive ? t("state.active") : t("state.inactive")
                    }
                  />
                  <StatusSwitch
                    checked={tenant.realStore}
                    disabled
                    label={t("labels.realTenant")}
                    description={
                      tenant.realStore ? t("state.checked") : t("state.inactive")
                    }
                  />
                  <StatusSwitch
                    checked={tenant.poweredByMarkatty}
                    disabled
                    label={t("labels.poweredByMarkatty")}
                    description={
                      tenant.poweredByMarkatty
                        ? t("state.active")
                        : t("state.inactive")
                    }
                  />
                  <StatusSwitch
                    checked={tenant.devTenant}
                    disabled
                    label={t("labels.devTenant")}
                    description={
                      tenant.devTenant ? t("state.active") : t("state.inactive")
                    }
                  />
                  <StatusSwitch
                    checked={tenant.advancedOrderActions}
                    disabled
                    label={t("labels.advancedOrderActions")}
                    description={
                      tenant.advancedOrderActions
                        ? t("state.active")
                        : t("state.inactive")
                    }
                  />
                </div>

                <div className="gap-4 grid md:grid-cols-2">
                  <div className="gap-2 grid">
                    <span className="font-medium text-sm">{t("labels.name")}</span>
                    <Input value={tenant.name} readOnly aria-label={t("labels.name")} />
                  </div>
                  <div className="gap-2 grid">
                    <span className="font-medium text-sm">{t("labels.username")}</span>
                    <Input
                      value={tenant.username}
                      readOnly
                      aria-label={t("labels.username")}
                    />
                  </div>
                  <div className="gap-2 grid">
                    <span className="font-medium text-sm">{t("labels.email")}</span>
                    <Input value={tenant.email} readOnly aria-label={t("labels.email")} />
                  </div>
                  <div className="gap-2 grid">
                    <span className="font-medium text-sm">{t("labels.domain")}</span>
                    <Input value={tenant.domain} readOnly aria-label={t("labels.domain")} />
                  </div>
                  <div className="gap-2 grid">
                    <span className="font-medium text-sm">{t("labels.cname")}</span>
                    <Input
                      value={tenant.cname || "—"}
                      readOnly
                      aria-label={t("labels.cname")}
                    />
                  </div>
                  <div className="gap-2 grid">
                    <span className="font-medium text-sm">{t("labels.createdAt")}</span>
                    <Input
                      value={tenant.createdAt || "—"}
                      readOnly
                      aria-label={t("labels.createdAt")}
                    />
                  </div>
                  <div className="gap-2 grid">
                    <span className="font-medium text-sm">{t("labels.updatedAt")}</span>
                    <Input
                      value={tenant.updatedAt || "—"}
                      readOnly
                      aria-label={t("labels.updatedAt")}
                    />
                  </div>
                </div>
              </div>
            </FormSection>

            <FormSection title={t("sections.dangerZone")}>
              <div className="flex md:flex-row flex-col md:justify-between md:items-center gap-3">
                <div className="gap-1 grid">
                  <span className="font-medium">{t("actions.deleteProductsAndCategories")}</span>
                  <span className="text-muted-foreground text-sm">
                    {t("help.deleteProductsAndCategoriesOnly")}
                  </span>
                </div>
                <Button
                  variant="destructive"
                  type="button"
                  disabled={deletingCatalog}
                  onClick={async () => {
                    if (!window.confirm(tEdit("confirm.deleteCatalog"))) return
                    setDeletingCatalog(true)
                    try {
                      await permanentDeleteTenantCatalog(tenantId)
                      toast.success(tEdit("toast.catalogDeleted"))
                    } catch (e) {
                      toast.error(
                        e instanceof ApiError ? e.message : tc("api.errorFallback")
                      )
                    } finally {
                      setDeletingCatalog(false)
                    }
                  }}
                >
                  {deletingCatalog
                    ? tc("api.deleting")
                    : t("actions.deleteProductsAndCategories")}
                </Button>
              </div>
            </FormSection>
          </div>
        ) : null}
      </QueryState>
    </div>
  )
}