'use client';

import styles from '../styles/QuantityCard.module.css';
import { randInRange } from '../app/items/types';

type Props = {
    id: string;
    name: string;
    iconUrl: string;
    qty: number;
    randMin: number;
    randMax: number;
    onSetQty: (id: string, qty: number) => void;
};

const clamp = (v: number) => Math.min(32767, Math.max(0, v));

export default function QuantityCard({ id, name, iconUrl, qty, randMin, randMax, onSetQty }: Props) {
    const active = qty > 0;

    return (
        <div className={`${styles.card} ${active ? styles.cardActive : ''}`}>
            <img className={styles.icon} src={iconUrl} alt={name} loading="lazy" />
            <span className={styles.name}>{name}</span>

            {active ? (
                <>
                    <div className={styles.qtyRow}>
                        <button className={styles.qtyBtn} onClick={() => onSetQty(id, clamp(qty - 1))}>−</button>
                        <input
                            className={styles.qtyInput}
                            type="number"
                            value={qty}
                            min={0}
                            max={5000}
                            onChange={e => {
                                const v = parseInt(e.target.value);
                                if (!isNaN(v)) onSetQty(id, clamp(v));
                            }}
                        />
                        <button className={styles.qtyBtn} onClick={() => onSetQty(id, clamp(qty + 1))}>+</button>
                    </div>

                    <div className={styles.quickRow}>
                        <button className={styles.quickBtn} onClick={() => onSetQty(id, 100)}>100</button>
                        <button
                            className={`${styles.quickBtn} ${styles.quickBtnRand}`}
                            onClick={() => onSetQty(id, randInRange(randMin, randMax))}
                        >
                            rand
                        </button>
                        <button
                            className={`${styles.quickBtn} ${styles.quickBtnRemove}`}
                            onClick={() => onSetQty(id, 0)}
                        >
                            ✕
                        </button>
                    </div>
                </>
            ) : (
                <button className={styles.addBtn} onClick={() => onSetQty(id, 100)}>+ Add</button>
            )}
        </div>
    );
}