"use client";

import { useEffect, useState, useCallback, useMemo } from "react";
import {
  Calendar,
  MessageSquare,
  Users,
  DollarSign,
  Eye,
  RefreshCcw,
  Clock,
  Activity,
  LogIn,
  ArrowRight,
  ChevronRight,
  TrendingUp,
  TrendingDown,
  Bell,
  CheckCircle2,
  AlertCircle,
  Zap,
} from "lucide-react";
import Link from "next/link";

interface DashboardStats {
  today: {
    visitors: number;
    demos: number;
    contacts: number;
    signups: number;
    revenue: number;
    activeSessions: number;
    logins: number;
  };
  comparison: {
    visitors: number;
    demos: number;
    contacts: number;
    signups: number;
    revenue: number;
    logins: number;
  };
  recentActivity: {
    demos: Array<{
      id: string;
      fullName: string;
      email: string;
      createdAt: string;
    }>;
    contacts: Array<{
      id: string;
      name: string;
      email: string;
      createdAt: string;
    }>;
    users: Array<{
      id: string;
      name: string;
      email: string;
      createdAt: string;
    }>;
  };
}

interface User {
  id: string;
  name: string;
  role: string;
}

// Metric Card Component (inline for cleaner code)
function MetricCard({
  title,
  value,
  change,
  icon: Icon,
  color,
  link,
  badge,
}: {
  title: string;
  value: string | number;
  change?: number;
  icon: React.ElementType;
  color: "emerald" | "orange" | "purple" | "blue" | "cyan" | "indigo" | "amber";
  link: string;
  badge?: string;
}) {
  const colorConfig = {
    emerald: {
      bg: "bg-emerald-50",
      icon: "text-emerald-600",
      border: "border-emerald-100",
      gradient: "from-emerald-500 to-emerald-600",
    },
    orange: {
      bg: "bg-orange-50",
      icon: "text-orange-600",
      border: "border-orange-100",
      gradient: "from-orange-500 to-orange-600",
    },
    purple: {
      bg: "bg-purple-50",
      icon: "text-purple-600",
      border: "border-purple-100",
      gradient: "from-purple-500 to-purple-600",
    },
    blue: {
      bg: "bg-blue-50",
      icon: "text-blue-600",
      border: "border-blue-100",
      gradient: "from-blue-500 to-blue-600",
    },
    cyan: {
      bg: "bg-cyan-50",
      icon: "text-cyan-600",
      border: "border-cyan-100",
      gradient: "from-cyan-500 to-cyan-600",
    },
    indigo: {
      bg: "bg-indigo-50",
      icon: "text-indigo-600",
      border: "border-indigo-100",
      gradient: "from-indigo-500 to-indigo-600",
    },
    amber: {
      bg: "bg-amber-50",
      icon: "text-amber-600",
      border: "border-amber-100",
      gradient: "from-amber-500 to-amber-600",
    },
  };

  const config = colorConfig[color];
  const isPositive = change !== undefined && change >= 0;

  return (
    <Link href={link} className="group block">
      <div
        className={`relative overflow-hidden rounded-2xl border ${config.border} bg-white p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-gray-200/50`}
      >
        {/* Accent line */}
        <div
          className={`absolute top-0 left-0 h-1 w-full bg-gradient-to-r ${config.gradient} opacity-0 transition-opacity group-hover:opacity-100`}
        />

        <div className="flex items-start justify-between">
          <div className={`rounded-xl p-3 ${config.bg}`}>
            <Icon className={`h-6 w-6 ${config.icon}`} />
          </div>

          {badge ? (
            <div className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-bold bg-red-50 text-red-600 border border-red-100">
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75" />
                <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500" />
              </span>
              {badge}
            </div>
          ) : change !== undefined ? (
            <div
              className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold ${
                isPositive
                  ? "bg-emerald-50 text-emerald-700"
                  : "bg-amber-50 text-amber-700"
              }`}
            >
              {isPositive ? (
                <TrendingUp className="h-3 w-3" />
              ) : (
                <TrendingDown className="h-3 w-3" />
              )}
              {Math.abs(change)}%
            </div>
          ) : null}
        </div>

        <div className="mt-4">
          <p className="text-sm font-medium text-gray-500">{title}</p>
          <p className="mt-1 text-3xl font-bold tracking-tight text-gray-900">
            {typeof value === "number" ? value.toLocaleString() : value}
          </p>
        </div>

        <div className="mt-4 flex items-center text-sm text-gray-500 opacity-0 transition-opacity group-hover:opacity-100">
          <span>View details</span>
          <ChevronRight className="ml-1 h-4 w-4" />
        </div>
      </div>
    </Link>
  );
}

// Action Item Component
function ActionItem({
  type,
  text,
  count,
  urgent,
  href,
}: {
  type: "confirm" | "message" | "reminder" | "signup";
  text: string;
  count?: number;
  urgent?: boolean;
  href: string;
}) {
  const typeConfig = {
    confirm: {
      icon: CheckCircle2,
      color: "text-emerald-600",
      bg: "bg-emerald-50",
    },
    message: {
      icon: MessageSquare,
      color: "text-purple-600",
      bg: "bg-purple-50",
    },
    reminder: { icon: Bell, color: "text-amber-600", bg: "bg-amber-50" },
    signup: { icon: Users, color: "text-blue-600", bg: "bg-blue-50" },
  };

  const config = typeConfig[type];
  const Icon = config.icon;

  return (
    <Link href={href} className="group block">
      <div
        className={`flex items-center gap-4 rounded-xl border p-4 transition-all hover:border-gray-200 hover:shadow-md ${urgent ? "border-amber-200 bg-amber-50/50" : "border-gray-100 bg-white"}`}
      >
        <div className={`rounded-lg p-2 ${config.bg}`}>
          <Icon className={`h-5 w-5 ${config.color}`} />
        </div>
        <div className="flex-1 min-w-0">
          <p className="text-sm font-medium text-gray-900 truncate">{text}</p>
          {count !== undefined && (
            <p className="text-xs text-gray-500">{count} pending</p>
          )}
        </div>
        {urgent && (
          <span className="inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-700">
            <AlertCircle className="h-3 w-3" />
            Urgent
          </span>
        )}
        <ChevronRight className="h-4 w-4 text-gray-400 transition-transform group-hover:translate-x-1" />
      </div>
    </Link>
  );
}

// Live Queue Widget
function LiveQueueWidget({
  activeSessions,
  logins,
}: {
  activeSessions: number;
  logins: number;
}) {
  return (
    <div className="overflow-hidden rounded-2xl bg-gradient-to-br from-[#25D366] to-[#128C7E] p-6 text-white">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold">Live Activity</h3>
        <span className="inline-flex items-center gap-2 rounded-full bg-white/20 px-3 py-1 text-sm font-medium">
          <span className="relative flex h-2 w-2">
            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75" />
            <span className="relative inline-flex rounded-full h-2 w-2 bg-white" />
          </span>
          Live
        </span>
      </div>

      <div className="mt-6 grid grid-cols-2 gap-4">
        <div className="rounded-xl bg-white/10 p-4 backdrop-blur-sm">
          <div className="flex items-center gap-2">
            <Activity className="h-5 w-5 text-white/80" />
            <span className="text-sm text-white/80">Active Now</span>
          </div>
          <p className="mt-2 text-3xl font-bold">{activeSessions}</p>
          <p className="text-xs text-white/60">users online</p>
        </div>
        <div className="rounded-xl bg-white/10 p-4 backdrop-blur-sm">
          <div className="flex items-center gap-2">
            <LogIn className="h-5 w-5 text-white/80" />
            <span className="text-sm text-white/80">Today</span>
          </div>
          <p className="mt-2 text-3xl font-bold">{logins}</p>
          <p className="text-xs text-white/60">total logins</p>
        </div>
      </div>
    </div>
  );
}

// Activity Feed Item
function ActivityFeedItem({
  name,
  email,
  timestamp,
  type,
}: {
  name: string;
  email: string;
  timestamp: string;
  type: "demo" | "contact" | "signup";
}) {
  const typeConfig = {
    demo: { color: "bg-emerald-500", label: "Demo" },
    contact: { color: "bg-purple-500", label: "Contact" },
    signup: { color: "bg-blue-500", label: "Signup" },
  };

  const config = typeConfig[type];

  return (
    <div className="group flex items-center gap-4 rounded-xl border border-transparent p-3 transition-all hover:border-gray-100 hover:bg-gray-50">
      <div className="relative">
        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-sm font-bold text-gray-600">
          {name.charAt(0).toUpperCase()}
        </div>
        <span
          className={`absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full ${config.color} ring-2 ring-white`}
        />
      </div>
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium text-gray-900 truncate">{name}</p>
        <p className="text-xs text-gray-500 truncate">{email}</p>
      </div>
      <div className="text-right">
        <span
          className={`inline-block rounded-full px-2 py-0.5 text-[10px] font-medium text-white ${config.color}`}
        >
          {config.label}
        </span>
        <p className="mt-1 text-xs text-gray-400">{timestamp}</p>
      </div>
    </div>
  );
}

// Skeleton Loader
function DashboardSkeleton() {
  return (
    <div className="space-y-8 animate-pulse">
      {/* Header Skeleton */}
      <div className="flex items-center justify-between">
        <div className="space-y-2">
          <div className="h-8 w-64 rounded-lg bg-gray-200" />
          <div className="h-4 w-48 rounded bg-gray-200" />
        </div>
        <div className="h-10 w-32 rounded-lg bg-gray-200" />
      </div>

      {/* Metrics Skeleton */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        {[...Array(4)].map((_, i) => (
          <div key={i} className="h-40 rounded-2xl bg-gray-100" />
        ))}
      </div>

      {/* Main Content Skeleton */}
      <div className="grid lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 h-80 rounded-2xl bg-gray-100" />
        <div className="h-80 rounded-2xl bg-gray-100" />
      </div>
    </div>
  );
}

export default function DashboardOverview({ user }: { user: User }) {
  const [stats, setStats] = useState<DashboardStats | null>(null);
  const [loading, setLoading] = useState(true);
  const [autoRefresh, setAutoRefresh] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);

  const fetchStats = useCallback(async () => {
    try {
      setRefreshing(true);
      const response = await fetch("/api/staff/dashboard/overview");
      if (response.ok) {
        const data = await response.json();
        setStats(data);
        setLastUpdated(new Date());
      }
    } catch (error) {
      console.error("Failed to fetch dashboard stats:", error);
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  }, []);

  useEffect(() => {
    fetchStats();

    let interval: NodeJS.Timeout | null = null;
    if (autoRefresh) {
      interval = setInterval(() => {
        if (!document.hidden) {
          fetchStats();
        }
      }, 30000);
    }

    return () => {
      if (interval) clearInterval(interval);
    };
  }, [autoRefresh, fetchStats]);

  const timeFormatter = useMemo(
    () =>
      new Intl.DateTimeFormat("en", {
        hour: "2-digit",
        minute: "2-digit",
      }),
    [],
  );

  const dateFormatter = useMemo(
    () =>
      new Intl.DateTimeFormat("en", {
        weekday: "long",
        month: "long",
        day: "numeric",
      }),
    [],
  );

  const timestampFormatter = useCallback((value: string) => {
    const date = new Date(value);
    const now = new Date();
    const diffMs = now.getTime() - date.getTime();
    const diffMins = Math.floor(diffMs / 60000);
    const diffHours = Math.floor(diffMs / 3600000);
    const diffDays = Math.floor(diffMs / 86400000);

    if (diffMins < 60) return `${diffMins}m ago`;
    if (diffHours < 24) return `${diffHours}h ago`;
    if (diffDays < 7) return `${diffDays}d ago`;
    return new Intl.DateTimeFormat("en", {
      month: "short",
      day: "numeric",
    }).format(date);
  }, []);

  if (loading) {
    return <DashboardSkeleton />;
  }

  if (!stats) {
    return (
      <div className="flex flex-col items-center justify-center py-16 text-center">
        <div className="rounded-full bg-red-50 p-4">
          <AlertCircle className="h-8 w-8 text-red-500" />
        </div>
        <h3 className="mt-4 text-lg font-semibold text-gray-900">
          Failed to load dashboard
        </h3>
        <p className="mt-1 text-sm text-gray-500">
          Unable to fetch dashboard data
        </p>
        <button
          onClick={fetchStats}
          className="mt-4 inline-flex items-center gap-2 rounded-lg bg-brand-green px-4 py-2 text-sm font-medium text-white hover:bg-green-700"
        >
          <RefreshCcw className="h-4 w-4" />
          Try Again
        </button>
      </div>
    );
  }

  const greeting = (() => {
    const hour = new Date().getHours();
    if (hour < 12) return "Good morning";
    if (hour < 17) return "Good afternoon";
    return "Good evening";
  })();

  // Use the user's name, or fall back to first name if available
  const displayName = user.name || "there";

  // Combine all recent activity for unified feed
  const allActivity = [
    ...stats.recentActivity.demos.map((d) => ({
      ...d,
      name: d.fullName,
      type: "demo" as const,
    })),
    ...stats.recentActivity.contacts.map((c) => ({
      ...c,
      type: "contact" as const,
    })),
    ...stats.recentActivity.users.map((u) => ({
      ...u,
      type: "signup" as const,
    })),
  ]
    .sort(
      (a, b) =>
        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
    )
    .slice(0, 8);

  return (
    <div className="space-y-8">
      {/* Header Section */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 sm:text-3xl">
            {greeting}, {displayName}
          </h1>
          <p className="mt-1 text-gray-500">
            {dateFormatter.format(new Date())} &middot; Here's what's happening
            today
          </p>
        </div>

        <div className="flex items-center gap-3">
          <div className="flex items-center gap-2 text-sm text-gray-500">
            <Clock className="h-4 w-4" />
            <span>
              {lastUpdated
                ? `Updated ${timeFormatter.format(lastUpdated)}`
                : "Syncing..."}
            </span>
          </div>

          <button
            onClick={fetchStats}
            disabled={refreshing}
            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:opacity-50"
          >
            <RefreshCcw
              className={`h-4 w-4 ${refreshing ? "animate-spin" : ""}`}
            />
            Refresh
          </button>

          <button
            onClick={() => setAutoRefresh(!autoRefresh)}
            className={`inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
              autoRefresh
                ? "bg-emerald-50 text-emerald-700 hover:bg-emerald-100"
                : "bg-gray-100 text-gray-600 hover:bg-gray-200"
            }`}
          >
            <span
              className={`h-2 w-2 rounded-full ${autoRefresh ? "bg-emerald-500 animate-pulse" : "bg-gray-400"}`}
            />
            Auto-refresh {autoRefresh ? "on" : "off"}
          </button>
        </div>
      </div>

      {/* Primary Metrics - 4 Cards */}
      <section>
        <div className="mb-4 flex items-center justify-between">
          <h2 className="text-lg font-semibold text-gray-900">
            Today's Performance
          </h2>
          <Link
            href="/staff/dashboard/analytics"
            className="inline-flex items-center gap-1 text-sm font-medium text-brand-green hover:text-green-700"
          >
            View analytics
            <ArrowRight className="h-4 w-4" />
          </Link>
        </div>

        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          {user.role !== "STAFF" && (
            <MetricCard
              title="Revenue Today"
              value={`$${stats.today.revenue.toLocaleString()}`}
              change={stats.comparison.revenue}
              icon={DollarSign}
              color="emerald"
              link="/staff/dashboard/analytics"
            />
          )}
          <MetricCard
            title="New Signups"
            value={stats.today.signups}
            change={stats.comparison.signups}
            icon={Users}
            color="blue"
            link="/staff/dashboard/users"
          />
          <MetricCard
            title="Demo Requests"
            value={stats.today.demos}
            change={stats.comparison.demos}
            icon={Calendar}
            color="purple"
            link="/staff/dashboard/demos"
          />
          <MetricCard
            title="Contact Messages"
            value={stats.today.contacts}
            change={stats.comparison.contacts}
            icon={MessageSquare}
            color="orange"
            link="/staff/dashboard/contacts"
          />
          {user.role === "STAFF" && (
            <MetricCard
              title="Site Visitors"
              value={stats.today.visitors}
              change={stats.comparison.visitors}
              icon={Eye}
              color="cyan"
              link="/staff/dashboard/analytics"
            />
          )}
        </div>
      </section>

      {/* Secondary Row: Actions + Live Queue */}
      <div className="grid lg:grid-cols-3 gap-6">
        {/* Action Items */}
        <section className="lg:col-span-2">
          <div className="mb-4 flex items-center justify-between">
            <h2 className="text-lg font-semibold text-gray-900">
              Action Items
            </h2>
            <span className="inline-flex items-center gap-1.5 rounded-full bg-amber-50 px-3 py-1 text-xs font-medium text-amber-700">
              <Zap className="h-3 w-3" />
              {stats.today.demos +
                stats.today.contacts +
                stats.today.signups}{" "}
              items need attention
            </span>
          </div>

          <div className="space-y-3">
            <ActionItem
              type="confirm"
              text={`${stats.today.demos} demo request${stats.today.demos !== 1 ? "s" : ""} awaiting follow-up`}
              count={stats.today.demos}
              urgent={stats.today.demos > 0}
              href="/staff/dashboard/demos"
            />
            <ActionItem
              type="message"
              text={`${stats.today.contacts} contact message${stats.today.contacts !== 1 ? "s" : ""} to review`}
              count={stats.today.contacts}
              href="/staff/dashboard/contacts"
            />
            <ActionItem
              type="signup"
              text={`${stats.today.signups} new signup${stats.today.signups !== 1 ? "s" : ""} joined today`}
              count={stats.today.signups}
              href="/staff/dashboard/users"
            />
          </div>
        </section>

        {/* Live Queue */}
        <section>
          <div className="mb-4">
            <h2 className="text-lg font-semibold text-gray-900">
              Live Activity
            </h2>
          </div>
          <LiveQueueWidget
            activeSessions={stats.today.activeSessions}
            logins={stats.today.logins}
          />
        </section>
      </div>

      {/* Activity Feed */}
      <section>
        <div className="mb-4 flex items-center justify-between">
          <div>
            <h2 className="text-lg font-semibold text-gray-900">
              Recent Activity
            </h2>
            <p className="text-sm text-gray-500">
              Latest demos, contacts, and signups
            </p>
          </div>
          <div className="flex items-center gap-2">
            <span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-700">
              <span className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
              Live feed
            </span>
          </div>
        </div>

        <div className="overflow-hidden rounded-2xl border border-gray-100 bg-white">
          <div className="divide-y divide-gray-100">
            {allActivity.length > 0 ? (
              allActivity.map((item) => (
                <ActivityFeedItem
                  key={`${item.type}-${item.id}`}
                  name={item.name}
                  email={item.email}
                  timestamp={timestampFormatter(item.createdAt)}
                  type={item.type}
                />
              ))
            ) : (
              <div className="flex flex-col items-center justify-center py-12 text-center">
                <div className="rounded-full bg-gray-100 p-3">
                  <Activity className="h-6 w-6 text-gray-400" />
                </div>
                <p className="mt-3 text-sm font-medium text-gray-900">
                  No recent activity
                </p>
                <p className="mt-1 text-xs text-gray-500">
                  New activity will appear here
                </p>
              </div>
            )}
          </div>

          {allActivity.length > 0 && (
            <div className="border-t border-gray-100 bg-gray-50 px-4 py-3">
              <div className="flex items-center justify-between">
                <p className="text-xs text-gray-500">
                  Showing {allActivity.length} most recent items
                </p>
                <div className="flex gap-2">
                  <Link
                    href="/staff/dashboard/demos"
                    className="text-xs font-medium text-brand-green hover:text-green-700"
                  >
                    All demos
                  </Link>
                  <span className="text-gray-300">|</span>
                  <Link
                    href="/staff/dashboard/contacts"
                    className="text-xs font-medium text-brand-green hover:text-green-700"
                  >
                    All contacts
                  </Link>
                  <span className="text-gray-300">|</span>
                  <Link
                    href="/staff/dashboard/users"
                    className="text-xs font-medium text-brand-green hover:text-green-700"
                  >
                    All users
                  </Link>
                </div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Quick Stats Footer */}
      <section className="rounded-2xl border border-gray-100 bg-gradient-to-br from-gray-50 to-white p-6">
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-6">
          <div className="text-center">
            <div className="inline-flex items-center justify-center h-12 w-12 rounded-xl bg-blue-50 text-blue-600 mb-3">
              <Eye className="h-6 w-6" />
            </div>
            <p className="text-2xl font-bold text-gray-900">
              {stats.today.visitors.toLocaleString()}
            </p>
            <p className="text-sm text-gray-500">Site Visitors</p>
            {stats.comparison.visitors !== 0 && (
              <p
                className={`text-xs ${stats.comparison.visitors >= 0 ? "text-emerald-600" : "text-amber-600"}`}
              >
                {stats.comparison.visitors >= 0 ? "+" : ""}
                {stats.comparison.visitors}% vs yesterday
              </p>
            )}
          </div>
          <div className="text-center">
            <div className="inline-flex items-center justify-center h-12 w-12 rounded-xl bg-cyan-50 text-cyan-600 mb-3">
              <Activity className="h-6 w-6" />
            </div>
            <p className="text-2xl font-bold text-gray-900">
              {stats.today.activeSessions}
            </p>
            <p className="text-sm text-gray-500">Active Sessions</p>
            <p className="text-xs text-gray-400">currently online</p>
          </div>
          <div className="text-center">
            <div className="inline-flex items-center justify-center h-12 w-12 rounded-xl bg-indigo-50 text-indigo-600 mb-3">
              <LogIn className="h-6 w-6" />
            </div>
            <p className="text-2xl font-bold text-gray-900">
              {stats.today.logins}
            </p>
            <p className="text-sm text-gray-500">Logins Today</p>
            {stats.comparison.logins !== 0 && (
              <p
                className={`text-xs ${stats.comparison.logins >= 0 ? "text-emerald-600" : "text-amber-600"}`}
              >
                {stats.comparison.logins >= 0 ? "+" : ""}
                {stats.comparison.logins}% vs yesterday
              </p>
            )}
          </div>
          {user.role !== "STAFF" && (
            <div className="text-center">
              <div className="inline-flex items-center justify-center h-12 w-12 rounded-xl bg-emerald-50 text-emerald-600 mb-3">
                <DollarSign className="h-6 w-6" />
              </div>
              <p className="text-2xl font-bold text-gray-900">
                ${stats.today.revenue.toLocaleString()}
              </p>
              <p className="text-sm text-gray-500">Revenue</p>
              {stats.comparison.revenue !== 0 && (
                <p
                  className={`text-xs ${stats.comparison.revenue >= 0 ? "text-emerald-600" : "text-amber-600"}`}
                >
                  {stats.comparison.revenue >= 0 ? "+" : ""}
                  {stats.comparison.revenue}% vs yesterday
                </p>
              )}
            </div>
          )}
          {user.role === "STAFF" && (
            <div className="text-center">
              <div className="inline-flex items-center justify-center h-12 w-12 rounded-xl bg-purple-50 text-purple-600 mb-3">
                <Calendar className="h-6 w-6" />
              </div>
              <p className="text-2xl font-bold text-gray-900">
                {stats.today.demos + stats.today.contacts + stats.today.signups}
              </p>
              <p className="text-sm text-gray-500">Total Leads</p>
              <p className="text-xs text-gray-400">combined today</p>
            </div>
          )}
        </div>
      </section>
    </div>
  );
}