// components/StockLogModal.tsx
import { useMemo, useState } from 'react';
import Modal from '../components/Modal';
import IconInstagram from '../components/Icon/IconInstagram';
import IconGlobe from '../components/Icon/IconGlobe';
import IconWhatsapp from '../components/Icon/IconWhatsapp';
import IconSearch from '../components/Icon/IconSearch';
import IconCaretDown from '../components/Icon/IconCaretDown';
import IconBox from '../components/Icon/IconBox';
import { Product, createLedgerFromOrders } from '../utils/product';

type ChannelKey = 'instagram' | 'web' | 'whatsapp';

export type StockLogEntry = {
    id: string;
    refNo: string;
    date: string;
    channel: ChannelKey;
    type: 'sale' | 'restock' | 'purchase' | 'adjustment' | 'correction' | 'return';
    title: string;
    description: string;
    units: number; // signed: negative = reduced, positive = added
    beforeStock?: number;
    afterStock?: number;
    performedBy?: string; // e.g. "Mike R." or "System (Auto)"
    customerName?: string;
    customerPhone?: string;
};

type Props = {
    open: boolean;
    onClose: () => void;
    products: Product[]; // expects a single-product array, e.g. [p]
};

const CHANNELS = [
    {
        key: 'web' as ChannelKey,
        label: 'Website',
        icon: <IconGlobe className="w-5 h-5" />,
        headerBg: 'bg-blue-50/70 dark:bg-blue-950/20 hover:bg-blue-100/50',
        borderColor: 'border-blue-200 dark:border-blue-800/50',
        iconWrap: 'bg-blue-600 text-white shadow-sm shadow-blue-500/30',
        titleColor: 'text-blue-900 dark:text-blue-200',
        badgeColor: 'bg-blue-100/80 text-blue-700 dark:bg-blue-900/60 dark:text-blue-300 border-blue-200 dark:border-blue-800',
        tagline: 'WooCommerce & Web Portal online store orders',
        stockKey: 'web' as const,
    },
    {
        key: 'instagram' as ChannelKey,
        label: 'Instagram',
        icon: <IconInstagram className="w-5 h-5" />,
        headerBg: 'bg-pink-50/70 dark:bg-pink-950/20 hover:bg-pink-100/50',
        borderColor: 'border-pink-200 dark:border-pink-800/50',
        iconWrap: 'bg-gradient-to-tr from-amber-500 via-rose-500 to-purple-600 text-white shadow-sm shadow-rose-500/30',
        titleColor: 'text-pink-900 dark:text-pink-200',
        badgeColor: 'bg-pink-100/80 text-pink-700 dark:bg-pink-900/60 dark:text-pink-300 border-pink-200 dark:border-pink-800',
        tagline: 'Direct messages & Instagram shopping orders',
        stockKey: 'instagram' as const,
    },
    {
        key: 'whatsapp' as ChannelKey,
        label: 'WhatsApp',
        icon: <IconWhatsapp className="w-5 h-5" />,
        headerBg: 'bg-emerald-50/70 dark:bg-emerald-950/20 hover:bg-emerald-100/50',
        borderColor: 'border-emerald-200 dark:border-emerald-800/50',
        iconWrap: 'bg-emerald-600 text-white shadow-sm shadow-emerald-500/30',
        titleColor: 'text-emerald-900 dark:text-emerald-200',
        badgeColor: 'bg-emerald-100/80 text-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-300 border-emerald-200 dark:border-emerald-800',
        tagline: 'WhatsApp business chat & catalog orders',
        stockKey: 'whatsapp' as const,
    },
];

