import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { LucideIcon, TrendingUp, TrendingDown, Minus } from "lucide-react";
import { cn } from "@/lib/utils";

interface KpiCardProps {
  title: string;
  value: string;
  icon: LucideIcon;
  iconColor: string;
  status: "ok" | "warning" | "critical";
  hint?: string;
  loading?: boolean;
  trend?: number | null;
  trendLabel?: string;
  trendInvert?: boolean;
  href?: string; // optional navigation target
}

const statusBorder: Record<string, string> = {
  ok:       "border-l-4 border-l-green-500",
  warning:  "border-l-4 border-l-amber-500",
  critical: "border-l-4 border-l-destructive",
};

export function KpiCard({ title, value, icon: Icon, iconColor, status, hint, loading, trend, trendLabel, trendInvert, href }: KpiCardProps) {
  const hasTrend = trend !== null && trend !== undefined;
  const isUp   = hasTrend && trend! > 0;
  const isDown = hasTrend && trend! < 0;
  const isFlat = hasTrend && trend! === 0;

  // For temp/alarms: up is bad (red), down is good (green)
  // For power: up might be warning, down is fine
  const trendGood = trendInvert ? isDown : isUp;
  const trendBad  = trendInvert ? isUp   : false;

  const trendColor = isFlat ? "text-muted-foreground"
    : trendGood ? "text-green-400"
    : trendBad  ? "text-destructive"
    : "text-amber-400";

  const inner = (
    <CardContent className="p-5">
      <div className="flex items-start justify-between">
        <div className="space-y-1 flex-1">
          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
            {title}
          </p>
          {loading ? (
            <Skeleton className="h-8 w-24" />
          ) : (
            <p className="text-2xl font-bold tracking-tight">{value}</p>
          )}
          {hasTrend && !loading ? (
            <div className={cn("flex items-center gap-1 text-[10px]", trendColor)}>
              {isFlat ? <Minus className="w-3 h-3" /> : isUp ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
              <span>{trendLabel ?? (trend! > 0 ? `+${trend}` : `${trend}`)}</span>
              <span className="text-muted-foreground">vs prev period</span>
            </div>
          ) : (
            hint && <p className="text-[10px] text-muted-foreground">{hint}</p>
          )}
        </div>
        <div className="p-2 rounded-md bg-muted/50 shrink-0">
          <Icon className={cn("w-5 h-5", iconColor)} />
        </div>
      </div>
    </CardContent>
  );

  return (
    <Card className={cn("relative overflow-hidden", statusBorder[status], href && "cursor-pointer hover:bg-muted/20 transition-colors")}>
      {href ? <Link href={href} className="block">{inner}</Link> : inner}
    </Card>
  );
}