'use client';

import { useState, useEffect, useCallback } from 'react';
import type { ComponentType } from 'react';
import { useAuth } from '@/contexts/AuthContext';
import { purchasesApi } from '@/lib/api/purchases';
import { packagesApi } from '@/lib/api/packages';
import { productsApi } from '@/lib/api/products';
import PageHeader from '@/components/admin/PageHeader';
import PersianDatePicker from '@/components/admin/PersianDatePicker';
import { Purchase, PAYMENT_GATEWAYS } from '@/types/purchase';
import { PackageName } from '@/types/package';
import { Product } from '@/types/product';
import { formatPrice, getPurchaseFinalPrice, parseStoreRate, parseFee } from '@/lib/utils';
import {
    MagnifyingGlassIcon,
    ArrowPathIcon,
    CalculatorIcon,
    BanknotesIcon,
    WalletIcon,
    ChartPieIcon,
} from '@heroicons/react/24/outline';

// A single paid sale = success (موفق) or consumed (مصرف‌شده).
// مایکت/کافه‌بازار تراکنش را مستقیماً با وضعیت «مصرف‌شده» ثبت می‌کنند (نه «موفق»)،
// بنابراین هر دو وضعیت باید به‌عنوان فروش محسوب شوند.
const PAID_STATUSES = [2, 3];

// Local-time Gregorian helpers. The "YYYY-MM-DD" format matches what
// PersianDatePicker exchanges and what the created_at comparison expects.
const toGregorianValue = (date: Date): string => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};

const addDays = (date: Date, days: number): Date => {
    const copy = new Date(date);
    copy.setDate(copy.getDate() + days);
    return copy;
};

const todayValue = (): string => toGregorianValue(new Date());

type DatePreset = 'today' | 'yesterday' | 'last7' | 'thisMonth';

const presetRange = (preset: DatePreset): { from: string; to: string } => {
    const now = new Date();
    switch (preset) {
        case 'today':
            return { from: toGregorianValue(now), to: toGregorianValue(now) };
        case 'yesterday': {
            const yesterday = addDays(now, -1);
            return { from: toGregorianValue(yesterday), to: toGregorianValue(yesterday) };
        }
        case 'last7':
            return { from: toGregorianValue(addDays(now, -6)), to: toGregorianValue(now) };
        case 'thisMonth':
            return {
                from: toGregorianValue(new Date(now.getFullYear(), now.getMonth(), 1)),
                to: toGregorianValue(now),
            };
    }
};

const PRESET_LABELS: { key: DatePreset; label: string }[] = [
    { key: 'today', label: 'امروز' },
    { key: 'yesterday', label: 'دیروز' },
    { key: 'last7', label: '۷ روز اخیر' },
    { key: 'thisMonth', label: 'این ماه' },
];

interface StoreSummary {
    count: number;
    gross: number;
    rate: number;
    fee: number;
    net: number;
}

interface ProductRow {
    productId: number | null;
    title: string;
    packageName: string;
    count: number;
    gross: number;
    commission: number;
    net: number;
}

interface AccountingResult {
    rows: ProductRow[];
    totals: { count: number; gross: number; commission: number; net: number };
    myket: StoreSummary;
    cafe: StoreSummary;
    other: StoreSummary;
}