const StockLogModal = ({ open, onClose, products }: Props) => {
    const product = products[0] ?? null;
    const [logSearch, setLogSearch] = useState('');
    const [filterType, setFilterType] = useState('all');
    
    // Accordion state: all closed by default
    const [openAccordions, setOpenAccordions] = useState<Record<string, boolean>>({
        web: false,
        instagram: false,
        whatsapp: false,
    });

    const toggleAccordion = (key: string) => {
        setOpenAccordions((prev) => ({
            ...prev,
            [key]: !prev[key],
        }));
    };

    const toggleAll = (state: boolean) => {
        setOpenAccordions({
            web: state,
            instagram: state,
            whatsapp: state,
        });
    };

    // Group logs by channel with channel-specific running balances
    const logsByChannel = useMemo(() => {
        const groups: Record<ChannelKey, StockLogEntry[]> = {
            web: [],
            instagram: [],
            whatsapp: [],
        };

        if (!product) return groups;

        const orders = (product as any)?.orders ?? [];

        const getChannelCurrentStock = (chKey: ChannelKey) => {
            if (!product) return 0;
            if (chKey === 'instagram') return Number((product as any)?.stock?.instagram ?? (product as any)?.ig_qty ?? 0);
            if (chKey === 'whatsapp') return Number((product as any)?.stock?.whatsapp ?? (product as any)?.wa_qty ?? 0);
            return Number((product as any)?.stock?.web ?? (product as any)?.web_qty ?? 0);
        };

        (['web', 'instagram', 'whatsapp'] as ChannelKey[]).forEach((ch) => {
            const chOrders = orders.filter((o: any) => (o.channel || 'web').toLowerCase() === ch);
            const chStock = getChannelCurrentStock(ch);
            const chLedger = createLedgerFromOrders(chOrders, chStock);

            let filtered = chLedger;
            if (filterType !== 'all') {
                filtered = filtered.filter((entry) => entry.type === filterType);
            }
            if (logSearch.trim()) {
                const q = logSearch.toLowerCase();
                filtered = filtered.filter((entry) => {
                    return (
                        entry.refNo?.toLowerCase().includes(q) ||
                        entry.description?.toLowerCase().includes(q) ||
                        entry.title?.toLowerCase().includes(q) ||
                        entry.performedBy?.toLowerCase().includes(q) ||
                        entry.customerName?.toLowerCase().includes(q) ||
                        entry.customerPhone?.toLowerCase().includes(q)
                    );
                });
            }

            groups[ch] = filtered;
        });

        return groups;
    }, [product, filterType, logSearch]);

    if (!product) return null;

    const allExpanded = Object.values(openAccordions).every(Boolean);

    return (
        <Modal open={open} onClose={onClose} title="Channel Stock Activity Logs" width="6xl">
            <div className="space-y-4 max-h-[75vh] min-h-[480px] overflow-y-auto pr-1">
                {/* Product Summary Header Card */}
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 bg-slate-50 dark:bg-black/40 border border-slate-200/80 dark:border-slate-800 rounded-2xl">
                    <div className="flex items-center gap-3.5 min-w-0">
                        <div className="w-14 h-14 min-w-[56px] min-h-[56px] max-w-[56px] max-h-[56px] rounded-xl overflow-hidden border border-slate-200 dark:border-slate-700 shrink-0 shadow-xs bg-slate-100 dark:bg-slate-800">
                            <img
                                src={product.image || '/assets/images/default-product.png'}
                                alt={product.name}
                                className="w-full h-full object-cover"
                            />
                        </div>
                        <div className="min-w-0">
                            <h3 className="text-sm font-bold text-slate-850 dark:text-white truncate">
                                {product.name}
                            </h3>
                            <div className="flex items-center gap-2 mt-0.5 text-xs text-slate-500 dark:text-slate-400 font-mono">
                                <span>SKU: {product.sku || 'N/A'}</span>
                                {product.category && (
                                    <>
                                        <span>•</span>
                                        <span className="capitalize">{product.category}</span>
                                    </>
                                )}
                            </div>
                        </div>
                    </div>

                    <div className="flex items-center gap-2.5 flex-wrap self-start sm:self-center">
                        {/* Overall Total Stock Badge */}
                        <div className="px-3.5 py-1.5 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl text-right shadow-xs">
                            <span className="block text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                Total Available
                            </span>
                            <span className="text-sm font-extrabold text-slate-900 dark:text-white">
                                {(product as any).totalStock ?? (product as any).balance_qty ?? 0}
                            </span>
                        </div>

                        {/* Channel mini stock counters */}
                        <div className="flex items-center gap-1.5">
                            <div className="px-2.5 py-1 bg-blue-50 dark:bg-blue-950/40 text-blue-700 dark:text-blue-300 border border-blue-100 dark:border-blue-900 rounded-lg text-center text-xs font-bold">
                                <span className="text-[9px] block uppercase font-medium text-blue-500">Web</span>
                                {(product as any).stock?.web ?? (product as any).web_qty ?? 0}
                            </div>
                            <div className="px-2.5 py-1 bg-pink-50 dark:bg-pink-950/40 text-pink-700 dark:text-pink-300 border border-pink-100 dark:border-pink-900 rounded-lg text-center text-xs font-bold">
                                <span className="text-[9px] block uppercase font-medium text-pink-500">IG</span>
                                {(product as any).stock?.instagram ?? (product as any).ig_qty ?? 0}
                            </div>
                            <div className="px-2.5 py-1 bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300 border border-emerald-100 dark:border-emerald-900 rounded-lg text-center text-xs font-bold">
                                <span className="text-[9px] block uppercase font-medium text-emerald-500">WA</span>
                                {(product as any).stock?.whatsapp ?? (product as any).wa_qty ?? 0}
                            </div>
                        </div>
                    </div>
                </div>

                {/* Filter and Expand Controls */}
                <div className="flex flex-wrap items-center justify-between gap-3 pt-1">
                    <div className="flex items-center gap-2.5 flex-1 min-w-[240px]">
                        <div className="relative flex-1">
                            <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">
                                <IconSearch className="w-4 h-4" />
                            </span>
                            <input
                                type="text"
                                value={logSearch}
                                onChange={(e) => setLogSearch(e.target.value)}
                                placeholder="Search by customer name, phone, order number, remark..."
                                className="w-full pl-9 pr-4 py-2 text-xs bg-slate-50 dark:bg-black/30 border border-slate-200 dark:border-slate-700 rounded-xl text-slate-800 dark:text-white placeholder-slate-400 outline-none focus:border-amber-600 focus:bg-white transition-colors"
                            />
                        </div>

                        <select
                            value={filterType}
                            onChange={(e) => setFilterType(e.target.value)}
                            className="py-2 px-3 text-xs bg-slate-50 dark:bg-black/30 border border-slate-200 dark:border-slate-700 rounded-xl text-slate-800 dark:text-white outline-none focus:border-amber-600 focus:bg-white transition-colors cursor-pointer"
                        >
                            <option value="all">All Types</option>
                            <option value="sale">Sale</option>
                            <option value="return">Return</option>
                            <option value="restock">Stock Added</option>
                            <option value="adjustment">Adjustment</option>
                        </select>
                    </div>

                    <button
                        type="button"
                        onClick={() => toggleAll(!allExpanded)}
                        className="px-3 py-2 text-xs font-semibold text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-xl transition-colors cursor-pointer"
                    >
                        {allExpanded ? 'Collapse All Channels' : 'Expand All Channels'}
                    </button>
                </div>

                {/* 3 Channels Accordion Section */}
                <div className="space-y-3.5 pt-1">
                    {CHANNELS.map((ch) => {
                        const channelLogs = logsByChannel[ch.key] || [];
                        const isOpen = !!openAccordions[ch.key];
                        const channelStock =
                            (product as any).stock?.[ch.stockKey] ??
                            (product as any)[`${ch.key === 'instagram' ? 'ig' : ch.key === 'whatsapp' ? 'wa' : 'web'}_qty`] ??
                            0;

                        const totalQuantityMoved = channelLogs.reduce((acc, curr) => acc + curr.units, 0);

                        return (
                            <div
                                key={ch.key}
                                className={`border rounded-2xl overflow-hidden transition-all duration-200 ${ch.borderColor} bg-white dark:bg-slate-900 shadow-xs`}
                            >
                                {/* Accordion Header */}
                                <button
                                    type="button"
                                    onClick={() => toggleAccordion(ch.key)}
                                    className={`w-full p-4 flex items-center justify-between text-left transition-colors cursor-pointer select-none ${ch.headerBg}`}
                                >
                                    <div className="flex items-center gap-3 min-w-0">
                                        <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${ch.iconWrap}`}>
                                            {ch.icon}
                                        </div>
                                        <div>
                                            <div className="flex items-center gap-2 flex-wrap">
                                                <h4 className={`text-sm font-bold ${ch.titleColor}`}>
                                                    {ch.label} Channel
                                                </h4>
                                                <span className={`px-2.5 py-0.5 text-[10px] font-extrabold rounded-full border uppercase tracking-wider ${ch.badgeColor}`}>
                                                    {channelLogs.length} {channelLogs.length === 1 ? 'Activity' : 'Activities'}
                                                </span>
                                            </div>
                                            <p className="text-[11px] text-slate-500 dark:text-slate-400 mt-0.5 truncate">
                                                {ch.tagline}
                                            </p>
                                        </div>
                                    </div>

                                    <div className="flex items-center gap-3 shrink-0 ml-3">
                                        <div className="hidden sm:flex flex-col items-end text-right">
                                            <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                                Channel Stock
                                            </span>
                                            <span className="text-xs font-bold text-slate-800 dark:text-white">
                                                {channelStock} units
                                            </span>
                                        </div>

                                        <div className={`p-1.5 rounded-lg bg-white/80 dark:bg-black/30 border border-slate-200/60 dark:border-slate-700 text-slate-600 dark:text-slate-300 transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`}>
                                            <IconCaretDown className="w-4 h-4" />
                                        </div>
                                    </div>
                                </button>

                                {/* Accordion Body */}
                                {isOpen && (
                                    <div className="p-4 border-t border-slate-100 dark:border-slate-800">
                                        {channelLogs.length === 0 ? (
                                            <div className="py-8 text-center bg-slate-50/50 dark:bg-black/20 rounded-xl border border-dashed border-slate-200 dark:border-slate-800">
                                                <div className="w-10 h-10 rounded-full mx-auto mb-2 flex items-center justify-center bg-slate-100 dark:bg-slate-800 text-slate-400">
                                                    <IconBox className="w-5 h-5" />
                                                </div>
                                                <p className="text-xs font-medium text-slate-600 dark:text-slate-300">
                                                    No stock transactions found for {ch.label}.
                                                </p>
                                                <p className="text-[11px] text-slate-400 mt-0.5">
                                                    Orders or inventory movements from this channel will appear here.
                                                </p>
                                            </div>
                                        ) : (
                                            <div className="max-h-[340px] overflow-y-auto overflow-x-auto border border-slate-200/80 dark:border-slate-800 rounded-xl shadow-xs scrollbar-thin">
                                                <table className="w-full text-left text-xs text-slate-600 dark:text-slate-300 border-collapse">
                                                    <thead className="sticky top-0 z-10 shadow-xs">
                                                        <tr className="bg-slate-100 dark:bg-slate-800 border-b border-slate-200/80 dark:border-slate-700 text-slate-600 dark:text-slate-300 font-bold">
                                                            <th className="py-2.5 px-3.5 whitespace-nowrap bg-slate-100 dark:bg-slate-800">Date & Time</th>
                                                            <th className="py-2.5 px-3.5 whitespace-nowrap bg-slate-100 dark:bg-slate-800">Type</th>
                                                            <th className="py-2.5 px-3.5 whitespace-nowrap text-center bg-slate-100 dark:bg-slate-800">Qty</th>
                                                            <th className="py-2.5 px-3.5 whitespace-nowrap text-center bg-slate-100 dark:bg-slate-800">Before</th>
                                                            <th className="py-2.5 px-3.5 whitespace-nowrap text-center bg-slate-100 dark:bg-slate-800">After</th>
                                                            <th className="py-2.5 px-3.5 whitespace-nowrap bg-slate-100 dark:bg-slate-800">Customer / User</th>
                                                            <th className="py-2.5 px-3.5 whitespace-nowrap bg-slate-100 dark:bg-slate-800">Remark</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody className="divide-y divide-slate-100 dark:divide-slate-800">
                                                        {channelLogs.map((entry) => {
                                                            const isPositive = entry.units > 0;

                                                            let typeBadgeClass = 'bg-rose-50 text-rose-600 dark:bg-rose-950/40 dark:text-rose-400 border-rose-200 dark:border-rose-900';
                                                            let typeLabel = 'Sale';

                                                            if (entry.type === 'restock' || entry.type === 'purchase') {
                                                                typeBadgeClass = 'bg-emerald-50 text-emerald-600 dark:bg-emerald-950/40 dark:text-emerald-400 border-emerald-200 dark:border-emerald-900';
                                                                typeLabel = 'Stock Added';
                                                            } else if (entry.type === 'return') {
                                                                typeBadgeClass = 'bg-cyan-50 text-cyan-600 dark:bg-cyan-950/40 dark:text-cyan-400 border-cyan-200 dark:border-cyan-900';
                                                                typeLabel = 'Return';
                                                            } else if (entry.type === 'adjustment' || entry.type === 'correction') {
                                                                typeBadgeClass = 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400 border-slate-200 dark:border-slate-700';
                                                                typeLabel = 'Adjustment';
                                                            }

                                                            const formattedDate = new Date(entry.date).toLocaleString('en-IN', {
                                                                day: '2-digit',
                                                                month: 'short',
                                                                year: 'numeric',
                                                                hour: '2-digit',
                                                                minute: '2-digit',
                                                                hour12: true,
                                                            });

                                                            return (
                                                                <tr
                                                                    key={entry.id}
                                                                    className="hover:bg-slate-50/70 dark:hover:bg-slate-800/40 transition-colors"
                                                                >
                                                                    <td className="py-3 px-3.5 text-slate-700 dark:text-slate-200 whitespace-nowrap font-medium font-mono text-[11px]">
                                                                        {formattedDate}
                                                                    </td>
                                                                    <td className="py-3 px-3.5 whitespace-nowrap">
                                                                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold border uppercase tracking-wider ${typeBadgeClass}`}>
                                                                            {typeLabel}
                                                                        </span>
                                                                    </td>
                                                                    <td className={`py-3 px-3.5 whitespace-nowrap text-center font-bold font-mono text-xs ${isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'}`}>
                                                                        {isPositive ? `+${entry.units}` : entry.units}
                                                                    </td>
                                                                    <td className="py-3 px-3.5 whitespace-nowrap text-center font-mono text-slate-600 dark:text-slate-400">
                                                                        {entry.beforeStock ?? '-'}
                                                                    </td>
                                                                    <td className="py-3 px-3.5 whitespace-nowrap text-center font-mono text-slate-850 dark:text-white font-bold">
                                                                        {entry.afterStock ?? '-'}
                                                                    </td>
                                                                    <td className="py-3 px-3.5 whitespace-nowrap font-medium">
                                                                        <div>
                                                                            <div className="font-bold text-slate-850 dark:text-white">
                                                                                {entry.customerName || entry.performedBy || 'System'}
                                                                            </div>
                                                                            {entry.customerPhone ? (
                                                                                <div className="text-[11px] text-slate-400 dark:text-slate-500 font-mono">
                                                                                    {entry.customerPhone}
                                                                                </div>
                                                                            ) : (
                                                                                <div className="text-[10px] text-slate-400 dark:text-slate-500">
                                                                                    {entry.performedBy ?? 'System'}
                                                                                </div>
                                                                            )}
                                                                        </div>
                                                                    </td>
                                                                    <td className="py-3 px-3.5 whitespace-nowrap text-slate-800 dark:text-slate-200 font-semibold font-mono text-xs">
                                                                        {entry.refNo ? `Order ${entry.refNo}` : entry.description}
                                                                    </td>
                                                                </tr>
                                                            );
                                                        })}
                                                    </tbody>
                                                </table>
                                            </div>
                                        )}
                                    </div>
                                )}
                            </div>
                        );
                    })}
                </div>
            </div>
        </Modal>
    );
};

export default StockLogModal;