"use client";

import { AlertTriangle, Building2, DollarSign, Lock, TrendingUp, Users } from "lucide-react";
import { Card } from "@/components/ui/card";
import { currency } from "@/lib/utils";
import { SaaSFinancialStats } from "@/types/saas-admin";

interface SaaSStatsCardsProps {
  stats: SaaSFinancialStats;
}

export function SaaSStatsCards({ stats }: SaaSStatsCardsProps) {
  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
      {/* MRR - Receita Recorrente Mensal */}
      <Card className="p-4 shadow-xs border relative overflow-hidden bg-gradient-to-br from-emerald-500/10 via-card to-card dark:from-emerald-950/20">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
              Receita Recorrente (MRR)
            </p>
            <h3 className="mt-1 text-2xl font-extrabold tracking-tight text-emerald-600 dark:text-emerald-400">
              {currency(stats.mrr)}
              <span className="text-xs font-normal text-muted-foreground ml-1">/ mês</span>
            </h3>
            <p className="mt-1 text-[11px] font-medium text-emerald-600 dark:text-emerald-400 flex items-center gap-1">
              <TrendingUp className="h-3 w-3" /> ARR Projetado: {currency(stats.arr)}
            </p>
          </div>
          <div className="rounded-xl border bg-emerald-500/10 p-3 text-emerald-600 dark:text-emerald-400">
            <DollarSign className="h-6 w-6" />
          </div>
        </div>
      </Card>

      {/* Empresas Ativas */}
      <Card className="p-4 shadow-xs border relative overflow-hidden bg-gradient-to-br from-blue-500/10 via-card to-card dark:from-blue-950/20">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
              Empresas Ativas (SaaS)
            </p>
            <h3 className="mt-1 text-2xl font-extrabold tracking-tight text-foreground">
              {stats.activeTenants}
              <span className="text-xs font-normal text-muted-foreground ml-1">de {stats.totalTenants}</span>
            </h3>
            <p className="mt-1 text-[11px] text-muted-foreground">
              {stats.trialTenants} em período de degustação (Trial)
            </p>
          </div>
          <div className="rounded-xl border bg-blue-500/10 p-3 text-primary">
            <Building2 className="h-6 w-6" />
          </div>
        </div>
      </Card>

      {/* Empresas Inadimplentes / Suspensas */}
      <Card className="p-4 shadow-xs border relative overflow-hidden bg-gradient-to-br from-rose-500/10 via-card to-card dark:from-rose-950/20">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
              Acessos Suspensos
            </p>
            <h3 className="mt-1 text-2xl font-extrabold tracking-tight text-rose-600 dark:text-rose-400">
              {stats.suspendedTenants}
              <span className="text-xs font-normal text-muted-foreground ml-1">empresas</span>
            </h3>
            <p className="mt-1 text-[11px] font-medium text-rose-500 flex items-center gap-1">
              <Lock className="h-3 w-3" /> Bloqueados por inadimplência
            </p>
          </div>
          <div className="rounded-xl border bg-rose-500/10 p-3 text-rose-600 dark:text-rose-400">
            <Lock className="h-6 w-6" />
          </div>
        </div>
      </Card>

      {/* Receita Pendente / Em Atraso */}
      <Card className="p-4 shadow-xs border relative overflow-hidden bg-gradient-to-br from-amber-500/10 via-card to-card dark:from-amber-950/20">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
              Total em Atraso (Cobrança)
            </p>
            <h3 className="mt-1 text-2xl font-extrabold tracking-tight text-amber-600 dark:text-amber-400">
              {currency(stats.overdueRevenue)}
            </h3>
            <p className="mt-1 text-[11px] text-muted-foreground flex items-center gap-1">
              <AlertTriangle className="h-3 w-3 text-amber-500" /> Mensalidades com vencimento pendente
            </p>
          </div>
          <div className="rounded-xl border bg-amber-500/10 p-3 text-amber-600 dark:text-amber-400">
            <AlertTriangle className="h-6 w-6" />
          </div>
        </div>
      </Card>
    </div>
  );
}