import { AlertTriangle } from 'lucide-react';

/**
 * Expired-stock markers, shared by both NetSuite Stock Barang screens.
 *
 * User feedback 2026-08-03 (Ka Tesalonika / Ci Clara + Tim Kosmetik): an expired lot has to be
 * identifiable AT A GLANCE — before opening anything. The old treatment was a red word "expired"
 * in 11px next to the date plus a red quantity, which reads as ordinary text while scanning a
 * dense table.
 *
 * Three pieces, deliberately layered so the signal survives whatever the user looks at first:
 *   · ExpiredNotice — a banner above the tables saying how many lots are expired
 *   · ExpiredBadge  — an icon + word pill ON the row (icon, not colour alone: colour-blind users
 *                     and printed/greyscale copies lose a red-only cue)
 *   · EXPIRED_ROW   — the row tint + red left rail, so a downward scan catches the row itself
 */

/** Row classes for an expired lot: red left rail + tint (hover keeps the tint). */
export const EXPIRED_ROW = '[&>td]:!bg-danger/8 hover:[&>td]:!bg-danger/15';
/** First cell of an expired row — carries the rail so it reads as one marked band. */
export const EXPIRED_FIRST_CELL = 'border-l-2 border-l-danger';

/** Inline pill for the row / summary cell. */
export function ExpiredBadge({ label = 'Expired', className = '' }) {
    return (
        <span className={`inline-flex items-center gap-1 rounded-full bg-danger/15 px-2 py-0.5 text-[10px] font-bold text-danger-text ${className}`}>
            <AlertTriangle className="size-3" aria-hidden="true" />
            {label}
        </span>
    );
}

/**
 * Banner above the result tables. Rendered only when something IS expired, so it never adds
 * noise to a clean stock position.
 *
 * @param {{ lots?: number, qty?: string|null, unit?: string }} props
 */
export function ExpiredNotice({ lots = 0, qty = null, unit = '' }) {
    if (!lots) return null;

    return (
        <div role="status" className="mb-3 flex items-start gap-2.5 rounded-xl border border-danger/40 bg-danger-bg/60 px-4 py-2.5">
            <AlertTriangle className="mt-0.5 size-4 shrink-0 text-danger-text" aria-hidden="true" />
            <p className="m-0 text-[12.5px] font-semibold text-danger-text">
                {lots} lot sudah expired{qty ? <> · {qty} {unit}</> : null}
                <span className="ml-1 font-medium text-danger-text/80">— ditandai merah di tabel, dan tidak dihitung ke OnHand.</span>
            </p>
        </div>
    );
}