// components/OrderLogModal.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 { Product } from '../utils/product';
import IconArrowLeft from '../components/Icon/IconArrowLeft';
import { useNavigate } from 'react-router-dom';

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

export type SalesOrder = {
    id: string;
    orderNo?: string;
    customerName: string;
    channel: ChannelKey;
    quantity?: number;
    qty?: number;
    amount: number;
    status: string;
    date: string;
};

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

const CHANNEL_META: Record<ChannelKey, { label: string; icon: React.ReactNode; wrap: string }> = {
    instagram: { label: 'Instagram', icon: <IconInstagram />, wrap: 'bg-pink-100 text-pink-600' },
    web: { label: 'Website', icon: <IconGlobe />, wrap: 'bg-blue-100 text-blue-600' },
    whatsapp: { label: 'WhatsApp', icon: <IconWhatsapp />, wrap: 'bg-emerald-100 text-emerald-600' },
};

const statusStyles: Record<string, string> = {
    Delivered: 'bg-emerald-50 text-emerald-700 border-emerald-200',
    Packed: 'bg-purple-50 text-purple-700 border-purple-200',
    Shipped: 'bg-blue-50 text-blue-700 border-blue-200',
    Processing: 'bg-amber-50 text-amber-700 border-amber-200',
    Pending: 'bg-amber-50 text-amber-700 border-amber-200',
    Cancelled: 'bg-rose-50 text-rose-700 border-rose-200',
};

