"use client"

import { useState, type ReactNode } from "react"
import { useTranslations, useLocale } from "next-intl"
import { Eye } from "lucide-react"

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogTrigger,
} from "@/shared/components/ui/dialog"
import { Button } from "@/shared/components/ui/button"
import { formatDate } from "@/shared/lib/utils"
import type {
  AuditLog,
  LoginLog,
  DataChangeLog,
} from "@/modules/audit/types"

interface AuditLogDetailDialogProps {
  type: "audit"
  item: AuditLog
  trigger?: ReactNode
}

interface LoginLogDetailDialogProps {
  type: "login"
  item: LoginLog
  trigger?: ReactNode
}

interface DataChangeLogDetailDialogProps {
  type: "dataChange"
  item: DataChangeLog
  trigger?: ReactNode
}

type DetailDialogProps =
  | AuditLogDetailDialogProps
  | LoginLogDetailDialogProps
  | DataChangeLogDetailDialogProps

interface DetailRowProps {
  label: string
  value: string | null | undefined
}

function DetailRow({ label, value }: DetailRowProps): ReactNode {
  return (
    <div className="grid grid-cols-3 gap-2 py-2 border-b border-border last:border-0">
      <dt className="text-sm font-medium text-muted-foreground">{label}</dt>
      <dd className="col-span-2 text-sm break-all">{value ?? "-"}</dd>
    </div>
  )
}

export function AuditLogDetailDialog(props: DetailDialogProps): ReactNode {
  const t = useTranslations("audit")
  const locale = useLocale()
  const [open, setOpen] = useState(false)

  const renderRows = (): ReactNode => {
    if (props.type === "audit") {
      const log = props.item
      return (
        <>
          <DetailRow label={t("detail.userId")} value={log.userId} />
          <DetailRow label={t("detail.userName")} value={log.userName} />
          <DetailRow label={t("detail.action")} value={log.action} />
          <DetailRow label={t("detail.module")} value={log.module} />
          <DetailRow label={t("detail.targetId")} value={log.targetId} />
          <DetailRow label={t("detail.targetType")} value={log.targetType} />
          <DetailRow label={t("detail.detail")} value={log.detail} />
          <DetailRow label={t("detail.ipAddress")} value={log.ipAddress} />
          <DetailRow label={t("detail.userAgent")} value={log.userAgent} />
          <DetailRow label={t("detail.status")} value={log.status} />
          <DetailRow
            label={t("detail.createdAt")}
            value={formatDate(log.createdAt, locale)}
          />
        </>
      )
    }
    if (props.type === "login") {
      const log = props.item
      return (
        <>
          <DetailRow label={t("detail.userId")} value={log.userId} />
          <DetailRow label={t("detail.userName")} value={log.userEmail} />
          <DetailRow label={t("detail.action")} value={log.action} />
          <DetailRow label={t("detail.status")} value={log.status} />
          <DetailRow label={t("detail.ipAddress")} value={log.ipAddress} />
          <DetailRow label={t("detail.userAgent")} value={log.userAgent} />
          <DetailRow label={t("detail.errorMessage")} value={log.errorMessage} />
          <DetailRow
            label={t("detail.createdAt")}
            value={formatDate(log.createdAt, locale)}
          />
        </>
      )
    }
    const log = props.item
    return (
      <>
        <DetailRow label={t("detail.tableName")} value={log.tableName} />
        <DetailRow label={t("detail.recordId")} value={log.recordId} />
        <DetailRow label={t("detail.action")} value={log.action} />
        <DetailRow label={t("detail.changedBy")} value={log.changedByName} />
        <DetailRow label={t("detail.oldValue")} value={log.oldValue} />
        <DetailRow label={t("detail.newValue")} value={log.newValue} />
        <DetailRow label={t("detail.ipAddress")} value={log.ipAddress} />
        <DetailRow
          label={t("detail.createdAt")}
          value={formatDate(log.createdAt, locale)}
        />
      </>
    )
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        {props.trigger ?? (
          <Button variant="ghost" size="sm" aria-label={t("detail.viewDetail")}>
            <Eye className="h-4 w-4" />
          </Button>
        )}
      </DialogTrigger>
      <DialogContent className="max-w-lg max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>{t("detail.title")}</DialogTitle>
          <DialogDescription className="sr-only">
            {t("detail.description")}
          </DialogDescription>
        </DialogHeader>
        <dl className="mt-2">{renderRows()}</dl>
      </DialogContent>
    </Dialog>
  )
}
