"use client";

import { useApp } from "@/context/AppContext";
import { getHealthColor, getPercentage, TABS } from "@/lib/utils";
import type { Summary, TabKey } from "@/lib/types";

const HEALTH_BAR_COLORS: Record<string, string> = {
    "text-success": "bg-success",
    "text-warning": "bg-warning",
    "text-danger": "bg-danger",
};

export default function SummaryCards() {
    const { data, activeTab, setActiveTab } = useApp();

    if (!data) return null;

    return (
        <div className="grid grid-cols-4 gap-4 px-6 py-4">
            {TABS.map(tab => {
                const category = data.summary[tab.key as keyof Summary];
                const percentage = getPercentage(category.dead, category.total);
                const healthColor = getHealthColor(percentage);
                const barColor = HEALTH_BAR_COLORS[healthColor] ?? "bg-success";
                const isActive = activeTab === tab.key;

                return (
                    <button
                        key={tab.key}
                        onClick={() => setActiveTab(tab.key as TabKey)}
                        className={`bg-surface border rounded-lg p-5 text-left cursor-pointer transition-colors hover:bg-raised ${
                            isActive ? "border-accent bg-raised" : "border-border"
                        }`}
                    >
                        <div className="text-xs font-medium uppercase tracking-wider text-text-secondary mb-2">
                            {tab.label}
                        </div>
                        <div className="flex items-baseline gap-1 mb-3">
                            <span
                                className={`text-3xl font-bold ${healthColor}`}
                            >
                                {category.dead}
                            </span>
                            <span className="text-text-secondary text-sm">
                                / {category.total}
                            </span>
                        </div>
                        <div className="w-full h-1.5 rounded-full bg-border overflow-hidden mb-1.5">
                            <div
                                className={`h-full rounded-full ${barColor} transition-all`}
                                style={{
                                    width: `${Math.min(percentage, 100)}%`,
                                }}
                            />
                        </div>
                        <div className="text-sm text-text-secondary">
                            {percentage}% dead
                        </div>
                    </button>
                );
            })}
        </div>
    );
}