import { Card, Skeleton, Empty } from "antd";
import type { TopDemandItem } from "../../types/dashboard";

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

const MEDAL_COLORS = ["#f59e0b", "#9ca3af", "#b45309"];
const BAR_COLORS = ["#10b981", "#6366f1", "#f97316", "#ec4899", "#3b82f6"];

const TopDemandedVegetables = ({ data, loading = false }: Props) => {
    const maxSold = data.length > 0 ? Math.max(...data.map((d) => Math.max(d.sold, d.bags || 0))) : 1;

    return (
        <Card
            variant="borderless"
            style={{ borderRadius: 20, boxShadow: "0 4px 24px rgba(0,0,0,0.07)", height: "100%" }}
            styles={{ body: { padding: 24 } }}
        >
            <div style={{ marginBottom: 20 }}>
                <h3 style={{ fontSize: 17, fontWeight: 700, color: "#1e293b", margin: 0 }}>
                    Top Demanded Vegetables
                </h3>
                <p style={{ fontSize: 13, color: "#94a3b8", marginTop: 4, marginBottom: 0 }}>
                    Ranked by total kg / bags sold
                </p>
            </div>

            {loading ? (
                <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                    {[0, 1, 2, 3].map((i) => (
                        <div key={i}>
                            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
                                <Skeleton.Input active size="small" style={{ width: 110 }} />
                                <Skeleton.Input active size="small" style={{ width: 65 }} />
                            </div>
                            <Skeleton.Input active size="small" style={{ width: "100%", height: 8 }} />
                        </div>
                    ))}
                </div>
            ) : data.length === 0 ? (
                <Empty description="No sales data available" image={Empty.PRESENTED_IMAGE_SIMPLE} />
            ) : (
                <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                    {data.map((item, idx) => {
                        const pct = maxSold > 0 ? (Math.max(item.sold, item.bags || 0) / maxSold) * 100 : 0;
                        const barColor = BAR_COLORS[idx % BAR_COLORS.length];
                        const medal = idx < 3 ? MEDAL_COLORS[idx] : null;

                        return (
                            <div key={`${item.vegetable}-${idx}`}>
                                <div style={{
                                    display: "flex",
                                    justifyContent: "space-between",
                                    alignItems: "center",
                                    marginBottom: 8,
                                }}>
                                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                                        {/* Rank badge */}
                                        <div style={{
                                            width: 26,
                                            height: 26,
                                            borderRadius: 8,
                                            background: medal
                                                ? `linear-gradient(135deg, ${medal}33, ${medal}22)`
                                                : "#f1f5f9",
                                            border: medal ? `1px solid ${medal}55` : "1px solid #e2e8f0",
                                            display: "flex",
                                            alignItems: "center",
                                            justifyContent: "center",
                                            fontSize: 11,
                                            fontWeight: 800,
                                            color: medal ?? "#64748b",
                                            flexShrink: 0,
                                        }}>
                                            {idx + 1}
                                        </div>
                                        <span style={{ fontWeight: 700, color: "#1e293b", fontSize: 14 }}>
                                            {item.vegetable}
                                        </span>
                                    </div>
                                    <span style={{
                                        fontSize: 14,
                                        fontWeight: 800,
                                        color: barColor,
                                    }}>
                                        {item.sold > 0 && `${item.sold.toLocaleString()} kg`}
                                        {item.sold > 0 && item.bags && item.bags > 0 && " / "}
                                        {item.bags && item.bags > 0 && `${item.bags.toLocaleString()} bags`}
                                    </span>
                                </div>

                                {/* Progress bar */}
                                <div style={{ height: 8, background: "#f1f5f9", borderRadius: 8, overflow: "hidden" }}>
                                    <div style={{
                                        width: `${pct.toFixed(1)}%`,
                                        height: "100%",
                                        background: `linear-gradient(90deg, ${barColor}cc, ${barColor})`,
                                        borderRadius: 8,
                                        transition: "width 0.8s cubic-bezier(0.16, 1, 0.3, 1)",
                                    }} />
                                </div>
                            </div>
                        );
                    })}
                </div>
            )}
        </Card>
    );
};

export default TopDemandedVegetables;