import { Card, Skeleton, Text } from "@mantine/core";
import type { LucideIcon } from "lucide-react";
import type { ReactNode } from "react";

import { cn } from "@/lib/utils";

export interface KpiItem {
  label: string;
  value: ReactNode;
  /** Optional leading icon rendered in a tinted chip. */
  icon?: LucideIcon;
  /** Secondary line under the label (e.g. a unit or comparison). */
  hint?: string;
  /**
   * Mantine color name for the icon chip (e.g. "edr-green", "red", "yellow").
   * Defaults to the brand green so a strip reads as uniform unless a page opts
   * into semantic tints.
   */
  color?: string;
}

export interface KpiStripProps {
  items: KpiItem[];
  /** Show skeletons in place of values while data loads. */
  loading?: boolean;
}

/**
 * A single bordered card divided into up to five KPI cells:
 * `[ kpi | kpi | kpi ]`. Hairline dividers separate cells (vertical on wide
 * screens, horizontal when they wrap). Surface, border and shadow all come from
 * the theme — no per-cell backgrounds, gradients or custom shadows.
 */
export function KpiStrip({ items, loading = false }: KpiStripProps) {
  // The spec caps a strip at five cells; extra items are dropped rather than
  // silently overflowing into an unreadable row.
  const cells = items.slice(0, 5);

  return (
    <Card withBorder shadow="sm" p={0} className="overflow-hidden">
      <div className="flex flex-col sm:flex-row">
        {cells.map((item, index) => {
          const Icon = item.icon;
          const color = item.color ?? "edr-green";
          return (
            <div
              key={item.label}
              className={cn(
                "flex flex-1 items-center gap-3 px-5 py-4",
                index > 0 &&
                  "border-t border-edr-border sm:border-l sm:border-t-0",
              )}
            >
              {Icon ? (
                <div
                  className="flex size-10 shrink-0 items-center justify-center rounded-lg"
                  style={{
                    background: `var(--mantine-color-${color}-1)`,
                    color: `var(--mantine-color-${color}-7)`,
                  }}
                >
                  <Icon size={20} strokeWidth={2} />
                </div>
              ) : null}

              <div style={{ minWidth: 0 }}>
                {loading ? (
                  <Skeleton height={26} width={72} radius="sm" my={2} />
                ) : (
                  <Text
                    fw={800}
                    fz={24}
                    lh={1.05}
                    c="edr-text"
                    style={{ letterSpacing: "-0.02em" }}
                    truncate
                  >
                    {item.value}
                  </Text>
                )}
                <Text size="xs" fw={600} c="edr-muted" truncate>
                  {item.label}
                  {item.hint ? ` · ${item.hint}` : ""}
                </Text>
              </div>
            </div>
          );
        })}
      </div>
    </Card>
  );
}

export default KpiStrip;
