import { useState } from "react";
import { Card, Skeleton, Tag, Empty, Segmented } from "antd";
import { StopOutlined, CheckCircleOutlined } from "@ant-design/icons";
import type { VegetableStockItem } from "../../types/dashboard";

interface Props {
    data: VegetableStockItem[];
    loading?: boolean;
}

const VegetableStockList = ({ data, loading = false }: Props) => {
    const [activeTab, setActiveTab] = useState<'inStock' | 'outOfStock' | 'all'>('inStock');

    const inStockItems = data.filter((item) => item.remaining > 0 || (item.remainingBags && item.remainingBags > 0));
    const outOfStockItems = data.filter((item) => item.remaining <= 0 && (!item.remainingBags || item.remainingBags <= 0));

    const renderStockItem = (item: VegetableStockItem, idx: number) => {
        const isOut = item.remaining <= 0 && (!item.remainingBags || item.remainingBags <= 0);
        const hasBags = item.remainingBags && item.remainingBags > 0;
        const isBagOnly = item.remaining <= 0 && hasBags;

        return (
            <div
                key={`${item.id}-${idx}`}
                className={`rounded-xl p-3 border flex justify-between items-center transition-all duration-200 ${isOut
                    ? "bg-red-50/60 border-red-200 text-red-600"
                    : "bg-slate-50 border-slate-200 text-slate-900"
                    }`}
            >
                <div className="flex items-center gap-2.5">
                    <span className={`text-base ${isOut ? "text-red-500" : "text-emerald-500"}`}>
                        {isOut ? <StopOutlined /> : <CheckCircleOutlined />}
                    </span>
                    <span className="font-bold text-sm">
                        {item.vegetable}
                    </span>
                </div>
                <div className="flex items-center gap-2.5">
                    <span className="text-sm font-bold flex gap-1">
                        {!isBagOnly && (
                           <span>{item.remaining} <span className="text-xs text-slate-500 font-medium">Kg</span></span>
                        )}
                        {hasBags && (
                           <span>{item.remainingBags} <span className="text-xs text-slate-500 font-medium">Bags</span></span>
                        )}
                    </span>
                    {isOut ? (
                        <Tag color="error" className="m-0! rounded-md text-[11px]">Out of Stock</Tag>
                    ) : (
                        <Tag color="success" className="m-0! rounded-md text-[11px]">In Stock</Tag>
                    )}
                </div>
            </div>
        );
    };

    return (
        <Card
            variant="borderless"
            className="rounded-2xl shadow-md h-full"
            styles={{ body: { padding: 24 } }}
        >
            <div className="flex justify-between items-start mb-4">
                <div>
                    <h3 className="text-base font-bold text-slate-800 m-0">
                        Vegetable Stock Levels
                    </h3>
                    <p className="text-xs text-slate-400 mt-1 mb-0">
                        Current stock count for each vegetable
                    </p>
                </div>
                {!loading && data.length > 0 && (
                    <div className="flex gap-1.5 items-center flex-wrap">
                        <span className="bg-emerald-50 text-emerald-700 font-bold text-xs px-2.5 py-1 rounded-full border border-emerald-200 inline-flex items-center gap-1">
                            <CheckCircleOutlined /> In Stock: {inStockItems.length}
                        </span>
                        <span className="bg-red-50 text-red-600 font-bold text-xs px-2.5 py-1 rounded-full border border-red-200 inline-flex items-center gap-1">
                            <StopOutlined /> Out of Stock: {outOfStockItems.length}
                        </span>
                    </div>
                )}
            </div>

            {!loading && data.length > 0 && (
                <Segmented
                    value={activeTab}
                    onChange={(val) => setActiveTab(val as 'inStock' | 'outOfStock' | 'all')}
                    options={[
                        {
                            label: (
                                <span className="font-semibold text-xs px-1">
                                    In Stock ({inStockItems.length})
                                </span>
                            ),
                            value: "inStock",
                        },
                        {
                            label: (
                                <span className="font-semibold text-xs px-1">
                                    Out of Stock ({outOfStockItems.length})
                                </span>
                            ),
                            value: "outOfStock",
                        },
                        {
                            label: (
                                <span className="font-semibold text-xs px-1">
                                    All ({data.length})
                                </span>
                            ),
                            value: "all",
                        },
                    ]}
                    block
                    className="mb-4"
                />
            )}

            {loading ? (
                <div className="flex flex-col gap-4">
                    {[0, 1, 2].map(i => (
                        <div key={i}>
                            <div className="flex justify-between mb-1.5">
                                <Skeleton.Input active size="small" className="w-24!" />
                                <Skeleton.Input active size="small" className="w-16!" />
                            </div>
                            <Skeleton.Input active size="small" className="w-full! h-2!" />
                        </div>
                    ))}
                </div>
            ) : data.length === 0 ? (
                <Empty
                    description={<span className="text-slate-500 font-semibold">No stock data available</span>}
                    image={Empty.PRESENTED_IMAGE_SIMPLE}
                />
            ) : (
                <div className="flex flex-col gap-3 max-h-87.5 overflow-y-auto pr-1">
                    {activeTab === 'inStock' && (
                        inStockItems.length > 0 ? (
                            <div className="flex flex-col gap-2.5">
                                {inStockItems.map(renderStockItem)}
                            </div>
                        ) : (
                            <Empty
                                description={<span className="text-slate-500 font-semibold">No vegetables currently in stock</span>}
                                image={Empty.PRESENTED_IMAGE_SIMPLE}
                            />
                        )
                    )}

                    {activeTab === 'outOfStock' && (
                        outOfStockItems.length > 0 ? (
                            <div className="flex flex-col gap-2.5">
                                {outOfStockItems.map(renderStockItem)}
                            </div>
                        ) : (
                            <Empty
                                description={<span className="text-slate-500 font-semibold">No vegetables out of stock</span>}
                                image={Empty.PRESENTED_IMAGE_SIMPLE}
                            />
                        )
                    )}

                    {activeTab === 'all' && (
                        <>
                            {inStockItems.length > 0 && (
                                <div className="mb-3">
                                    <div className="text-[11px] font-bold text-emerald-600 uppercase tracking-wider mb-2.5 flex items-center gap-1.5">
                                        <CheckCircleOutlined /> In Stock ({inStockItems.length})
                                    </div>
                                    <div className="flex flex-col gap-2.5">
                                        {inStockItems.map(renderStockItem)}
                                    </div>
                                </div>
                            )}

                            {outOfStockItems.length > 0 && (
                                <div>
                                    <div className={`text-[11px] font-bold text-red-600 uppercase tracking-wider mb-2.5 flex items-center gap-1.5 ${inStockItems.length > 0 ? "mt-2" : ""}`}>
                                        <StopOutlined /> Out of Stock ({outOfStockItems.length})
                                    </div>
                                    <div className="flex flex-col gap-2.5">
                                        {outOfStockItems.map(renderStockItem)}
                                    </div>
                                </div>
                            )}
                        </>
                    )}
                </div>
            )}
        </Card>
    );
};

export default VegetableStockList;