import { useBool } from "@common/hooks/useBool";
import { formatNumber, formatTime } from "@common/utils";
import clsx from "clsx";
import styles from "../assets/worker-card.module.css";
import type { WorkerData } from "../utils/api";

interface Props {
    worker: WorkerData;
    isOwn: boolean;
}

export const WorkerCard = ({ worker, isOwn }: Props) => {
    const expanded = useBool(false);

    return (
        <div class={clsx(styles.card, {
            [styles.own]: isOwn,
            [styles.maintenanceBorder]: worker.maintenance_mode,
            [styles.offline]: !worker.online,
        })}>
            <div class={styles.header}>
                <span
                    class={clsx(styles.name, {
                        [styles.hasInfo]: worker.info,
                    })}
                    onClick={worker.info ? expanded.toggle : undefined}
                    title={worker.info ? 'Click to expand' : undefined}
                >
                    {worker.name}
                    {worker.info ? <span class={styles.infoToggle}>{expanded.value ? ' ▲' : ' ▼'}</span> : null}
                </span>
                <div class={styles.badges}>
                    {isOwn && <span class={clsx(styles.badge, styles.ownBadge)}>own</span>}
                    {worker.maintenance_mode && <span class={clsx(styles.badge, styles.maintenance)}>maintenance</span>}
                    {!worker.trusted && <span class={clsx(styles.badge, styles.trusted)}>not trusted</span>}
                </div>
            </div>

            {expanded.value && worker.info && (
                <div class={styles.info}>{worker.info}</div>
            )}

            <div class={styles.models}>
                {worker.models.map(m => <span key={m} class={styles.model}>{m}</span>)}
            </div>

            <dl class={styles.details}>
                <div class={styles.detail}>
                    <dt>Uptime</dt>
                    <dd>{formatTime(worker.uptime)}</dd>
                </div>
                <div class={styles.detail}>
                    <dt>Threads</dt>
                    <dd>{worker.threads}</dd>
                </div>
                <div class={styles.detail}>
                    <dt>Max context</dt>
                    <dd>{formatNumber(worker.max_context_length)}</dd>
                </div>
                <div class={styles.detail}>
                    <dt>Max length</dt>
                    <dd>{formatNumber(worker.max_length)}</dd>
                </div>
                <div class={styles.detail}>
                    <dt>Requests</dt>
                    <dd>{formatNumber(worker.requests_fulfilled)}</dd>
                </div>
                <div class={styles.detail}>
                    <dt>Performance</dt>
                    <dd>{worker.performance}</dd>
                </div>
                {(worker.kudos_details?.generated != null && worker.kudos_details?.uptime != null) ? (
                    <div class={styles.detail}>
                        <dt>Kudos earned (gen/uptime)</dt>
                        <dd>{formatNumber(worker.kudos_details.generated)} / {formatNumber(worker.kudos_details.uptime)}</dd>
                    </div>
                ) : (
                    <div class={styles.detail}>
                        <dt>Kudos earned</dt>
                        <dd>{formatNumber(worker.kudos_rewards)}</dd>
                    </div>
                )}
                <div class={styles.detail}>
                    <dt>Kudos/hour</dt>
                    <dd>{worker.uptime > 0 ? formatNumber(Math.round((worker.kudos_details.generated / worker.uptime) * 3600)) : '0'}</dd>
                </div>
            </dl>
        </div>
    );
};
