import Typography from "../../components/Typography/Typography";
import { ProductSummaryItem } from "../../types/transactions";

const PRODUCT_TYPE_LABELS: Record<string, string> = {
  free: "آزاد",
  gov: "دولتی",
};

const formatStatNumber = (value?: number | null): string =>
  value === undefined || value === null ? "—" : value.toLocaleString();

interface ProductSummaryModalProps {
  products: ProductSummaryItem[];
}

export const ProductSummaryModal = ({ products }: ProductSummaryModalProps) => {
  return (
    <div className="space-y-4">
      <div className="space-y-3">
        <div className="space-y-3 pr-1">
          {products.map((product) => {
            const shareEntries = product.item_share_stats || [];
            const typeLabel =
              PRODUCT_TYPE_LABELS[product?.product_type || ""] ||
              product?.product_type ||
              "نامشخص";

            return (
              <div
                key={`${
                  product?.product_id || product?.product_name
                }-${typeLabel}`}
                className="bg-white dark:bg-dark-700 rounded-2xl border border-gray-200 dark:border-dark-600 shadow-sm p-4 space-y-3"
              >
                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1">
                  <div>
                    <Typography
                      variant="subtitle2"
                      className="text-gray-900 dark:text-white font-semibold"
                    >
                      {product?.product_name || "بدون نام"}
                    </Typography>
                    <Typography
                      variant="caption"
                      className="text-gray-500 dark:text-gray-400"
                    >
                      نوع فروش: {typeLabel}
                    </Typography>
                  </div>
                  <div className="flex items-center gap-2 text-[11px] text-gray-500 dark:text-gray-300">
                    <span>کل فروش:</span>
                    <span className="font-bold">
                      {formatStatNumber(product?.total_sales)}
                    </span>
                    <span>وزن:</span>
                    <span className="font-bold">
                      {formatStatNumber(product?.total_weight)} کیلوگرم
                    </span>
                  </div>
                </div>

                <div className="grid grid-cols-2 md:grid-cols-4 gap-1 text-[11px] text-gray-500 dark:text-gray-300">
                  <div className="bg-gray-50 dark:bg-dark-800/50 rounded-xl p-1.5 border border-gray-100 dark:border-dark-600">
                    <span className="block text-[10px] text-gray-400 dark:text-gray-400">
                      موفق
                    </span>
                    <span className="font-semibold text-sm text-emerald-600 dark:text-emerald-300">
                      {formatStatNumber(product?.success_sales)}
                    </span>
                  </div>
                  <div className="bg-gray-50 dark:bg-dark-800/50 rounded-xl p-1.5 border border-gray-100 dark:border-dark-600">
                    <span className="block text-[10px] text-gray-400 dark:text-gray-400">
                      ناموفق
                    </span>
                    <span className="font-semibold text-sm text-red-600 dark:text-red-400">
                      {formatStatNumber(product?.failed_sales)}
                    </span>
                  </div>
                  <div className="bg-gray-50 dark:bg-dark-800/50 rounded-xl p-1.5 border border-gray-100 dark:border-dark-600">
                    <span className="block text-[10px] text-gray-400 dark:text-gray-400">
                      در انتظار
                    </span>
                    <span className="font-semibold text-sm text-yellow-600 dark:text-yellow-400">
                      {formatStatNumber(product?.waiting_sales)}
                    </span>
                  </div>
                  <div className="bg-gray-50 dark:bg-dark-800/50 rounded-xl p-1.5 border border-gray-100 dark:border-dark-600">
                    <span className="block text-[10px] text-gray-400 dark:text-gray-400">
                      پرداخت کارت
                    </span>
                    <span className="font-semibold text-sm text-primary-600 dark:text-primary-300">
                      {formatStatNumber(product?.card_payments)}
                    </span>
                  </div>
                </div>
                <div className="flex flex-wrap gap-1 text-[11px] text-gray-500 dark:text-gray-400">
                  <span className="px-2 py-0.5 rounded-full bg-gray-100 dark:bg-dark-900 border border-gray-200 dark:border-dark-700">
                    نقدی: {formatStatNumber(product?.cash_payments)}
                  </span>
                  <span className="px-2 py-0.5 rounded-full bg-gray-100 dark:bg-dark-900 border border-gray-200 dark:border-dark-700">
                    چک: {formatStatNumber(product?.check_payments)}
                  </span>
                  <span className="px-2 py-0.5 rounded-full bg-gray-100 dark:bg-dark-900 border border-gray-200 dark:border-dark-700">
                    اعتباری: {formatStatNumber(product?.credit_payments)}
                  </span>
                </div>

                {shareEntries.length > 0 ? (
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-1.5">
                    {shareEntries.map((share, index) => (
                      <div
                        key={`${share.name}-${index}`}
                        className="rounded-2xl border border-gray-100 dark:border-dark-600 p-2 bg-white dark:bg-dark-600 shadow-sm"
                      >
                        <div className="flex items-center justify-between gap-2">
                          <span className="font-semibold text-xs text-gray-900 dark:text-white">
                            {share.name || "حساب اصلی"}
                          </span>
                          <span className="text-[11px] text-gray-500 dark:text-gray-400">
                            {formatStatNumber(share.count)} تراکنش
                          </span>
                        </div>
                        <span className="text-[12px] text-primary-600 dark:text-primary-300 font-semibold mt-1 block">
                          {formatStatNumber(share.total_price)} ریال
                        </span>
                      </div>
                    ))}
                  </div>
                ) : (
                  <Typography
                    variant="caption"
                    className="text-gray-500 dark:text-gray-400"
                  >
                    در حال حاضر تسهیمی برای این محصول ثبت نشده است.
                  </Typography>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};
