"use client";

import { useState } from "react";
import { useLocale, useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useQueryClient } from "@tanstack/react-query";
import { BaseModal } from "@/components/modal";
import DynamicButton from "@/components/button";
import { useAppToast } from "@/app/[lang]/providers";
import { useSession } from "@/auth/session-provider";
import { API_BASE_URL } from "@/lib/axios";
import type {
  DashboardSingleAuction,
  SingleAuctionDetails,
} from "@/actions/group-auctions";

interface Props {
  items: DashboardSingleAuction[];
  groupAuctionId: string;
}

export default function MyGroupAuctionHorsesTable({
  items,
  groupAuctionId,
}: Props) {
  const t = useTranslations("DASHBOARD.GROUP_AUCTION_HORSES");
  const tToast = useTranslations("TOAST");
  const locale = useLocale();
  const router = useRouter();
  const queryClient = useQueryClient();
  const toast = useAppToast();
  const session = useSession();
  const isAr = locale === "ar";

  const [selectedItem, setSelectedItem] =
    useState<DashboardSingleAuction | null>(null);
  const [detailsData, setDetailsData] = useState<SingleAuctionDetails | null>(
    null,
  );
  const [actionModalOpen, setActionModalOpen] = useState(false);
  const [detailsModalOpen, setDetailsModalOpen] = useState(false);
  const [withdrawModalOpen, setWithdrawModalOpen] = useState(false);
  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
  const [withdrawing, setWithdrawing] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [loadingDetails, setLoadingDetails] = useState(false);

  const formatStatus = (status: string) => {
    const mapAr: Record<string, string> = {
      pending: "قادم",
      accepted: "مقبول",
      rejected: "مرفوض",
      upcoming: "قادم",
      active: "نشط",
      ended: "منتهي",
      withdrawn: "مسحوب",
      closed: "مغلق",
      finished: "منتهي",
      live: "مباشر",
    };
    const mapEn: Record<string, string> = {
      pending: "Pending",
      accepted: "Accepted",
      rejected: "Rejected",
      upcoming: "Upcoming",
      active: "Active",
      ended: "Ended",
      withdrawn: "Withdrawn",
      closed: "Closed",
      finished: "Finished",
      live: "Live",
    };
    const v = String(status || "").toLowerCase();
    return (isAr ? mapAr[v] : mapEn[v]) || status || "—";
  };

  const statusBadgeClass = (raw: string) => {
    const v = String(raw || "").toLowerCase();
    if (v === "live" || v === "active" || v === "running") {
      return "bg-red-500 text-white";
    }
    if (v === "upcoming") {
      return "bg-amber-100 text-amber-700";
    }
    if (v === "pending") {
      return "bg-amber-50 text-amber-700";
    }
    if (v === "accepted") {
      return "bg-emerald-50 text-emerald-700";
    }
    if (
      v === "ended" ||
      v === "finished" ||
      v === "closed" ||
      v === "withdrawn"
    ) {
      return "bg-slate-100 text-slate-600";
    }
    if (v === "rejected") {
      return "bg-red-100 text-red-700";
    }
    return "bg-slate-50 text-slate-700";
  };

  const openActionModal = (item: DashboardSingleAuction) => {
    setSelectedItem(item);
    setActionModalOpen(true);
  };

  const closeActionModal = () => {
    setActionModalOpen(false);
    setSelectedItem(null);
  };

  const openWithdrawModal = () => {
    setActionModalOpen(false);
    setWithdrawModalOpen(true);
  };

  const closeWithdrawModal = () => {
    setWithdrawModalOpen(false);
    setSelectedItem(null);
  };

  const openDeleteModal = () => {
    setActionModalOpen(false);
    setDeleteModalOpen(true);
  };

  const closeDeleteModal = () => {
    setDeleteModalOpen(false);
    setSelectedItem(null);
  };

  const closeDetailsModal = () => {
    setDetailsModalOpen(false);
    setDetailsData(null);
    setSelectedItem(null);
  };

  const handleViewDetails = async (item: DashboardSingleAuction) => {
    setSelectedItem(item);
    setLoadingDetails(true);
    setDetailsModalOpen(true);
    try {
      const res = await fetch(
        `${API_BASE_URL}/user/dashboard/single-auctions/${item.id}`,
        {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${session?.access_token}`,
          },
        },
      );
      if (res.ok) {
        const data = await res.json();
        setDetailsData(data.data);
      } else {
        toast.error(tToast("dashboard_load_details_failed"));
        closeDetailsModal();
      }
    } catch (e) {
      toast.error(tToast("dashboard_generic_error"));
      closeDetailsModal();
    } finally {
      setLoadingDetails(false);
    }
  };

  const handleWithdraw = async () => {
    if (!selectedItem) return;
    setWithdrawing(true);
    try {
      const res = await fetch(
        `${API_BASE_URL}/user/dashboard/single-auctions/${selectedItem.id}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${session?.access_token}`,
          },
          body: JSON.stringify({ _method: "put", status: "withdrawn" }),
        },
      );
      if (res.ok) {
        toast.success(tToast("dashboard_withdraw_success"));
        queryClient.invalidateQueries({
          queryKey: ["dashboard-group-single-auctions"],
        });
        router.refresh();
      } else {
        toast.error(tToast("dashboard_withdraw_failed"));
      }
    } catch (e) {
      toast.error(tToast("dashboard_generic_error"));
    } finally {
      setWithdrawing(false);
      closeWithdrawModal();
    }
  };

  const handleDelete = async () => {
    if (!selectedItem) return;
    setDeleting(true);
    try {
      const res = await fetch(
        `${API_BASE_URL}/user/dashboard/single-auctions/${selectedItem.id}`,
        {
          method: "DELETE",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${session?.access_token}`,
          },
        },
      );
      if (res.ok) {
        toast.success(tToast("dashboard_delete_success"));
        queryClient.invalidateQueries({
          queryKey: ["dashboard-group-single-auctions"],
        });
        router.refresh();
      } else {
        toast.error(tToast("dashboard_delete_failed"));
      }
    } catch (e) {
      toast.error(tToast("dashboard_generic_error"));
    } finally {
      setDeleting(false);
      closeDeleteModal();
    }
  };

  const handleEdit = () => {
    if (!selectedItem) return;
    closeActionModal();
    router.push(
      `/${locale}/dashboard/my-group-auctions/${groupAuctionId}/edit/${selectedItem.id}`,
    );
  };

  const handleView = (item: DashboardSingleAuction) => {
    window.open(`/${locale}/annual-item/${item.id}`, "_blank");
  };

  const canWithdraw = (item: DashboardSingleAuction) => {
    const status = String(item.status || "").toLowerCase();
    const auctionState = String(item.auction_state || "").toLowerCase();
    return (
      item.can_edit_status &&
      (status === "pending" || status === "accepted") &&
      auctionState !== "active" &&
      auctionState !== "live"
    );
  };

  const canEdit = (item: DashboardSingleAuction) => {
    const status = String(item.status || "").toLowerCase();
    return (
      item.can_edit_status && (status === "pending" || status === "accepted")
    );
  };

  const canDelete = (item: DashboardSingleAuction) => {
    const status = String(item.status || "").toLowerCase();
    return item.can_edit_status && status === "pending";
  };

  if (items.length === 0) {
    return (
      <div className="bg-white rounded-2xl shadow-md border border-slate-100 p-8 text-center text-sm text-slate-500">
        {isAr ? "لا توجد خيول مسجلة" : "No horses found"}
      </div>
    );
  }

  return (
    <>
      <div className="bg-white rounded-2xl shadow-md border border-slate-100 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-sm min-w-[700px]">
            <thead>
              <tr className="bg-slate-50 text-xs text-slate-500">
                <th className="p-3 text-center font-semibold border-b border-slate-100 w-32">
                  {t("unique_id")}
                </th>
                <th className="p-3 text-start font-semibold border-b border-slate-100">
                  {t("details")}
                </th>
                <th className="p-3 text-center font-semibold border-b border-slate-100 w-40">
                  {t("status")}
                </th>
                <th className="p-3 text-center font-semibold border-b border-slate-100 w-40">
                  {t("actions")}
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {items.map((item) => {
                const name = item.animal?.name || "—";
                const fatherName = item.animal?.father_name;
                const motherName = item.animal?.mother_name;
                const dateOfBirth = item.animal?.date_of_birth;
                const imgUrl = item.main_image?.url || "";
                const displayStatus = item.auction_state || item.status;

                return (
                  <tr
                    key={item.id}
                    className="hover:bg-slate-50 transition-colors"
                  >
                    <td className="p-3 text-center align-middle font-extrabold text-slate-900 whitespace-nowrap">
                      {item.unique_id || "—"}
                    </td>
                    <td className="p-3 align-middle">
                      <div className="flex items-center gap-3">
                        {imgUrl ? (
                          <div className="w-16 h-12 rounded-lg overflow-hidden bg-slate-100 flex-shrink-0">
                            <img
                              src={imgUrl}
                              alt={name}
                              className="w-full h-full object-cover"
                            />
                          </div>
                        ) : (
                          <div className="w-16 h-12 rounded-lg bg-slate-100 flex items-center justify-center text-[10px] text-slate-400 flex-shrink-0">
                            {isAr ? "لا صورة" : "No img"}
                          </div>
                        )}
                        <div className="flex flex-col gap-0.5 min-w-0">
                          <div className="text-sm font-extrabold text-slate-900 truncate">
                            {name}
                          </div>
                          {fatherName && (
                            <div className="text-[11px] text-slate-500 truncate">
                              {(isAr ? "الأب" : "Father") + ": "}
                              {fatherName}
                            </div>
                          )}
                          {motherName && (
                            <div className="text-[11px] text-slate-500 truncate">
                              {(isAr ? "الأم" : "Mother") + ": "}
                              {motherName}
                            </div>
                          )}
                          {dateOfBirth && (
                            <div className="text-[11px] text-slate-500 truncate">
                              {(isAr ? "تاريخ الميلاد" : "DOB") + ": "}
                              {dateOfBirth}
                            </div>
                          )}
                        </div>
                      </div>
                    </td>
                    <td className="p-3 text-center align-middle">
                      <span
                        className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold ${statusBadgeClass(displayStatus)}`}
                      >
                        {formatStatus(displayStatus)}
                      </span>
                    </td>
                    <td className="p-3 text-center align-middle">
                      <div className="flex items-center justify-center gap-2">
                        <button
                          onClick={() => handleViewDetails(item)}
                          className="inline-flex items-center justify-center px-3 py-1.5 rounded-full text-xs font-semibold bg-slate-50 text-slate-700 hover:bg-slate-100 border border-slate-200"
                        >
                          {isAr ? "التفاصيل" : "Details"}
                        </button>
                        <button
                          onClick={() => handleView(item)}
                          className="inline-flex items-center justify-center px-3 py-1.5 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 hover:bg-emerald-100 border border-emerald-100"
                        >
                          {isAr ? "مشاهدة" : "View"}
                        </button>
                        {(canEdit(item) ||
                          canWithdraw(item) ||
                          canDelete(item)) && (
                          <button
                            onClick={() => openActionModal(item)}
                            className="inline-flex items-center justify-center px-3 py-1.5 rounded-full text-xs font-semibold bg-blue-50 text-blue-700 hover:bg-blue-100 border border-blue-100"
                          >
                            {isAr ? "إجراءات" : "Actions"}
                          </button>
                        )}
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {/* Actions Modal */}
      <BaseModal
        isOpen={actionModalOpen}
        onOpenChange={(open) => {
          if (!open) closeActionModal();
        }}
        placement="center"
        title={isAr ? "إجراءات المزاد" : "Auction Actions"}
        contentClassName="w-full max-w-[420px] rounded-xl"
      >
        {selectedItem && (
          <div className="space-y-4">
            <div className="text-center">
              <p className="font-bold text-lg">
                {selectedItem.animal?.name || "—"}
              </p>
              <p className="text-sm text-slate-500">{selectedItem.unique_id}</p>
            </div>
            <div className="flex flex-col gap-3">
              {canEdit(selectedItem) && (
                <DynamicButton
                  onClick={handleEdit}
                  className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg"
                >
                  <span className="flex items-center justify-center gap-2">
                    <svg
                      className="w-4 h-4"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                      />
                    </svg>
                    {isAr ? "تعديل البيانات" : "Edit Details"}
                  </span>
                </DynamicButton>
              )}
              {canWithdraw(selectedItem) && (
                <DynamicButton
                  onClick={openWithdrawModal}
                  className="w-full bg-amber-600 hover:bg-amber-700 text-white py-2 px-4 rounded-lg"
                >
                  <span className="flex items-center justify-center gap-2">
                    <svg
                      className="w-4 h-4"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M6 18L18 6M6 6l12 12"
                      />
                    </svg>
                    {isAr ? "سحب من المزاد" : "Withdraw from Auction"}
                  </span>
                </DynamicButton>
              )}
              {canDelete(selectedItem) && (
                <DynamicButton
                  onClick={openDeleteModal}
                  className="w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg"
                >
                  <span className="flex items-center justify-center gap-2">
                    <svg
                      className="w-4 h-4"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                      />
                    </svg>
                    {isAr ? "حذف" : "Delete"}
                  </span>
                </DynamicButton>
              )}
              <DynamicButton
                onClick={closeActionModal}
                className="w-full bg-slate-200 hover:bg-slate-300 text-slate-800 py-2 px-4 rounded-lg"
              >
                {isAr ? "إلغاء" : "Cancel"}
              </DynamicButton>
            </div>
          </div>
        )}
      </BaseModal>

      {/* Withdraw Confirmation Modal */}
      <BaseModal
        isOpen={withdrawModalOpen}
        onOpenChange={(open) => {
          if (!open) closeWithdrawModal();
        }}
        placement="center"
        title={isAr ? "تأكيد السحب" : "Confirm Withdrawal"}
        contentClassName="w-full max-w-[420px] rounded-xl"
        footer={
          <div className="flex w-full justify-end gap-2">
            <DynamicButton
              onClick={closeWithdrawModal}
              className="bg-slate-200 text-slate-800 py-2 px-4 rounded-lg"
              isDisabled={withdrawing}
            >
              {isAr ? "إلغاء" : "Cancel"}
            </DynamicButton>
            <DynamicButton
              onClick={handleWithdraw}
              className="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg"
              isDisabled={withdrawing}
            >
              {withdrawing ? "..." : isAr ? "تأكيد السحب" : "Confirm Withdraw"}
            </DynamicButton>
          </div>
        }
      >
        <div className="text-center space-y-3">
          <p className="font-bold text-lg">
            {selectedItem?.animal?.name || "—"}
          </p>
          <p className="text-sm text-slate-600">
            {isAr
              ? "هل أنت متأكد من رغبتك في سحب هذا الحيوان من المزاد؟ لا يمكن التراجع عن هذا الإجراء."
              : "Are you sure you want to withdraw this animal from the auction? This action cannot be undone."}
          </p>
        </div>
      </BaseModal>

      {/* Delete Confirmation Modal */}
      <BaseModal
        isOpen={deleteModalOpen}
        onOpenChange={(open) => {
          if (!open) closeDeleteModal();
        }}
        placement="center"
        title={isAr ? "تأكيد الحذف" : "Confirm Deletion"}
        contentClassName="w-full max-w-[420px] rounded-xl"
        footer={
          <div className="flex w-full justify-end gap-2">
            <DynamicButton
              onClick={closeDeleteModal}
              className="bg-slate-200 text-slate-800 py-2 px-4 rounded-lg"
              isDisabled={deleting}
            >
              {isAr ? "إلغاء" : "Cancel"}
            </DynamicButton>
            <DynamicButton
              onClick={handleDelete}
              className="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg"
              isDisabled={deleting}
            >
              {deleting ? "..." : isAr ? "تأكيد الحذف" : "Confirm Delete"}
            </DynamicButton>
          </div>
        }
      >
        <div className="text-center space-y-3">
          <p className="font-bold text-lg">
            {selectedItem?.animal?.name || "—"}
          </p>
          <p className="text-sm text-slate-600">
            {isAr
              ? "هل أنت متأكد من رغبتك في حذف هذا الحيوان؟ لا يمكن التراجع عن هذا الإجراء."
              : "Are you sure you want to delete this animal? This action cannot be undone."}
          </p>
        </div>
      </BaseModal>

      {/* Details Modal */}
      <BaseModal
        isOpen={detailsModalOpen}
        onOpenChange={(open) => {
          if (!open) closeDetailsModal();
        }}
        placement="center"
        title={isAr ? "تفاصيل المزاد" : "Auction Details"}
        contentClassName="w-full max-w-[600px] rounded-xl max-h-[80vh] overflow-y-auto"
      >
        {loadingDetails ? (
          <div className="flex items-center justify-center py-8">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
          </div>
        ) : detailsData ? (
          <div className="space-y-4">
            {/* Image */}
            {detailsData.media_files?.main_image?.url && (
              <div className="w-full h-48 rounded-lg overflow-hidden bg-slate-100">
                <img
                  src={detailsData.media_files.main_image.url}
                  alt={detailsData.horse?.name || detailsData.camel?.name || ""}
                  className="w-full h-full object-cover"
                />
              </div>
            )}

            {/* Basic Info */}
            <div className="grid grid-cols-2 gap-3 text-sm">
              <div>
                <span className="text-slate-500">
                  {isAr ? "رقم المجموعة" : "ID"}:
                </span>
                <span className="font-bold ms-1">{detailsData.unique_id}</span>
              </div>
              <div>
                <span className="text-slate-500">
                  {isAr ? "الحالة" : "Status"}:
                </span>
                <span
                  className={`ms-1 px-2 py-0.5 rounded-full text-xs font-bold ${statusBadgeClass(detailsData.status)}`}
                >
                  {formatStatus(detailsData.status)}
                </span>
              </div>
              <div>
                <span className="text-slate-500">
                  {isAr ? "الدولة" : "Country"}:
                </span>
                <span className="font-medium ms-1">{detailsData.country}</span>
              </div>
              <div>
                <span className="text-slate-500">
                  {isAr ? "المدينة" : "City"}:
                </span>
                <span className="font-medium ms-1">{detailsData.state}</span>
              </div>
              <div>
                <span className="text-slate-500">
                  {isAr ? "السعر الابتدائي" : "Starting Price"}:
                </span>
                <span className="font-bold ms-1">
                  {detailsData.starting_price} {isAr ? "ر.س" : "SAR"}
                </span>
              </div>
              <div>
                <span className="text-slate-500">
                  {isAr ? "سعر دخول السوق" : "Market Entry"}:
                </span>
                <span className="font-bold ms-1">
                  {detailsData.market_entry_price} {isAr ? "ر.س" : "SAR"}
                </span>
              </div>
            </div>

            {/* Description */}
            {detailsData.description && (
              <div>
                <p className="text-slate-500 text-sm mb-1">
                  {isAr ? "الوصف" : "Description"}:
                </p>
                <p className="text-sm">{detailsData.description}</p>
              </div>
            )}

            {/* Animal Info */}
            {(detailsData.horse || detailsData.camel) && (
              <div className="border-t pt-3">
                <p className="font-bold mb-2">
                  {isAr ? "معلومات الحيوان" : "Animal Info"}
                </p>
                <div className="grid grid-cols-2 gap-2 text-sm">
                  <div>
                    <span className="text-slate-500">
                      {isAr ? "الاسم" : "Name"}:
                    </span>{" "}
                    <span className="font-medium">
                      {detailsData.horse?.name || detailsData.camel?.name}
                    </span>
                  </div>
                  <div>
                    <span className="text-slate-500">
                      {isAr ? "الأب" : "Father"}:
                    </span>{" "}
                    <span className="font-medium">
                      {detailsData.horse?.father_name ||
                        detailsData.camel?.father_name}
                    </span>
                  </div>
                  <div>
                    <span className="text-slate-500">
                      {isAr ? "الأم" : "Mother"}:
                    </span>{" "}
                    <span className="font-medium">
                      {detailsData.horse?.mother_name ||
                        detailsData.camel?.mother_name}
                    </span>
                  </div>
                  <div>
                    <span className="text-slate-500">
                      {isAr ? "جد الأم" : "Mother's Father"}:
                    </span>{" "}
                    <span className="font-medium">
                      {detailsData.horse?.mother_father_name ||
                        detailsData.camel?.mother_father_name}
                    </span>
                  </div>
                  <div>
                    <span className="text-slate-500">
                      {isAr ? "السلالة" : "Breed"}:
                    </span>{" "}
                    <span className="font-medium">
                      {detailsData.horse?.breed || detailsData.camel?.breed}
                    </span>
                  </div>
                  <div>
                    <span className="text-slate-500">
                      {isAr ? "اللون" : "Color"}:
                    </span>{" "}
                    <span className="font-medium">
                      {detailsData.horse?.animal_color ||
                        detailsData.camel?.animal_color}
                    </span>
                  </div>
                  <div>
                    <span className="text-slate-500">
                      {isAr ? "الاستخدام" : "Usage"}:
                    </span>{" "}
                    <span className="font-medium">
                      {detailsData.horse?.animal_usage ||
                        detailsData.camel?.animal_usage}
                    </span>
                  </div>
                  <div>
                    <span className="text-slate-500">
                      {isAr ? "تاريخ الميلاد" : "DOB"}:
                    </span>{" "}
                    <span className="font-medium">
                      {detailsData.horse?.date_of_birth ||
                        detailsData.camel?.date_of_birth ||
                        "—"}
                    </span>
                  </div>
                  <div>
                    <span className="text-slate-500">
                      {isAr ? "الجنس" : "Gender"}:
                    </span>{" "}
                    <span className="font-medium">
                      {detailsData.horse?.gender || detailsData.camel?.gender}
                    </span>
                  </div>
                  <div>
                    <span className="text-slate-500">
                      {isAr ? "الارتفاع" : "Height"}:
                    </span>{" "}
                    <span className="font-medium">
                      {detailsData.horse?.height || detailsData.camel?.height}{" "}
                      cm
                    </span>
                  </div>
                </div>
              </div>
            )}

            {/* Owner Info */}
            {detailsData.owner && (
              <div className="border-t pt-3">
                <p className="font-bold mb-2">
                  {isAr ? "معلومات المالك" : "Owner Info"}
                </p>
                <div className="grid grid-cols-2 gap-2 text-sm">
                  <div>
                    <span className="text-slate-500">
                      {isAr ? "الاسم" : "Name"}:
                    </span>{" "}
                    <span className="font-medium">
                      {detailsData.owner.name}
                    </span>
                  </div>
                  <div>
                    <span className="text-slate-500">
                      {isAr ? "الهاتف" : "Phone"}:
                    </span>{" "}
                    <span className="font-medium">
                      {detailsData.owner.phone}
                    </span>
                  </div>
                  <div>
                    <span className="text-slate-500">
                      {isAr ? "الدولة" : "Country"}:
                    </span>{" "}
                    <span className="font-medium">
                      {detailsData.owner.country}
                    </span>
                  </div>
                  <div>
                    <span className="text-slate-500">
                      {isAr ? "المدينة" : "City"}:
                    </span>{" "}
                    <span className="font-medium">
                      {detailsData.owner.state}
                    </span>
                  </div>
                </div>
              </div>
            )}

            {/* Certificates */}
            {(detailsData.media_files?.medical_exam_certificate ||
              detailsData.media_files?.info_certificate) && (
              <div className="border-t pt-3">
                <p className="font-bold mb-2">
                  {isAr ? "الشهادات" : "Certificates"}
                </p>
                <div className="flex flex-wrap gap-2">
                  {detailsData.media_files.medical_exam_certificate && (
                    <a
                      href={
                        detailsData.media_files.medical_exam_certificate.url
                      }
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-xs px-3 py-1.5 bg-blue-50 text-blue-700 rounded-full hover:bg-blue-100"
                    >
                      {isAr ? "شهادة الفحص الطبي" : "Medical Certificate"}
                    </a>
                  )}
                  {detailsData.media_files.info_certificate && (
                    <a
                      href={detailsData.media_files.info_certificate.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-xs px-3 py-1.5 bg-blue-50 text-blue-700 rounded-full hover:bg-blue-100"
                    >
                      {isAr ? "شهادة المعلومات" : "Info Certificate"}
                    </a>
                  )}
                </div>
              </div>
            )}

            {/* Actions */}
            <div className="border-t pt-3 flex gap-2 justify-end">
              {detailsData.can_edit_details &&
                detailsData.status === "pending" && (
                  <DynamicButton
                    onClick={() => {
                      closeDetailsModal();
                      router.push(
                        `/${locale}/dashboard/my-group-auctions/${groupAuctionId}/edit/${detailsData.id}`,
                      );
                    }}
                    className="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg text-sm"
                  >
                    {isAr ? "تعديل" : "Edit"}
                  </DynamicButton>
                )}
              <DynamicButton
                onClick={closeDetailsModal}
                className="bg-slate-200 hover:bg-slate-300 text-slate-800 py-2 px-4 rounded-lg text-sm"
              >
                {isAr ? "إغلاق" : "Close"}
              </DynamicButton>
            </div>
          </div>
        ) : null}
      </BaseModal>
    </>
  );
}