import { useState } from 'react';

type Breakdown = { first: number; second: number; third: number; long_term: number };

/**
 * The "N exp ≤90d" figure hides useful structure — a first-renewal tenant is far more
 * likely to leave than a long-term one. Hovering reveals the split.
 */
export function ExpiringTooltip({ count, days, breakdown }: {
    count: number; days: number; breakdown?: Breakdown;
}) {
    const [open, setOpen] = useState(false);

    if (! breakdown) {
        return <span className="text-amber-600">{count} exp ≤ {days}d</span>;
    }

    return (
        <span className="relative inline-block"
            onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
            <span className="cursor-help border-b border-dotted border-amber-600 text-amber-600">
                {count} exp ≤ {days}d
            </span>
            {open && (
                <span className="absolute right-0 top-5 z-30 w-44 rounded-lg border border-border bg-card p-2.5 text-left shadow-lg">
                    <Row label="1st renewal" value={breakdown.first} tone="text-rose-600" />
                    <Row label="2nd renewal" value={breakdown.second} tone="text-amber-600" />
                    <Row label="3rd renewal" value={breakdown.third} tone="text-yellow-600" />
                    <Row label="Long term" value={breakdown.long_term} tone="text-emerald-600" />
                </span>
            )}
        </span>
    );
}

function Row({ label, value, tone }: { label: string; value: number; tone: string }) {
    return (
        <span className="flex items-center justify-between py-0.5 text-[11px]">
            <span className={tone}>{label}</span>
            <span className="font-semibold text-foreground">{value}</span>
        </span>
    );
}