import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/shared/common/ui/dialog";
import { Button } from "@/shared/common/ui/button";
import { Badge } from "@/shared/common/ui/badge";
import { useTranslation } from "react-i18next";
import { SiteDto } from "@/super-admin/dto/SitesDto";

interface SiteViewModalProps {
  isOpen: boolean;
  onClose: () => void;
  site?: SiteDto | null;
}

export default function SiteViewModal({
  isOpen,
  onClose,
  site,
}: SiteViewModalProps) {
  const { t } = useTranslation();
  if (!site) return null;

  const isActive = site.status === "Active" || site.status !== "Archived";

  return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle className="text-xl font-bold text-slate-800 dark:text-slate-100">
            {t("sites.view.title")}
          </DialogTitle>
        </DialogHeader>

        <div className="py-2 space-y-4">
          {/* Detail cards */}
          <div className="grid grid-cols-2 gap-4">
            <div className="col-span-2 p-3 bg-slate-50 dark:bg-slate-900 rounded-lg space-y-1">
              <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
                 {t("sites.view.nameEn")}
              </span>
              <p className="text-base font-semibold text-slate-800 dark:text-slate-100">
                {site.name?.en || "-"}
              </p>
            </div>

            <div className="col-span-2 p-3 bg-slate-50 dark:bg-slate-900 rounded-lg space-y-1">
              <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
                 {t("sites.view.nameAm")}
              </span>
              <p className="text-base font-semibold text-slate-800 dark:text-slate-100">
                {site.name?.am || "-"}
              </p>
            </div>

            <div className="p-3 bg-slate-50 dark:bg-slate-900 rounded-lg space-y-1">
              <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
                 {t("sites.view.siteKey")}
              </span>
              <p className="text-base font-mono text-slate-800 dark:text-slate-100 truncate" title={site.key}>
                {site.key || "-"}
              </p>
            </div>

            <div className="p-3 bg-slate-50 dark:bg-slate-900 rounded-lg space-y-1">
              <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
                 {t("sites.view.status")}
              </span>
              <div>
                <Badge
                  className={`${
                    isActive
                      ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-300 hover:bg-emerald-100 dark:hover:bg-emerald-950/40"
                      : "bg-amber-100 text-amber-800 dark:bg-amber-950/40 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-950/40"
                  } rounded-full px-3 py-0.5 font-medium border-none`}
                >
                  {site.status || "Active"}
                </Badge>
              </div>
            </div>

            <div className="col-span-2 p-3 bg-slate-50 dark:bg-slate-900 rounded-lg space-y-1">
              <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
                 {t("sites.view.domain")}
              </span>
              <p className="text-base font-semibold text-slate-800 dark:text-slate-100 truncate" title={site.domain}>
                {site.domain || "-"}
              </p>
            </div>
          </div>
        </div>

        <DialogFooter className="border-t pt-4">
            <Button onClick={onClose} className="w-full sm:w-auto">
              {t("sites.view.close")}
            </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
