'use client';

import Link from 'next/link';
import { useI18n } from '@/lib/i18n/context';
import { numberLocale } from '@/lib/i18n/utils';

interface SummaryCardsProps {
  totalValue: number | null;
  totalCount: number | null;
  loading?: boolean;
  /** إخفاء رابط قائمة الطلبات (وضع الزائر) */
  guestMode?: boolean;
}

function Skeleton() {
  return <div className="h-8 w-24 bg-gray-200 rounded animate-pulse" />;
}

export default function SummaryCards({ totalValue, totalCount, loading, guestMode = false }: SummaryCardsProps) {
  const { t, locale, isRtl } = useI18n();
  const nloc = numberLocale(locale);

  const cardClass = guestMode
    ? 'bg-[#f3f4f6] border border-gray-100/80'
    : 'bg-white shadow-sm border border-gray-100';

  return (
    <div dir={isRtl ? 'rtl' : 'ltr'} className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-5 mb-5">
      {/* إجمالي الطلبات (قيمة) — أيقونة حقيبة على خلفية أزرق فاتح */}
      <div className={`rounded-xl p-5 md:p-6 ${cardClass}`}>
        <div className="flex items-start justify-between gap-3">
          <div className={`flex-1 min-w-0 ${isRtl ? 'text-right' : 'text-left'}`}>
            <h3 className="text-gray-600 text-sm font-medium mb-2">{t('dashboard.ordersValue')}</h3>
            <div className={`flex items-baseline gap-2 flex-wrap ${isRtl ? 'justify-end' : 'justify-start'}`}>
              {loading ? (
                <Skeleton />
              ) : (
                <>
                  <span className="text-3xl md:text-4xl font-bold text-gray-900 tabular-nums">
                    {totalValue !== null ? totalValue.toLocaleString(nloc, { maximumFractionDigits: 2 }) : '0'}
                  </span>
                  <span className="text-gray-500 text-sm font-medium">{t('common.sar')}</span>
                </>
              )}
            </div>
          </div>
          <div className="w-11 h-11 shrink-0 flex items-center justify-center bg-sky-100 rounded-lg">
            <i className="ri-shopping-bag-3-line text-xl text-sky-600"></i>
          </div>
        </div>
        {!guestMode && (
          <Link
            href="/orders"
            className="mt-4 inline-flex items-center gap-2 text-[#2563eb] hover:text-[#1d4ed8] text-sm font-semibold cursor-pointer whitespace-nowrap"
          >
            <i className="ri-list-check-2 text-base"></i>
            <span>{t('dashboard.ordersList')}</span>
            <i className={`text-lg ${isRtl ? 'ri-arrow-left-s-line' : 'ri-arrow-right-s-line'}`}></i>
          </Link>
        )}
      </div>

      {/* عدد الطلبات — أيقونة متجر على خلفية صفراء فاتحة */}
      <div className={`rounded-xl p-5 md:p-6 ${cardClass}`}>
        <div className="flex items-start justify-between gap-3">
          <div className={`flex-1 min-w-0 ${isRtl ? 'text-right' : 'text-left'}`}>
            <h3 className="text-gray-600 text-sm font-medium mb-2">{t('dashboard.ordersCount')}</h3>
            <div className={`flex items-baseline gap-2 flex-wrap ${isRtl ? 'justify-end' : 'justify-start'}`}>
              {loading ? (
                <Skeleton />
              ) : (
                <>
                  <span className="text-3xl md:text-4xl font-bold text-gray-900 tabular-nums">
                    {totalCount !== null ? totalCount.toLocaleString(nloc) : '0'}
                  </span>
                  <span className="text-gray-500 text-sm font-medium">{t('dashboard.orderUnit')}</span>
                </>
              )}
            </div>
          </div>
          <div className="w-11 h-11 shrink-0 flex items-center justify-center bg-amber-100 rounded-lg">
            <i className="ri-store-3-line text-xl text-amber-600"></i>
          </div>
        </div>
      </div>
    </div>
  );
}