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

import { MiniRing, MiniSparkline } from "@/components/common/MiniGraph";
import {
  overviewAccentGradients,
  type OverviewAccent,
} from "./overview.styles";

/** Mini-graph type rendered at the bottom of a KPI card. */
export type KpiGraphVariant = "area" | "line" | "ring";

/** Pale chip background per accent — matches the Pencil "tinted icon chip" look. */
export const ACCENT_CHIP_BG: Record<string, string> = {
  default: "#F1F5F4",
  emerald: "#E7F8F2",
  amber: "#FEF9C3",
  rose: "#FFE4E6",
  sky: "#E0F2FE",
  violet: "#EDE9FE",
  gold: "#FEF1D5",
  orange: "#FEEAD7",
};

export interface OverviewKpiItem {
  label: string;
  value: number | string;
  hint?: string;
  icon: LucideIcon;
  accent?: keyof typeof ACCENT_CHIP_BG;
  /** Share 0..1 used as a baseline for the decorative trend + ring gauge. */
  progress?: number;
  /** Mini-graph type; defaults to "area" when not provided. */
  variant?: KpiGraphVariant;
}

export function OverviewKpiCard({ item }: { item: OverviewKpiItem }) {
  const Icon = item.icon;
  const accent = item.accent ?? "default";
  const accentKey = accent as OverviewAccent;
  const [, accentDeep] = overviewAccentGradients[accentKey] ?? overviewAccentGradients.default;
  const chipBg = ACCENT_CHIP_BG[accent] ?? ACCENT_CHIP_BG.default;
  const variant = item.variant ?? "area";

  return (
    <Card
      p="md"
      radius={16}
      withBorder
      style={{
        background: "#ffffff",
        border: "1px solid var(--mantine-color-gray-2)",
        flex: "1 1 240px",
        minWidth: 220,
        transition: "transform 160ms ease, box-shadow 160ms ease",
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = "translateY(-3px)";
        e.currentTarget.style.boxShadow = "0 12px 28px -12px rgba(15,23,42,0.18)";
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = "translateY(0)";
        e.currentTarget.style.boxShadow = "none";
      }}
    >
      <Stack gap={8}>
        <Group gap="sm" wrap="nowrap" align="center">
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              width: 40,
              height: 40,
              borderRadius: 11,
              background: chipBg,
              color: accentDeep,
              flexShrink: 0,
            }}
          >
            <Icon size={20} strokeWidth={2} />
          </div>
          <Stack gap={1} style={{ minWidth: 0, flex: 1 }}>
            <Text size="24px" fw={800} style={{ lineHeight: 1.05, letterSpacing: "-0.02em" }} truncate>
              {item.value}
            </Text>
            <Text size="xs" fw={600} c="dimmed" truncate>
              {item.label}
              {item.hint ? ` · ${item.hint}` : ""}
            </Text>
          </Stack>
          {variant === "ring" ? (
            <MiniRing
              pct={Math.round((item.progress ?? 0) * 100)}
              accent={accentKey}
              size={44}
              stroke={5}
            >
              <Text size="10px" fw={800} style={{ color: accentDeep }}>
                {Math.round((item.progress ?? 0) * 100)}%
              </Text>
            </MiniRing>
          ) : null}
        </Group>

        {variant !== "ring" ? (
          <MiniSparkline
            variant={variant}
            accent={accentKey}
            baseline={item.progress ?? 0}
            seed={item.label}
            height={22}
          />
        ) : null}
      </Stack>
    </Card>
  );
}