const OrderLogModal = ({ open, onClose, products }: Props) => {
    const product = products[0] ?? null;
    const navigate = useNavigate();

    const [searchTerm, setSearchTerm] = useState('');
    const [startDate, setStartDate] = useState('');
    const [endDate, setEndDate] = useState('');

    const orders: SalesOrder[] = useMemo(() => {
        const raw = (product as any)?.orders ?? [];
        return [...raw].sort(
            (a: SalesOrder, b: SalesOrder) =>
                new Date(b.date).getTime() - new Date(a.date).getTime()
        );
    }, [product]);

    const filteredOrders = useMemo(() => {
        return orders.filter((o) => {
            // Customer & Order ID search
            if (searchTerm.trim()) {
                const q = searchTerm.toLowerCase();
                const matchCustomer = o.customerName?.toLowerCase().includes(q);
                const matchOrderId = (o.orderNo || o.id || '').toLowerCase().includes(q);
                if (!matchCustomer && !matchOrderId) return false;
            }

            // Date Range filtering
            if (startDate) {
                const oDate = new Date(o.date).setHours(0, 0, 0, 0);
                const sDate = new Date(startDate).setHours(0, 0, 0, 0);
                if (oDate < sDate) return false;
            }
            if (endDate) {
                const oDate = new Date(o.date).setHours(0, 0, 0, 0);
                const eDate = new Date(endDate).setHours(23, 59, 59, 999);
                if (oDate > eDate) return false;
            }

            return true;
        });
    }, [orders, searchTerm, startDate, endDate]);

    if (!product) return null;

    return (
        <Modal open={open} onClose={onClose} title="Order Log" width="2xl">
            <div className="space-y-4 max-h-[580px] overflow-y-auto pr-1">
                {/* product header */}
                <div className="flex items-center gap-3 pb-3 border-b border-slate-100">
                    <img
                        src={product.image}
                        className="h-11 w-11 rounded-lg object-cover flex-shrink-0"
                    />
                    <div className="min-w-0 flex-1">
                        <div className="text-sm font-semibold text-slate-800 truncate">
                            {product.name}
                        </div>
                        <div className="text-xs text-slate-400">{product.sku}</div>
                    </div>
                    <div className="text-right flex-shrink-0">
                        <div className="text-[10px] font-semibold text-slate-400 uppercase">
                            Total Orders
                        </div>
                        <div className="text-base font-bold text-slate-800">
                            {filteredOrders.length} {filteredOrders.length !== orders.length && <span className="text-xs font-normal text-slate-400">/ {orders.length}</span>}
                        </div>
                    </div>
                </div>

                {/* Advanced Filter Controls */}
                <div className="bg-slate-50 p-3 rounded-xl border border-slate-200/80 space-y-2.5">
                    <div className="flex items-center justify-between text-xs font-semibold text-slate-700">
                        <span>Filter Orders</span>
                        {(searchTerm || startDate || endDate) && (
                            <button
                                type="button"
                                onClick={() => {
                                    setSearchTerm('');
                                    setStartDate('');
                                    setEndDate('');
                                }}
                                className="text-[11px] text-amber-600 hover:text-amber-700 font-semibold hover:underline"
                            >
                                Reset Filters
                            </button>
                        )}
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
                        {/* Customer / Order ID search */}
                        <div className="relative">
                            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
                                <IconSearch className="w-3.5 h-3.5" />
                            </span>
                            <input
                                type="text"
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                                placeholder="Customer or Order ID..."
                                className="w-full pl-8 pr-3 py-1.5 text-xs bg-white border border-slate-200 rounded-lg text-slate-800 placeholder-slate-400 outline-none focus:border-amber-600 transition-colors"
                            />
                        </div>

                        {/* Start Date */}
                        <div className="flex items-center gap-1.5 bg-white border border-slate-200 rounded-lg px-2.5 py-1 text-xs">
                            <span className="text-[10px] font-semibold text-slate-400 uppercase flex-shrink-0">From:</span>
                            <input
                                type="date"
                                value={startDate}
                                onChange={(e) => setStartDate(e.target.value)}
                                className="w-full text-xs text-slate-700 bg-transparent outline-none cursor-pointer"
                            />
                        </div>

                        {/* End Date */}
                        <div className="flex items-center gap-1.5 bg-white border border-slate-200 rounded-lg px-2.5 py-1 text-xs">
                            <span className="text-[10px] font-semibold text-slate-400 uppercase flex-shrink-0">To:</span>
                            <input
                                type="date"
                                value={endDate}
                                onChange={(e) => setEndDate(e.target.value)}
                                className="w-full text-xs text-slate-700 bg-transparent outline-none cursor-pointer"
                            />
                        </div>
                    </div>
                </div>

                {/* order list */}
                {filteredOrders.length === 0 ? (
                    <p className="text-sm text-slate-400 py-6 text-center">
                        {searchTerm || startDate || endDate ? 'No orders match your filter criteria.' : 'No orders found for this product yet.'}
                    </p>
                ) : (
                    <div className="space-y-2.5">
                        {filteredOrders.map((o) => {
                            const chKey = (o.channel || 'web').toLowerCase() as ChannelKey;
                            const channelMeta = CHANNEL_META[chKey] || CHANNEL_META.whatsapp;
                            const qty = o.qty ?? o.quantity ?? 1;

                            return (
                                <div
                                    key={o.id}
                                    className="rounded-xl border border-slate-200 px-3.5 py-3 hover:border-amber-400 hover:shadow-sm transition-all"
                                >
                                    <div className="flex items-center justify-between gap-2 flex-wrap">
                                        <div className="flex items-center gap-2 min-w-0">
                                            <span className="font-mono text-[10px] font-bold text-slate-400">
                                                {o.orderNo ?? o.id}
                                            </span>
                                            {channelMeta && (
                                                <span
                                                    className={`flex h-5 w-5 items-center justify-center rounded-full ${channelMeta.wrap}`}
                                                    title={channelMeta.label}
                                                >
                                                    {channelMeta.icon}
                                                </span>
                                            )}
                                        </div>
                                        <span className="text-[10px] text-slate-400 flex-shrink-0">
                                            {new Date(o.date).toLocaleDateString('en-IN', {
                                                day: '2-digit',
                                                month: 'short',
                                                year: 'numeric',
                                            })}
                                        </span>
                                    </div>

                                    <p className="text-xs font-semibold text-slate-800 mt-2">
                                        Customer: <span className="font-normal text-slate-600">{o.customerName}</span>
                                    </p>

                                    <div className="flex items-center justify-between gap-2 mt-2.5 pt-2.5 border-t border-slate-100">
                                        <p className="text-xs text-slate-500">
                                            <span className="font-bold text-slate-900">{qty} units</span>{' '}
                                            at ₹{o.amount.toLocaleString('en-IN')}
                                        </p>

                                        <span
                                            className={`inline-flex items-center px-2.5 py-1 rounded-full text-[11px] font-semibold border ${statusStyles[o.status] ?? 'bg-slate-50 text-slate-600 border-slate-200'
                                                }`}
                                        >
                                            {o.status}
                                        </span>
                                    </div>

                                    <div className="mt-2 flex justify-end">
                                        <button
                                            type="button"
                                            className="text-[10px] text-amber-600 font-bold flex items-center gap-1 hover:underline"
                                            onClick={() => navigate("/manage_order")}
                                        >
                                            Open Order
                                            <IconArrowLeft />
                                        </button>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                )}
            </div>
        </Modal>
    );
};

export default OrderLogModal;