import type { ReactNode } from "react";
import { RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";

interface DataCardStateProps {
    loading?: boolean;
    error?: string | null;
    hasData?: boolean;
    onRetry?: () => void;
    loadingLabel?: string;
    errorLabel?: string;
    empty?: boolean;
    emptyLabel?: string;
    children?: ReactNode;
}

/** Consistent loading/error/empty affordances for data-backed trading cards. */
export function DataCardState({
    loading = false,
    error,
    hasData = false,
    onRetry,
    loadingLabel = "Loading data…",
    errorLabel = "Data terakhir yang tersedia tetap dipertahankan.",
    empty = false,
    emptyLabel = "Belum ada data untuk ditampilkan.",
    children,
}: DataCardStateProps) {
    return (
        <>
            {error && (
                <div
                    className="mb-3 flex flex-col gap-3 rounded-xl border border-destructive/30 bg-destructive/10 p-3.5 text-xs font-medium text-destructive shadow-xs sm:flex-row sm:items-center sm:justify-between"
                    role="alert"
                    aria-live="polite"
                >
                    <span>
                        {error}{" "}
                        {hasData ? errorLabel : "Coba lagi untuk memuat data."}
                    </span>
                    {onRetry && (
                        <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            onClick={onRetry}
                            disabled={loading}
                            className="h-8 gap-2"
                        >
                            <RefreshCw
                                className={`size-3.5 ${loading ? "animate-spin" : ""}`}
                            />
                            Retry
                        </Button>
                    )}
                </div>
            )}

            {loading && !hasData && (
                <div
                    className="mb-3 space-y-3 rounded-xl border border-border bg-muted/10 p-4"
                    role="status"
                    aria-live="polite"
                    aria-label={loadingLabel}
                >
                    <div className="flex items-center gap-2">
                        <RefreshCw className="size-3.5 animate-spin text-muted-foreground" />
                        <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
                            {loadingLabel}
                        </span>
                    </div>
                    <div className="grid gap-2 sm:grid-cols-3">
                        {[0, 1, 2].map((item) => (
                            <div
                                key={item}
                                className="h-14 animate-pulse rounded-lg bg-muted/50"
                            />
                        ))}
                    </div>
                    <div className="h-9 w-full animate-pulse rounded-lg bg-muted/40" />
                </div>
            )}

            {!loading && !error && empty && (
                <div className="mb-3 rounded-xl border border-dashed border-border bg-muted/10 p-6 text-center text-xs text-muted-foreground">
                    {emptyLabel}
                </div>
            )}

            {children}
        </>
    );
}