"use client";

import {
  Users,
  TrendingUp,
  Lock,
  AlertCircle,
  Globe,
  Building2,
} from "lucide-react";

interface UserStats {
  total: number;
  active: number;
  suspended: number;
  locked: number;
  topCountry: { name: string; count: number } | null;
  topIndustry: { name: string; count: number } | null;
}

interface UserStatsProps {
  stats: UserStats;
}

export default function UserStatsComponent({ stats }: UserStatsProps) {
  const activePercentage =
    stats.total > 0 ? ((stats.active / stats.total) * 100).toFixed(1) : "0";
  const suspendedPercentage =
    stats.total > 0 ? ((stats.suspended / stats.total) * 100).toFixed(1) : "0";

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
      {/* Total Users */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div className="flex items-center gap-3 mb-2">
          <div className="p-2 bg-blue-100 rounded-lg">
            <Users className="w-5 h-5 text-blue-600" />
          </div>
          <p className="text-sm font-medium text-gray-600">Total Users</p>
        </div>
        <p className="text-3xl font-bold text-brand-ink">{stats.total}</p>
      </div>

      {/* Active Users */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div className="flex items-center gap-3 mb-2">
          <div className="p-2 bg-green-100 rounded-lg">
            <TrendingUp className="w-5 h-5 text-green-600" />
          </div>
          <p className="text-sm font-medium text-gray-600">Active</p>
        </div>
        <p className="text-3xl font-bold text-green-600">{stats.active}</p>
        <p className="text-xs text-gray-500 mt-1">
          {activePercentage}% of total
        </p>
      </div>

      {/* Suspended Users */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div className="flex items-center gap-3 mb-2">
          <div className="p-2 bg-orange-100 rounded-lg">
            <AlertCircle className="w-5 h-5 text-orange-600" />
          </div>
          <p className="text-sm font-medium text-gray-600">Suspended</p>
        </div>
        <p className="text-3xl font-bold text-orange-600">{stats.suspended}</p>
        <p className="text-xs text-gray-500 mt-1">
          {suspendedPercentage}% of total
        </p>
      </div>

      {/* Locked Users */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div className="flex items-center gap-3 mb-2">
          <div className="p-2 bg-red-100 rounded-lg">
            <Lock className="w-5 h-5 text-red-600" />
          </div>
          <p className="text-sm font-medium text-gray-600">Locked</p>
        </div>
        <p className="text-3xl font-bold text-red-600">{stats.locked}</p>
      </div>

      {/* Top Country */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div className="flex items-center gap-3 mb-2">
          <div className="p-2 bg-purple-100 rounded-lg">
            <Globe className="w-5 h-5 text-purple-600" />
          </div>
          <p className="text-sm font-medium text-gray-600">Top Country</p>
        </div>
        {stats.topCountry ? (
          <>
            <p className="text-2xl font-bold text-brand-ink">
              {stats.topCountry.count}
            </p>
            <p className="text-xs text-gray-500 mt-1 truncate">
              {stats.topCountry.name}
            </p>
          </>
        ) : (
          <p className="text-sm text-gray-400">No data</p>
        )}
      </div>

      {/* Top Industry */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div className="flex items-center gap-3 mb-2">
          <div className="p-2 bg-indigo-100 rounded-lg">
            <Building2 className="w-5 h-5 text-indigo-600" />
          </div>
          <p className="text-sm font-medium text-gray-600">Top Industry</p>
        </div>
        {stats.topIndustry ? (
          <>
            <p className="text-2xl font-bold text-brand-ink">
              {stats.topIndustry.count}
            </p>
            <p className="text-xs text-gray-500 mt-1 truncate">
              {stats.topIndustry.name}
            </p>
          </>
        ) : (
          <p className="text-sm text-gray-400">No data</p>
        )}
      </div>
    </div>
  );
}