'use client';

import {
  RiGroupLine,
  RiUserFollowLine,
  RiUserUnfollowLine,
  RiMegaphoneLine,
  RiBarChartBoxLine,
  RiSearchLine,
  RiHeadphoneLine,
  RiUserStarLine,
  RiGlobalLine,
  RiSpyLine,
} from '@remixicon/react';

type StatsData = {
  totalClients: number;
  activeClients: number;
  inactiveClients: number;
  totalCampaigns: number;
  totalReportsBalance: number;
  totalSearchBalance: number;
  totalSocialListening: number;
  totalLookalike: number;
  totalNetwork: number;
  totalCompetitorAnalysis: number;
};

const StatCard = ({
  icon: Icon,
  label,
  value,
  color,
  subtext,
}: {
  icon: React.ElementType;
  label: string;
  value: number;
  color: string;
  subtext?: string;
}) => (
  <div className="flex items-center gap-4 rounded-xl border bg-card p-4 shadow-sm transition-shadow hover:shadow-md">
    <div className={`flex size-12 shrink-0 items-center justify-center rounded-lg ${color}`}>
      <Icon className="size-6 text-white" />
    </div>
    <div className="min-w-0">
      <p className="text-2xl font-bold tabular-nums text-foreground">{value.toLocaleString()}</p>
      <p className="text-sm font-medium text-muted-foreground truncate">{label}</p>
      {subtext && <p className="text-xs text-muted-foreground/70 mt-0.5">{subtext}</p>}
    </div>
  </div>
);

const ClientDashboard = ({ stats }: { stats: StatsData }) => {
  const activePercent = stats.totalClients > 0
    ? Math.round((stats.activeClients / stats.totalClients) * 100)
    : 0;

  return (
    <div className="space-y-4 mb-6">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard
          icon={RiGroupLine}
          label="Total Clients"
          value={stats.totalClients}
          color="bg-blue-600"
        />
        <StatCard
          icon={RiUserFollowLine}
          label="Active Clients"
          value={stats.activeClients}
          color="bg-emerald-600"
          subtext={`${activePercent}% of total`}
        />
        <StatCard
          icon={RiUserUnfollowLine}
          label="Inactive Clients"
          value={stats.inactiveClients}
          color="bg-amber-600"
          subtext={`${100 - activePercent}% of total`}
        />
        <StatCard
          icon={RiMegaphoneLine}
          label="Total Campaigns"
          value={stats.totalCampaigns}
          color="bg-violet-600"
        />
      </div>

      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
        <MiniStat icon={RiBarChartBoxLine} label="Reports Balance" value={stats.totalReportsBalance} color="text-blue-600" bg="bg-blue-50" />
        <MiniStat icon={RiSearchLine} label="Search Balance" value={stats.totalSearchBalance} color="text-cyan-600" bg="bg-cyan-50" />
        <MiniStat icon={RiHeadphoneLine} label="Social Listening" value={stats.totalSocialListening} color="text-purple-600" bg="bg-purple-50" />
        <MiniStat icon={RiUserStarLine} label="Lookalike" value={stats.totalLookalike} color="text-pink-600" bg="bg-pink-50" />
        <MiniStat icon={RiGlobalLine} label="Network" value={stats.totalNetwork} color="text-teal-600" bg="bg-teal-50" />
        <MiniStat icon={RiSpyLine} label="Competitor Analysis" value={stats.totalCompetitorAnalysis} color="text-orange-600" bg="bg-orange-50" />
      </div>
    </div>
  );
};

const MiniStat = ({
  icon: Icon,
  label,
  value,
  color,
  bg,
}: {
  icon: React.ElementType;
  label: string;
  value: number;
  color: string;
  bg: string;
}) => (
  <div className={`flex items-center gap-3 rounded-lg border p-3 ${bg}`}>
    <Icon className={`size-5 shrink-0 ${color}`} />
    <div className="min-w-0">
      <p className="text-lg font-bold tabular-nums text-foreground">{value.toLocaleString()}</p>
      <p className="text-xs font-medium text-muted-foreground truncate">{label}</p>
    </div>
  </div>
);

export { ClientDashboard };
export type { StatsData };