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

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

// const STATUS_CONFIG: Record<string, { label: string; color: string; icon: React.ReactNode; bg: string }> = {
//     PAID: {
//         label: "Paid",
//         color: "success",
//         icon: <CheckCircleOutlined />,
//         bg: "linear-gradient(135deg, #ecfdf5, #d1fae5)",
//     },
//     UNPAID: {
//         label: "Unpaid",
//         color: "error",
//         icon: <ClockCircleOutlined />,
//         bg: "linear-gradient(135deg, #fef2f2, #fee2e2)",
//     },
//     PARTIALLY_PAID: {
//         label: "Partial",
//         color: "warning",
//         icon: <ExclamationCircleOutlined />,
//         bg: "linear-gradient(135deg, #fff7ed, #fed7aa)",
//     },
// };

const formatDate = (dateStr: string) => {
    const d = new Date(dateStr);
    return d.toLocaleDateString("en-IN", { day: "numeric", month: "short" });
};

const RecentSales = ({ data, loading = false }: Props) => {
    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={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
                <div>
                    <h3 style={{ fontSize: 17, fontWeight: 700, color: "#1e293b", margin: 0 }}>
                        Recent Sales
                    </h3>
                    <p style={{ fontSize: 13, color: "#94a3b8", marginTop: 4, marginBottom: 0 }}>
                        Today's transactions
                    </p>
                </div>
            </div>

            {loading ? (
                <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                    {[0, 1, 2, 3, 4].map(i => (
                        <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, padding: "10px 0", borderBottom: "1px solid #f1f5f9" }}>
                            <Skeleton.Avatar active size={40} />
                            <div style={{ flex: 1 }}>
                                <Skeleton.Input active size="small" style={{ width: 140, display: "block", marginBottom: 6 }} />
                                <Skeleton.Input active size="small" style={{ width: 90 }} />
                            </div>
                            <Skeleton.Input active size="small" style={{ width: 70 }} />
                        </div>
                    ))}
                </div>
            ) : data.length === 0 ? (
                <Empty description="No recent sales" image={Empty.PRESENTED_IMAGE_SIMPLE} />
            ) : (
                <div style={{ display: "flex", flexDirection: "column", gap: 4, maxHeight: 350, overflowY: "auto", paddingRight: 8 }}>
                    {data.map((item, idx) => {
                        // const status = STATUS_CONFIG[item.status] ?? STATUS_CONFIG.UNPAID;
                        const initials = item.customer
                            .split(" ")
                            .map(w => w[0])
                            .join("")
                            .slice(0, 2)
                            .toUpperCase();
                        const avatarColors = ["#6366f1", "#10b981", "#f97316", "#ec4899", "#3b82f6"];
                        const avatarBg = avatarColors[idx % avatarColors.length];

                        return (
                            <div
                                key={`${item.invoiceNo}-${idx}`}
                                style={{
                                    display: "flex",
                                    alignItems: "center",
                                    gap: 14,
                                    padding: "12px 14px",
                                    borderRadius: 14,
                                    transition: "background 0.15s ease",
                                    cursor: "default",
                                }}
                                onMouseEnter={e => (e.currentTarget.style.background = "#f8fafc")}
                                onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
                            >
                                {/* Avatar */}
                                <div style={{
                                    width: 42,
                                    height: 42,
                                    borderRadius: 13,
                                    background: avatarBg,
                                    display: "flex",
                                    alignItems: "center",
                                    justifyContent: "center",
                                    color: "#fff",
                                    fontSize: 14,
                                    fontWeight: 800,
                                    flexShrink: 0,
                                }}>
                                    {initials}
                                </div>

                                {/* Customer & Invoice */}
                                <div style={{ flex: 1, minWidth: 0 }}>
                                    <div style={{
                                        fontWeight: 700,
                                        fontSize: 14,
                                        color: "#1e293b",
                                        whiteSpace: "nowrap",
                                        overflow: "hidden",
                                        textOverflow: "ellipsis",
                                    }}>
                                        {item.customer}
                                    </div>
                                    <div style={{ fontSize: 12, color: "#94a3b8", marginTop: 2 }}>
                                        {item.invoiceNo} · {formatDate(item.date)}
                                    </div>
                                </div>

                                {/* Amount & Status */}
                                <div style={{ textAlign: "right", flexShrink: 0 }}>
                                    {item.amount === 0 ? (
                                        <Tag color="red" style={{ margin: 0, borderRadius: 6, fontWeight: 700 }}>
                                            Returned
                                        </Tag>
                                    ) : (
                                        <div style={{ fontWeight: 800, fontSize: 15, color: "#1e293b" }}>
                                            ₹{item.amount.toLocaleString()}
                                        </div>
                                    )}
                                </div>
                            </div>
                        );
                    })}
                </div>
            )}

            <style>{`
                @keyframes pulse {
                    0%, 100% { opacity: 1; }
                    50% { opacity: 0.4; }
                }
            `}</style>
        </Card>
    );
};

export default RecentSales;