// خلاصه فروش هر محصول و هر فروشگاه با احتساب کارمزد
const computeAccounting = (
    purchases: Purchase[],
    myketRate: number,
    cafeRate: number,
    transactionFee: number,
): AccountingResult => {
    const rows = new Map<number, ProductRow>();
    let totalCount = 0;
    let totalGross = 0;
    let totalCommission = 0;

    // درصد سهم توسعه‌دهنده به‌صورت کسر (0.85) و کارمزد تراکنش به ریال
    const makeStore = (rate: number): StoreSummary => ({ count: 0, gross: 0, rate, fee: 0, net: 0 });
    const myket: StoreSummary = makeStore(myketRate);
    const cafe: StoreSummary = makeStore(cafeRate);
    const other: StoreSummary = makeStore(0);

    // سهم توسعه‌دهنده برای مایکت/کافه‌بازار:
    //   (P / 1.1 - T) × R
    // P = قیمت فروش (با احتساب ۱۰٪ مالیات بر ارزش افزوده)
    // /1.1 = حذف ارزش افزوده، T = کارمزد تراکنش به ریال، R = درصد سهم
    const developerShare = (price: number, rate: number, feePerTransaction: number) => {
        const beforeVat = price / 1.1;
        const afterVatAndFee = beforeVat - feePerTransaction;
        if (afterVatAndFee <= 0) return 0;
        return afterVatAndFee * (rate / 100);
    };

    const collect = (store: StoreSummary, price: number, rate: number, feePerTransaction: number) => {
        let net: number;
        if (rate > 0) {
            net = developerShare(price, rate, feePerTransaction);
        } else {
            net = price; // سایر درگاه‌ها: بدون کارمزد فروشگاه
        }
        store.count += 1;
        store.gross += price;
        store.fee += price - net;
        store.net += net;
    };

    for (const purchase of purchases) {
        const price = getPurchaseFinalPrice(purchase);
        const gateway = purchase.gateway;

        let store: StoreSummary;
        let rate: number;
        let feePerTransaction: number;
        if (gateway === PAYMENT_GATEWAYS.cafe.code) {
            store = cafe;
            rate = cafeRate;
            feePerTransaction = transactionFee;
        } else if (gateway === PAYMENT_GATEWAYS.myket.code) {
            store = myket;
            rate = myketRate;
            feePerTransaction = transactionFee;
        } else {
            store = other;
            rate = 0;
            feePerTransaction = 0;
        }

        collect(store, price, rate, feePerTransaction);

        totalCount += 1;
        totalGross += price;
        totalCommission += price - developerShare(price, rate, feePerTransaction);

        const productId = purchase.product_id ?? purchase.product?.id ?? -1;
        let row = rows.get(productId);
        if (!row) {
            row = {
                productId,
                title: purchase.product?.title || 'نامشخص',
                packageName:
                    purchase.product?.package_name?.title ||
                    purchase.product?.package_name?.name ||
                    '—',
                count: 0,
                gross: 0,
                commission: 0,
                net: 0,
            };
            rows.set(productId, row);
        }
        row.count += 1;
        row.gross += price;
        row.commission += price - developerShare(price, rate, feePerTransaction);
        row.net += developerShare(price, rate, feePerTransaction);
    }

    return {
        rows: Array.from(rows.values()),
        totals: {
            count: totalCount,
            gross: totalGross,
            commission: totalCommission,
            net: totalGross - totalCommission,
        },
        myket,
        cafe,
        other,
    };
};

