import { defineRouteConfig } from "@medusajs/admin-sdk"
import { EnvelopeSolid } from "@medusajs/icons"
import { Container, Heading } from "@medusajs/ui"
import { useQuery } from "@tanstack/react-query"
import { sdk } from "../../lib/sdk"
import { useTranslation } from "react-i18next"

type Inquiry = {
  id: string
  name_or_company: string
  email: string
  phone: string
  country: string
  company: string | null
  inquiry_type: string
  needs_description?: string | null
  privacy_accepted: boolean
  created_at: string
}

export const config = defineRouteConfig({
  label: "adminRoutes.contactInquiries.title",
  translationNs: "translation",
  icon: EnvelopeSolid,
  rank: 40,
})

function formatDate(iso: string) {
  try {
    const d = new Date(iso)
    return d.toLocaleString()
  } catch {
    return iso
  }
}

export default function ContactInquiriesPage() {
  const { t } = useTranslation()
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ["admin", "contact-inquiries"],
    queryFn: async () => {
      const r = await sdk.fetch("/admin/contact-inquiries")
      if (!r.ok) {
        const text = await r.text()
        throw new Error(
          r.status === 401
            ? t("adminRoutes.common.loginRequired")
            : text || t("adminRoutes.contactInquiries.loadError")
        )
      }
      const json = await r.json()
      const list = json?.inquiries
      return { inquiries: Array.isArray(list) ? list : [] }
    },
  })

  const inquiries = data?.inquiries ?? []

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

      {isLoading && <p className="text-ui-fg-subtle">{t("adminRoutes.common.loading")}</p>}
      {isError && (
        <p className="text-red-600 py-4">
          {(error as Error)?.message ?? t("adminRoutes.contactInquiries.loadError")}
        </p>
      )}
      {!isLoading && !isError && inquiries.length === 0 && (
        <p className="text-ui-fg-subtle py-8">{t("adminRoutes.contactInquiries.empty")}</p>
      )}

      {!isLoading && !isError && inquiries.length > 0 && (
        <div className="overflow-x-auto border border-ui-border-base rounded-lg">
          <table className="w-full text-left text-sm min-w-[980px]">
            <thead>
              <tr className="border-b border-ui-border-base bg-ui-bg-subtle">
                <th className="p-3 font-medium">{t("adminRoutes.contactInquiries.columns.nameCompany")}</th>
                <th className="p-3 font-medium">{t("adminRoutes.contactInquiries.columns.email")}</th>
                <th className="p-3 font-medium">{t("adminRoutes.contactInquiries.columns.phone")}</th>
                <th className="p-3 font-medium">{t("adminRoutes.contactInquiries.columns.country")}</th>
                <th className="p-3 font-medium">{t("adminRoutes.contactInquiries.columns.company")}</th>
                <th className="p-3 font-medium">{t("adminRoutes.contactInquiries.columns.inquiryType")}</th>
                <th className="p-3 font-medium">{t("adminRoutes.contactInquiries.columns.message")}</th>
                <th className="p-3 font-medium">{t("adminRoutes.contactInquiries.columns.privacy")}</th>
                <th className="p-3 font-medium">{t("adminRoutes.contactInquiries.columns.submitted")}</th>
              </tr>
            </thead>
            <tbody>
              {inquiries.map((row) => (
                <tr
                  key={row.id}
                  className="border-b border-ui-border-base last:border-0"
                >
                  <td className="p-3">{row.name_or_company}</td>
                  <td className="p-3">{row.email}</td>
                  <td className="p-3">{row.phone}</td>
                  <td className="p-3">{row.country}</td>
                  <td className="p-3">{row.company ?? "-"}</td>
                  <td className="p-3">{row.inquiry_type}</td>
                  <td className="p-3 max-w-[360px] whitespace-normal break-words">
                    {row.needs_description ?? "-"}
                  </td>
                  <td className="p-3">{row.privacy_accepted ? t("adminRoutes.common.yes") : t("adminRoutes.common.no")}</td>
                  <td className="p-3 text-ui-fg-subtle">
                    {formatDate(row.created_at)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </Container>
  )
}