import { formatPrice, formatVolume } from "@/lib/market";
import type { VolumeProfileResult } from "@/lib/volume-profile";

interface VolumeProfilePanelProps {
    profile: VolumeProfileResult | null;
    loading?: boolean;
}

function positionLabel(position: string): string {
    switch (position) {
        case "above_value_area":
            return "Above Value Area";
        case "below_value_area":
            return "Below Value Area";
        default:
            return "Inside Value Area";
    }
}

export default function VolumeProfilePanel({
    profile,
    loading = false,
}: VolumeProfilePanelProps) {
    if (loading && !profile) {
        return (
            <div className="mt-3 rounded-2xl border border-border/60 bg-card/80 p-4">
                <div className="h-4 w-40 animate-pulse rounded bg-muted/50" />
                <div className="mt-4 grid gap-3 sm:grid-cols-3">
                    {[1, 2, 3].map((item) => (
                        <div
                            key={item}
                            className="h-16 animate-pulse rounded-xl bg-muted/40"
                        />
                    ))}
                </div>
            </div>
        );
    }

    if (!profile) return null;

    const valueAreaPct = profile.value_area.volume_share * 100;
    const distance = profile.current.distance_from_poc_percent;

    return (
        <section className="mt-3 rounded-2xl border border-border/60 bg-card/80 p-4 shadow-sm">
            <div className="flex flex-wrap items-start justify-between gap-3">
                <div>
                    <div className="flex items-center gap-2">
                        <h2 className="text-sm font-semibold text-foreground">
                            Volume Profile
                        </h2>
                        <span className="rounded-md border border-border/60 bg-muted/40 px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wide text-muted-foreground">
                            Estimated OHLCV
                        </span>
                    </div>
                    <p className="mt-1 text-[11px] text-muted-foreground">
                        {profile.profile.used_candles} closed candles ·{" "}
                        {profile.profile.bins} price bins ·{" "}
                        {Math.round(profile.profile.value_area_percent * 100)}%
                        value area
                    </p>
                </div>
                <div className="text-right text-[11px] text-muted-foreground">
                    <div>{positionLabel(profile.current.position)}</div>
                    <div className="mt-0.5 tabular-nums">
                        {distance >= 0 ? "+" : ""}
                        {distance.toFixed(2)}% from POC
                    </div>
                </div>
            </div>

            <div className="mt-4 grid gap-3 sm:grid-cols-3">
                <Metric label="VAH" value={formatPrice(profile.vah.high)} />
                <Metric
                    label="POC"
                    value={formatPrice(profile.poc.price)}
                    emphasis
                />
                <Metric label="VAL" value={formatPrice(profile.val.low)} />
            </div>

            <div className="mt-4 grid gap-4 lg:grid-cols-[1fr_auto]">
                <div>
                    <div className="mb-2 flex items-center justify-between text-[10px] uppercase tracking-wider text-muted-foreground">
                        <span>Value Area</span>
                        <span>
                            {valueAreaPct.toFixed(1)}% of profile volume
                        </span>
                    </div>
                    <div className="h-2 overflow-hidden rounded-full bg-muted/50">
                        <div
                            className="h-full rounded-full bg-success-500/70"
                            style={{ width: `${Math.min(100, valueAreaPct)}%` }}
                        />
                    </div>
                </div>
                <div className="text-right">
                    <div className="text-[10px] uppercase tracking-wider text-muted-foreground">
                        Current
                    </div>
                    <div className="mt-1 text-sm font-semibold tabular-nums">
                        {formatPrice(profile.current.price)}
                    </div>
                </div>
            </div>

            <div className="mt-4 flex flex-wrap gap-2 text-[10px] text-muted-foreground">
                <span className="rounded-md bg-muted/40 px-2 py-1">
                    HVN {profile.nodes.hvn.length}
                </span>
                <span className="rounded-md bg-muted/40 px-2 py-1">
                    LVN {profile.nodes.lvn.length}
                </span>
                <span className="rounded-md bg-muted/40 px-2 py-1">
                    Volume {formatVolume(profile.data_quality.total_volume)}
                </span>
            </div>

            <p className="mt-3 text-[10px] leading-relaxed text-muted-foreground">
                Estimated from OHLCV candle ranges. It is not trade-level
                volume-at-price; use it as market context rather than an exact
                order-flow measurement.
            </p>
        </section>
    );
}

function Metric({
    label,
    value,
    emphasis = false,
}: {
    label: string;
    value: string;
    emphasis?: boolean;
}) {
    return (
        <div className="rounded-xl border border-border/50 bg-muted/20 px-3 py-2.5">
            <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
                {label}
            </div>
            <div
                className={`mt-1 text-sm tabular-nums ${emphasis ? "font-bold text-success-600 dark:text-success-400" : "font-semibold text-foreground"}`}
            >
                {value}
            </div>
        </div>
    );
}