export default function AccountingPage() {
    const { token } = useAuth();

    // Package / product filters
    const [packages, setPackages] = useState<PackageName[]>([]);
    const [selectedPackageName, setSelectedPackageName] = useState<string>('');
    const [products, setProducts] = useState<Product[]>([]);
    const [selectedProductId, setSelectedProductId] = useState<string>('');

    // Date range — defaults to today so the daily account is the first thing shown
    const [dateFrom, setDateFrom] = useState<string>(todayValue);
    const [dateTo, setDateTo] = useState<string>(todayValue);
    const [preset, setPreset] = useState<DatePreset | null>('today');

    // Time range
    const [timeFrom, setTimeFrom] = useState<string>('');
    const [timeTo, setTimeTo] = useState<string>('');

    // Status filter — both paid statuses selected by default
    const [statuses, setStatuses] = useState<number[]>([...PAID_STATUSES]);

    // درصد سهم توسعه‌دهنده (R در فرمول) — مایکت و کافه‌بازار به‌طور پیش‌فرض ۸۵٪
    const [myketRate, setMyketRate] = useState<string>('85');
    const [cafeRate, setCafeRate] = useState<string>('85');
    // کارمزد تراکنش به ریال (T در فرمول سهم توسعه‌دهنده)
    const [transactionFee, setTransactionFee] = useState<string>('1200');

    const [allPurchases, setAllPurchases] = useState<Purchase[] | null>(null);
    const [result, setResult] = useState<AccountingResult | null>(null);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    // Bumped by the «تحلیل» button / «بارگذاری مجدد» to force a refetch
    const [refreshTick, setRefreshTick] = useState(0);

    const inputClass =
        'block w-full px-3 py-2.5 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent sm:text-sm dark:bg-gray-800/80 transition-colors';
    const labelClass = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5';

    // Load packages once on mount — "همه پکیج‌ها" stays selected by default so
    // the initial view covers the whole business.
    useEffect(() => {
        if (!token) return;
        packagesApi
            .getAllPackages(token)
            .then(setPackages)
            .catch(() => setError('خطا در دریافت لیست پکیج‌ها'));
    }, [token]);

    // Load products when a package is selected
    useEffect(() => {
        if (!token || !selectedPackageName) {
            setProducts([]);
            setSelectedProductId('');
            return;
        }
        setSelectedProductId('');
        productsApi
            .getProducts(selectedPackageName, token)
            .then(setProducts)
            .catch(() => setProducts([]));
    }, [selectedPackageName, token]);

    // The server-side query window. Fetching only the selected window keeps the
    // payload small; the backend filters created_at by these dates. Runs
    // automatically on mount (today's account) and whenever the window,
    // package or product selection changes.
    const windowKey = [dateFrom, dateTo, timeFrom, timeTo, selectedPackageName, selectedProductId].join('|');

    useEffect(() => {
        if (!token) return;
        let cancelled = false;
        setIsLoading(true);
        setError(null);

        purchasesApi
            .getAllPurchases(
                {
                    per_page: 500,
                    ...(dateFrom && { date_from: dateFrom }),
                    ...(dateTo && { date_to: dateTo }),
                    ...(timeFrom && { time_from: timeFrom }),
                    ...(timeTo && { time_to: timeTo }),
                    ...(selectedPackageName && { package_name: selectedPackageName }),
                    ...(selectedProductId && { product_id: Number(selectedProductId) }),
                },
                token
            )
            .then((purchases) => {
                if (cancelled) return;
                setAllPurchases(purchases);
                setResult(
                    computeAccounting(
                        purchases,
                        parseStoreRate(myketRate),
                        parseStoreRate(cafeRate),
                        parseFee(transactionFee)
                    )
                );
            })
            .catch((err) => {
                if (!cancelled) {
                    setError(err instanceof Error ? err.message : 'خطا در دریافت داده‌ها');
                }
            })
            .finally(() => {
                if (!cancelled) setIsLoading(false);
            });

        return () => {
            cancelled = true;
        };
        // Commission rates are read at fetch time only; changing them recomputes
        // locally (see runAnalysis) without refetching.
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [token, windowKey, refreshTick]);

    const handleAnalyze = () => setRefreshTick((t) => t + 1);

    // Recompute whenever filters or commission rates change (uses cached data)
    const runAnalysis = useCallback(() => {
        if (!allPurchases) return;
        const myket = parseStoreRate(myketRate);
        const cafe = parseStoreRate(cafeRate);
        const fee = parseFee(transactionFee);

        const filtered = allPurchases.filter((p) => {
            // Status
            if (statuses.length > 0 && !statuses.includes(p.status)) return false;

            // Product
            if (selectedProductId !== '' && String(p.product_id) !== selectedProductId) return false;

            // Package (via nested product)
            if (selectedPackageName) {
                const pkgName =
                    p.product?.package_name?.name || p.product?.package_name?.title || '';
                if (pkgName && pkgName !== selectedPackageName) return false;
            }

            // Date range (created_at is "Y-m-d H:i:s")
            // When time is also selected, compare full datetime strings;
            // otherwise compare only the date portion (YYYY-MM-DD).
            const created = p.created_at ?? '';
            if (dateFrom) {
                const datePart = created.slice(0, 10);
                if (timeFrom) {
                    // Full datetime comparison: "YYYY-MM-DD HH:mm:ss"
                    if (created < `${dateFrom} ${timeFrom}`) return false;
                } else if (datePart < dateFrom) return false;
            }
            if (dateTo) {
                const datePart = created.slice(0, 10);
                if (timeTo) {
                    if (created > `${dateTo} ${timeTo}`) return false;
                } else if (datePart > dateTo) return false;
            }

            return true;
        });

        setResult(computeAccounting(filtered, myket, cafe, fee));
    }, [allPurchases, statuses, selectedProductId, selectedPackageName, dateFrom, dateTo, timeFrom, timeTo, myketRate, cafeRate, transactionFee]);

    // Recompute on filter/rate changes (no refetch needed once data is cached)
    useEffect(() => {
        if (allPurchases) runAnalysis();
    }, [runAnalysis, allPurchases]);

    const applyPreset = (key: DatePreset) => {
        const range = presetRange(key);
        setPreset(key);
        setDateFrom(range.from);
        setDateTo(range.to);
        setTimeFrom('');
        setTimeTo('');
    };

    const handleDateFromChange = (value: string) => {
        setPreset(null);
        setDateFrom(value);
    };

    const handleDateToChange = (value: string) => {
        setPreset(null);
        setDateTo(value);
    };

    const handleReset = () => {
        setSelectedPackageName('');
        setSelectedProductId('');
        applyPreset('today');
        setStatuses([...PAID_STATUSES]);
        setMyketRate('85');
        setCafeRate('85');
        setTransactionFee('1200');
    };

    const toggleStatus = (code: number) => {
        setStatuses((prev) =>
            prev.includes(code) ? prev.filter((c) => c !== code) : [...prev, code]
        );
    };

    return (
        <div className="p-4 sm:p-8">
            <div className="max-w-7xl mx-auto">
                <PageHeader
                    title="حسابداری"
                    subtitle="تحلیل فروش محصولات و محاسبه کارمزد فروشگاه‌ها"
                    action={
                        allPurchases ? (
                            <button
                                onClick={handleAnalyze}
                                disabled={isLoading}
                                className="inline-flex items-center gap-2 px-4 py-2.5 border border-gray-200 dark:border-gray-700 rounded-xl text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 transition-colors shadow-sm"
                            >
                                <ArrowPathIcon className="h-4 w-4" />
                                بارگذاری مجدد
                            </button>
                        ) : null
                    }
                />

                {/* Filters */}
                <form
                    onSubmit={(e) => {
                        e.preventDefault();
                        handleAnalyze();
                    }}
                    className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl p-5 sm:p-6 mb-6 shadow-sm"
                >
                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-6">
                        <div>
                            <label htmlFor="package_name" className={labelClass}>پکیج</label>
                            <select
                                id="package_name"
                                value={selectedPackageName}
                                onChange={(e) => setSelectedPackageName(e.target.value)}
                                className={inputClass}
                            >
                                <option value="">همه پکیج‌ها</option>
                                {packages.map((pkg) => (
                                    <option key={pkg.id} value={pkg.name || ''}>
                                        {pkg.title || pkg.name}
                                    </option>
                                ))}
                            </select>
                        </div>

                        <div>
                            <label htmlFor="product" className={labelClass}>محصول</label>
                            <select
                                id="product"
                                value={selectedProductId}
                                onChange={(e) => setSelectedProductId(e.target.value)}
                                className={inputClass}
                            >
                                <option value="">همه محصولات</option>
                                {products.map((prod) => (
                                    <option key={prod.id} value={String(prod.id)}>
                                        {prod.title || `#${prod.id}`}
                                    </option>
                                ))}
                            </select>
                        </div>

                        <div>
                            <PersianDatePicker
                                id="date_from"
                                label="از تاریخ"
                                placeholder="انتخاب تاریخ شروع"
                                value={dateFrom}
                                onChange={handleDateFromChange}
                            />
                        </div>

                        <div>
                            <label htmlFor="time_from" className={labelClass}>از ساعت</label>
                            <input
                                type="time"
                                id="time_from"
                                value={timeFrom}
                                onChange={(e) => setTimeFrom(e.target.value)}
                                className={inputClass}
                                placeholder="۰۰:۰۰"
                            />
                        </div>

                        <div>
                            <PersianDatePicker
                                id="date_to"
                                label="تا تاریخ"
                                placeholder="انتخاب تاریخ پایان"
                                value={dateTo}
                                onChange={handleDateToChange}
                            />
                        </div>

                        <div>
                            <label htmlFor="time_to" className={labelClass}>تا ساعت</label>
                            <input
                                type="time"
                                id="time_to"
                                value={timeTo}
                                onChange={(e) => setTimeTo(e.target.value)}
                                className={inputClass}
                                placeholder="۲۳:۵۹"
                            />
                        </div>
                    </div>

                    {/* Quick date-range presets */}
                    <div className="mt-4">
                        <label className={labelClass}>بازه زمانی</label>
                        <div className="flex flex-wrap gap-2">
                            {PRESET_LABELS.map(({ key, label }) => {
                                const active = preset === key;
                                return (
                                    <button
                                        key={key}
                                        type="button"
                                        onClick={() => applyPreset(key)}
                                        className={`px-3.5 py-1.5 rounded-xl text-sm font-medium transition-colors ${
                                            active
                                                ? 'bg-indigo-600 text-white shadow-sm shadow-indigo-500/20'
                                                : 'bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 ring-1 ring-gray-200 dark:ring-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700'
                                        }`}
                                    >
                                        {label}
                                    </button>
                                );
                            })}
                        </div>
                    </div>

                    {/* Status checkboxes */}
                    <div className="mt-4">
                        <label className={labelClass}>وضعیت</label>
                        <div className="flex flex-wrap gap-3">
                            {[
                                { code: 2, label: 'موفق' },
                                { code: 3, label: 'مصرف‌شده' },
                                { code: 1, label: 'در انتظار پرداخت' },
                            ].map(({ code, label }) => (
                                <label key={code} className="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                                    <input
                                        type="checkbox"
                                        checked={statuses.includes(code)}
                                        onChange={() => toggleStatus(code)}
                                        className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                                    />
                                    {label}
                                </label>
                            ))}
                        </div>
                    </div>

                    {/* Commission settings */}
                    <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                        <div>
                            <label htmlFor="myket_rate" className={labelClass}>
                                سهم توسعه‌دهنده مایکت (٪)
                            </label>
                            <input
                                type="text"
                                id="myket_rate"
                                inputMode="numeric"
                                value={myketRate}
                                onChange={(e) => setMyketRate(e.target.value)}
                                className={inputClass}
                                placeholder="۸۵"
                            />
                        </div>
                        <div>
                            <label htmlFor="cafe_rate" className={labelClass}>
                                سهم توسعه‌دهنده کافه بازار (٪)
                            </label>
                            <input
                                type="text"
                                id="cafe_rate"
                                inputMode="numeric"
                                value={cafeRate}
                                onChange={(e) => setCafeRate(e.target.value)}
                                className={inputClass}
                                placeholder="۸۵"
                            />
                        </div>
                        <div>
                            <label htmlFor="transaction_fee" className={labelClass}>
                                کارمزد تراکنش (ریال)
                            </label>
                            <input
                                type="text"
                                id="transaction_fee"
                                inputMode="numeric"
                                value={transactionFee}
                                onChange={(e) => setTransactionFee(e.target.value)}
                                className={inputClass}
                                placeholder="۱۲۰۰"
                            />
                        </div>
                    </div>
                    <p className="mt-2 text-xs text-gray-400 dark:text-gray-500">
                        سهم توسعه‌دهنده = (قیمت ÷ ۱٫۱ − کارمزد تراکنش) × درصد سهم. پیش‌فرض مایکت و
                        کافه‌بازار ۸۵٪ (فروش زیر ۱۰ میلیارد ریال) و ۷۰٪ (بالای آن) است.
                    </p>

                    <div className="flex flex-wrap items-center gap-3 mt-5">
                        <button
                            type="submit"
                            disabled={isLoading}
                            className="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20"
                        >
                            <MagnifyingGlassIcon className="h-4 w-4" />
                            تحلیل
                        </button>
                        <button
                            type="button"
                            onClick={handleReset}
                            disabled={isLoading}
                            className="inline-flex items-center gap-2 px-5 py-2.5 border border-gray-200 dark:border-gray-700 rounded-xl text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm"
                        >
                            <ArrowPathIcon className="h-4 w-4" />
                            پاک کردن فیلترها
                        </button>
                    </div>
                </form>

                {error && (
                    <div className="mb-4 rounded-xl bg-red-50 dark:bg-red-950/40 ring-1 ring-red-200 dark:ring-red-800/60 p-4 flex items-center gap-3">
                        <p className="text-sm text-red-700 dark:text-red-300">{error}</p>
                        <button onClick={() => setError(null)} className="mr-auto text-red-400 hover:text-red-600">
                            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                )}

                {isLoading && (
                    <div className="flex justify-center items-center py-16">
                        <div className="h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
                    </div>
                )}

                {!isLoading && allPurchases && result && (
                    <>
                        {/* Summary stat cards */}
                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                            <StatCard label="تعداد فروش" value={formatPrice(result.totals.count)} Icon={WalletIcon} tone="indigo" />
                            <StatCard label="فروش ناخالص" value={formatPrice(result.totals.gross)} unit="تومان" Icon={BanknotesIcon} tone="sky" />
                            <StatCard label="کارمزد فروشگاه‌ها" value={formatPrice(result.totals.commission)} unit="تومان" Icon={ChartPieIcon} tone="amber" />
                            <StatCard label="سود خالص" value={formatPrice(result.totals.net)} unit="تومان" Icon={CalculatorIcon} tone="emerald" />
                        </div>

                        {/* Per-store breakdown */}
                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
                            <StoreCard title="مایکت" summary={result.myket} />
                            <StoreCard title="کافه بازار" summary={result.cafe} />
                            <StoreCard title="سایر درگاه‌ها" summary={result.other} />
                        </div>

                        {/* Per-product table */}
                        <div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
                            <div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800">
                                <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
                                    تحلیل به تفکیک محصول
                                </h3>
                            </div>

                            {result.rows.length === 0 ? (
                                <div className="text-center py-16">
                                    <p className="text-gray-500 dark:text-gray-400 text-sm">
                                        هیچ فروشی با این فیلترها یافت نشد
                                    </p>
                                </div>
                            ) : (
                                <>
                                    {/* Mobile: stacked cards */}
                                    <ul className="divide-y divide-gray-200 dark:divide-gray-800 md:hidden">
                                        {result.rows.map((row) => (
                                            <li key={row.productId} className="px-5 py-4">
                                                <div className="flex items-start justify-between gap-3">
                                                    <div className="min-w-0">
                                                        <p className="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
                                                            {row.title}
                                                        </p>
                                                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate">
                                                            {row.packageName}
                                                        </p>
                                                    </div>
                                                    <span className="flex-shrink-0 px-2.5 py-1 text-xs font-semibold rounded-lg bg-indigo-50 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-400">
                                                        {formatPrice(row.count)} فروش
                                                    </span>
                                                </div>
                                                <div className="grid grid-cols-3 gap-2 mt-3 pt-3 border-t border-gray-100 dark:border-gray-800/60">
                                                    <div>
                                                        <p className="text-[11px] text-gray-400 dark:text-gray-500">فروش ناخالص</p>
                                                        <p className="text-xs font-bold text-gray-900 dark:text-gray-100 mt-0.5">
                                                            {formatPrice(row.gross)}
                                                        </p>
                                                    </div>
                                                    <div>
                                                        <p className="text-[11px] text-gray-400 dark:text-gray-500">کارمزد</p>
                                                        <p className="text-xs font-bold text-amber-600 dark:text-amber-400 mt-0.5">
                                                            {formatPrice(row.commission)}
                                                        </p>
                                                    </div>
                                                    <div>
                                                        <p className="text-[11px] text-gray-400 dark:text-gray-500">سود خالص</p>
                                                        <p className="text-xs font-bold text-emerald-600 dark:text-emerald-400 mt-0.5">
                                                            {formatPrice(row.net)}
                                                        </p>
                                                    </div>
                                                </div>
                                            </li>
                                        ))}
                                    </ul>

                                    {/* Desktop: table */}
                                    <div className="hidden md:block overflow-x-auto">
                                        <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
                                        <thead className="bg-gray-50 dark:bg-gray-800/60">
                                            <tr className="text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                                <th className="px-4 py-3">محصول</th>
                                                <th className="px-4 py-3">پکیج</th>
                                                <th className="px-4 py-3">تعداد فروش</th>
                                                <th className="px-4 py-3">فروش ناخالص</th>
                                                <th className="px-4 py-3">کارمزد فروشگاه</th>
                                                <th className="px-4 py-3">سود خالص</th>
                                            </tr>
                                        </thead>
                                        <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
                                            {result.rows.map((row) => (
                                                <tr key={row.productId} className="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
                                                    <td className="px-4 py-3.5 text-sm font-medium text-gray-900 dark:text-gray-100 whitespace-nowrap">
                                                        {row.title}
                                                    </td>
                                                    <td className="px-4 py-3.5 text-sm text-gray-700 dark:text-gray-300 whitespace-nowrap">
                                                        {row.packageName}
                                                    </td>
                                                    <td className="px-4 py-3.5 text-sm text-gray-900 dark:text-gray-100 whitespace-nowrap">
                                                        {formatPrice(row.count)}
                                                    </td>
                                                    <td className="px-4 py-3.5 text-sm text-gray-900 dark:text-gray-100 whitespace-nowrap font-medium">
                                                        {formatPrice(row.gross)} <span className="text-xs text-gray-400">تومان</span>
                                                    </td>
                                                    <td className="px-4 py-3.5 text-sm text-amber-600 dark:text-amber-400 whitespace-nowrap">
                                                        {formatPrice(row.commission)} <span className="text-xs text-gray-400">تومان</span>
                                                    </td>
                                                    <td className="px-4 py-3.5 text-sm text-emerald-600 dark:text-emerald-400 whitespace-nowrap font-medium">
                                                        {formatPrice(row.net)} <span className="text-xs text-gray-400">تومان</span>
                                                    </td>
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                    </div>
                                </>
                            )}
                        </div>
                    </>
                )}

                {!isLoading && !allPurchases && (
                    <div className="text-center py-16 bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl shadow-sm">
                        <div className="mx-auto h-12 w-12 rounded-xl bg-indigo-50 dark:bg-indigo-500/15 flex items-center justify-center mb-3">
                            <CalculatorIcon className="h-6 w-6 text-indigo-600 dark:text-indigo-400" />
                        </div>
                        <p className="text-gray-500 dark:text-gray-400 text-sm">
                            برای تحلیل فروش، فیلترها را تنظیم و روی «تحلیل» کلیک کنید
                        </p>
                    </div>
                )}
            </div>
        </div>
    );
}

const STAT_TONES = {
    indigo: 'bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400',
    sky: 'bg-sky-50 text-sky-600 dark:bg-sky-500/10 dark:text-sky-400',
    amber: 'bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400',
    emerald: 'bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400',
} as const;

function StatCard({
    label,
    value,
    unit,
    Icon,
    tone,
}: {
    label: string;
    value: string;
    unit?: string;
    Icon: ComponentType<{ className?: string }>;
    tone: keyof typeof STAT_TONES;
}) {
    const valueColor =
        tone === 'amber'
            ? 'text-amber-600 dark:text-amber-400'
            : tone === 'emerald'
                ? 'text-emerald-600 dark:text-emerald-400'
                : 'text-gray-900 dark:text-gray-100';

    return (
        <div className="rounded-2xl bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 p-5 shadow-sm">
            <div className="flex items-center gap-2.5">
                <span className={`h-9 w-9 rounded-xl flex items-center justify-center flex-shrink-0 ${STAT_TONES[tone]}`}>
                    <Icon className="h-5 w-5" />
                </span>
                <span className="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</span>
            </div>
            <div className={`text-2xl font-bold mt-2.5 ${valueColor}`}>
                {value} {unit && <span className="text-sm font-normal text-gray-400">{unit}</span>}
            </div>
        </div>
    );
}

function StoreCard({ title, summary }: { title: string; summary: StoreSummary }) {
    return (
        <div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl p-5 shadow-sm">
            <div className="flex items-center justify-between">
                <h4 className="text-sm font-semibold text-gray-900 dark:text-gray-100">{title}</h4>
                {summary.rate > 0 && (
                    <span className="px-2 py-0.5 text-xs font-medium rounded-lg bg-indigo-50 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-400">
                        سهم توسعه‌دهنده {summary.rate}٪
                    </span>
                )}
            </div>
            <div className="mt-3 space-y-1.5 text-sm">
                <div className="flex justify-between text-gray-500 dark:text-gray-400">
                    <span>تعداد فروش</span>
                    <span className="text-gray-900 dark:text-gray-100 font-medium">{formatPrice(summary.count)}</span>
                </div>
                <div className="flex justify-between text-gray-500 dark:text-gray-400">
                    <span>فروش ناخالص</span>
                    <span className="text-gray-900 dark:text-gray-100 font-medium">{formatPrice(summary.gross)} تومان</span>
                </div>
                <div className="flex justify-between text-gray-500 dark:text-gray-400">
                    <span>سهم فروشگاه‌ها</span>
                    <span className="text-amber-600 dark:text-amber-400 font-medium">{formatPrice(summary.fee)} تومان</span>
                </div>
                <div className="flex justify-between pt-1.5 border-t border-gray-100 dark:border-gray-800 text-gray-500 dark:text-gray-400">
                    <span>سود خالص</span>
                    <span className="text-emerald-600 dark:text-emerald-400 font-bold">{formatPrice(summary.net)} تومان</span>
                </div>
            </div>
        </div>
    );
}