"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import {
  ServerIcon,
  ChatBubbleLeftRightIcon,
  ClipboardDocumentListIcon,
  ArrowRightIcon,
} from "@heroicons/react/24/outline";
import { cn } from "@/shared/utils";
import { motionVariants } from "@/components/atoms";

const containerVariants = motionVariants.staggerContainer(0.05);
const itemVariants = motionVariants.fadeUpFast;

interface QuickStatsProps {
  activeSubscriptions: number;
  openCases: number;
  recentOrders?: number | undefined;
  isLoading?: boolean | undefined;
  className?: string | undefined;
}

type StatTone = "primary" | "info" | "warning" | "success";

interface StatItemProps {
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  label: string;
  value: number;
  href: string;
  tone?: StatTone;
  emptyText?: string;
}

const toneStyles: Record<StatTone, { iconBg: string; iconColor: string; hoverBorder: string }> = {
  primary: {
    iconBg: "bg-primary/10 group-hover:bg-primary/20",
    iconColor: "text-primary",
    hoverBorder: "hover:border-primary/30",
  },
  info: {
    iconBg: "bg-info/10 group-hover:bg-info/20",
    iconColor: "text-info",
    hoverBorder: "hover:border-info/30",
  },
  warning: {
    iconBg: "bg-warning/10 group-hover:bg-warning/20",
    iconColor: "text-warning",
    hoverBorder: "hover:border-warning/30",
  },
  success: {
    iconBg: "bg-success/10 group-hover:bg-success/20",
    iconColor: "text-success",
    hoverBorder: "hover:border-success/30",
  },
};

function StatItem({ icon: Icon, label, value, href, tone = "primary", emptyText }: StatItemProps) {
  const styles = toneStyles[tone];

  return (
    <Link
      href={href}
      className={cn(
        "group flex items-center gap-3.5 p-3.5 rounded-xl",
        "bg-card border border-border/60",
        "transition-all duration-200",
        "hover:border-border hover:shadow-[var(--cp-shadow-1)] hover:-translate-y-0.5",
        styles.hoverBorder
      )}
    >
      <div
        className={cn(
          "flex-shrink-0 h-10 w-10 rounded-lg flex items-center justify-center",
          "transition-all duration-200",
          styles.iconBg
        )}
      >
        <Icon className={cn("h-4.5 w-4.5", styles.iconColor)} />
      </div>
      <div className="min-w-0 flex-1">
        <p className="text-xs font-medium text-muted-foreground">{label}</p>
        {value > 0 ? (
          <p className="text-xl font-bold text-foreground tabular-nums mt-0.5 font-heading">
            {value}
          </p>
        ) : (
          <p className="text-xs text-muted-foreground mt-1">{emptyText || "None"}</p>
        )}
      </div>
      <ArrowRightIcon className="h-3.5 w-3.5 text-muted-foreground/30 group-hover:text-foreground/60 group-hover:translate-x-0.5 transition-all flex-shrink-0" />
    </Link>
  );
}

function StatItemSkeleton() {
  return (
    <div className="flex items-center gap-4 p-4 rounded-xl bg-surface border border-border/60">
      <div className="flex-shrink-0 h-11 w-11 rounded-xl cp-skeleton-shimmer" />
      <div className="min-w-0 flex-1 space-y-2">
        <div className="h-3 cp-skeleton-shimmer rounded w-20" />
        <div className="h-7 cp-skeleton-shimmer rounded w-10" />
      </div>
      <div className="h-4 w-4 cp-skeleton-shimmer rounded flex-shrink-0" />
    </div>
  );
}

/**
 * QuickStats - Beautiful stats display for dashboard
 */
export function QuickStats({
  activeSubscriptions,
  openCases,
  recentOrders,
  isLoading = false,
  className,
}: QuickStatsProps) {
  if (isLoading) {
    return (
      <div className={cn("space-y-4", className)}>
        <div className="flex items-center justify-between">
          <h3 className="text-base font-semibold text-foreground">Account Overview</h3>
        </div>
        <div className="space-y-3">
          <StatItemSkeleton />
          <StatItemSkeleton />
          <StatItemSkeleton />
        </div>
      </div>
    );
  }

  return (
    <div className={cn("space-y-4", className)}>
      <div className="flex items-center justify-between">
        <h3 className="text-base font-semibold text-foreground">Account Overview</h3>
      </div>
      <motion.div
        className="space-y-3"
        initial="hidden"
        animate="visible"
        variants={containerVariants}
      >
        <motion.div variants={itemVariants}>
          <StatItem
            icon={ServerIcon}
            label="Active Services"
            value={activeSubscriptions}
            href="/account/services"
            tone="primary"
            emptyText="No active services"
          />
        </motion.div>
        <motion.div variants={itemVariants}>
          <StatItem
            icon={ChatBubbleLeftRightIcon}
            label="Open Support Cases"
            value={openCases}
            href="/account/support"
            tone={openCases > 0 ? "warning" : "info"}
            emptyText="No open cases"
          />
        </motion.div>
        {recentOrders !== undefined && (
          <motion.div variants={itemVariants}>
            <StatItem
              icon={ClipboardDocumentListIcon}
              label="Recent Orders"
              value={recentOrders}
              href="/account/orders"
              tone="success"
              emptyText="No recent orders"
            />
          </motion.div>
        )}
      </motion.div>
    </div>
  );
}
