import { Card, Skeleton, Tag, Tooltip } from "antd";
import { ArrowDownOutlined, ArrowUpOutlined, InfoCircleOutlined } from "@ant-design/icons";
import type { AccountBalanceBreakdown } from "../../types/dashboard";

interface Props {
    pendingVendorPayments: number;
    pendingCustomerReceipts: number;
    vendorPayments?: AccountBalanceBreakdown;
    customerReceipts?: AccountBalanceBreakdown;
    loading?: boolean;
}

const OutstandingAccounts = ({
    pendingVendorPayments,
    pendingCustomerReceipts,
    vendorPayments,
    customerReceipts,
    loading = false,
}: Props) => {
    const activeVendor = vendorPayments?.active ?? pendingVendorPayments;
    const inactiveVendor = vendorPayments?.inactive ?? 0;
    const totalVendor = vendorPayments?.total ?? activeVendor;

    const activeCustomer = customerReceipts?.active ?? pendingCustomerReceipts;
    const inactiveCustomer = customerReceipts?.inactive ?? 0;
    const totalCustomer = customerReceipts?.total ?? activeCustomer;

    const overallActiveTotal = activeVendor + activeCustomer;

    const items = [
        {
            label: "Supplier Payments",
            activeAmount: activeVendor,
            inactiveAmount: inactiveVendor,
            totalAmount: totalVendor,
            icon: <ArrowDownOutlined />,
            color: "#ef4444",
            bg: "linear-gradient(135deg, #fef2f2, #fee2e2)",
            iconBg: "#ef4444",
            pct: overallActiveTotal > 0 ? (activeVendor / overallActiveTotal) * 100 : 0,
        },
        {
            label: "Customer Receipts",
            activeAmount: activeCustomer,
            inactiveAmount: inactiveCustomer,
            totalAmount: totalCustomer,
            icon: <ArrowUpOutlined />,
            color: "#f97316",
            bg: "linear-gradient(135deg, #fff7ed, #fed7aa)",
            iconBg: "#f97316",
            pct: overallActiveTotal > 0 ? (activeCustomer / overallActiveTotal) * 100 : 0,
        },
    ];

    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, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div>
                    <h3 style={{ fontSize: 17, fontWeight: 700, color: "#1e293b", margin: 0 }}>
                        Outstanding Accounts
                    </h3>
                    <p style={{ fontSize: 13, color: "#94a3b8", marginTop: 4, marginBottom: 0 }}>
                        Active & Inactive receivables & payables breakdown
                    </p>
                </div>
            </div>

            {loading ? (
                <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                    {[0, 1].map(i => (
                        <div key={i} style={{ padding: 16, borderRadius: 14, background: "#f8fafc", display: "flex", gap: 12 }}>
                            <Skeleton.Avatar active size={44} />
                            <div style={{ flex: 1 }}>
                                <Skeleton.Input active size="small" style={{ width: 120, marginBottom: 8, display: "block" }} />
                                <Skeleton.Input active size="medium" style={{ width: 90 }} />
                            </div>
                        </div>
                    ))}
                </div>
            ) : (
                <>
                    {/* Active Total */}
                    <div style={{
                        background: "linear-gradient(135deg, #1e293b, #334155)",
                        borderRadius: 14,
                        padding: "16px 20px",
                        marginBottom: 16,
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                    }}>
                        <div>
                            <span style={{ color: "rgba(255,255,255,0.7)", fontSize: 13, fontWeight: 600 }}>
                                Active Outstanding Total
                            </span>
                            <div style={{ color: "rgba(255,255,255,0.5)", fontSize: 11, marginTop: 2 }}>
                                (Active Vendors + Active Customers)
                            </div>
                        </div>
                        <span style={{ color: "#fff", fontSize: 22, fontWeight: 800 }}>
                            ₹{overallActiveTotal.toLocaleString()}
                        </span>
                    </div>

                    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                        {items.map(item => (
                            <div
                                key={item.label}
                                style={{
                                    background: item.bg,
                                    borderRadius: 14,
                                    padding: "16px 18px",
                                    display: "flex",
                                    flexDirection: "column",
                                    gap: 10,
                                    transition: "transform 0.2s",
                                    cursor: "default",
                                }}
                                onMouseEnter={e => (e.currentTarget.style.transform = "scale(1.01)")}
                                onMouseLeave={e => (e.currentTarget.style.transform = "scale(1)")}
                            >
                                <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                                    <div style={{
                                        width: 40,
                                        height: 40,
                                        borderRadius: 12,
                                        background: item.iconBg,
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        color: "#fff",
                                        fontSize: 16,
                                        flexShrink: 0,
                                    }}>
                                        {item.icon}
                                    </div>
                                    <div style={{ flex: 1, minWidth: 0 }}>
                                        <div style={{ fontSize: 13, color: "#475569", fontWeight: 700 }}>
                                            {item.label}
                                        </div>
                                        <div style={{ fontSize: 20, fontWeight: 800, color: "#1e293b", marginTop: 2 }}>
                                            ₹{item.activeAmount.toLocaleString()}
                                            <span style={{ fontSize: 11, fontWeight: 600, color: "#64748b", marginLeft: 6 }}>
                                                (Active)
                                            </span>
                                        </div>
                                    </div>
                                    <span style={{
                                        fontSize: 12,
                                        fontWeight: 700,
                                        color: item.color,
                                        background: "rgba(255,255,255,0.7)",
                                        padding: "3px 8px",
                                        borderRadius: 6,
                                        flexShrink: 0,
                                    }}>
                                        {item.pct.toFixed(0)}%
                                    </span>
                                </div>

                                {/* Active vs Inactive Individual Breakdown */}
                                <div style={{
                                    display: "flex",
                                    alignItems: "center",
                                    justifyContent: "space-between",
                                    background: "rgba(255,255,255,0.6)",
                                    padding: "6px 12px",
                                    borderRadius: 8,
                                    fontSize: 12,
                                    color: "#334155",
                                }}>
                                    <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
                                        <span>
                                            <Tag color="success" style={{ marginRight: 4, borderRadius: 4 }}>Active</Tag>
                                            <strong>₹{item.activeAmount.toLocaleString()}</strong>
                                        </span>
                                        <span>
                                            <Tag color="error" style={{ marginRight: 4, borderRadius: 4 }}>Inactive</Tag>
                                            <strong>₹{item.inactiveAmount.toLocaleString()}</strong>
                                        </span>
                                    </div>
                                    <Tooltip title={`Total = Active (₹${item.activeAmount.toLocaleString()}) + Inactive (₹${item.inactiveAmount.toLocaleString()})`}>
                                        <span style={{ color: "#64748b", fontWeight: 600, display: "flex", alignItems: "center", gap: 4 }}>
                                            Total: ₹{item.totalAmount.toLocaleString()} <InfoCircleOutlined style={{ fontSize: 11 }} />
                                        </span>
                                    </Tooltip>
                                </div>

                                {/* Progress strip */}
                                <div style={{ height: 4, background: "rgba(0,0,0,0.08)", borderRadius: 4, overflow: "hidden" }}>
                                    <div style={{
                                        width: `${item.pct.toFixed(1)}%`,
                                        height: "100%",
                                        background: item.iconBg,
                                        borderRadius: 4,
                                        transition: "width 0.6s ease",
                                    }} />
                                </div>
                            </div>
                        ))}
                    </div>
                </>
            )}
        </Card>
    );
};

export default OutstandingAccounts;