/*
 * Network Summary Cards Component for Enterprise Dashboard
 */

import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/Card';
import { Badge } from '../../components/ui/Badge';
import {
  Store as StoreIcon,
  DollarSign,
  Package,
  ShoppingCart,
  Truck,
  Users
} from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { formatCurrency } from '../../utils/format';

interface NetworkSummaryData {
  parent_tenant_id: string;
  child_tenant_count: number;
  network_sales_30d: number;
  production_volume_30d: number;
  pending_internal_transfers_count: number;
  active_shipments_count: number;
  last_updated: string;
}

interface NetworkSummaryCardsProps {
  data?: NetworkSummaryData;
  isLoading: boolean;
}

const NetworkSummaryCards: React.FC<NetworkSummaryCardsProps> = ({
  data,
  isLoading
}) => {
  const { t } = useTranslation('dashboard');

  if (isLoading) {
    return (
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
        {[...Array(5)].map((_, index) => (
          <Card key={index} className="animate-pulse">
            <CardHeader className="pb-3">
              <CardTitle className="text-sm text-[var(--text-tertiary)] h-4 bg-[var(--bg-tertiary)] rounded w-3/4"></CardTitle>
            </CardHeader>
            <CardContent>
              <div className="h-6 bg-[var(--bg-tertiary)] rounded w-1/2"></div>
            </CardContent>
          </Card>
        ))}
      </div>
    );
  }

  if (!data) {
    return (
      <div className="text-center py-8 text-[var(--text-secondary)]">
        {t('enterprise.no_network_data')}
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
      {/* Network Outlets Card */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <CardTitle className="text-sm font-medium text-[var(--text-secondary)]">
            {t('enterprise.network_outlets')}
          </CardTitle>
          <StoreIcon className="w-5 h-5 text-[var(--color-primary)]" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold text-[var(--text-primary)]">
            {data.child_tenant_count}
          </div>
          <p className="text-xs text-[var(--text-secondary)] mt-1">
            {t('enterprise.outlets_in_network')}
          </p>
        </CardContent>
      </Card>

      {/* Network Sales Card */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <CardTitle className="text-sm font-medium text-[var(--text-secondary)]">
            {t('enterprise.network_sales')}
          </CardTitle>
          <DollarSign className="w-5 h-5 text-[var(--color-success)]" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold text-[var(--text-primary)]">
            {formatCurrency(data.network_sales_30d, 'EUR')}
          </div>
          <p className="text-xs text-[var(--text-secondary)] mt-1">
            {t('enterprise.last_30_days')}
          </p>
        </CardContent>
      </Card>

      {/* Production Volume Card */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <CardTitle className="text-sm font-medium text-[var(--text-secondary)]">
            {t('enterprise.production_volume')}
          </CardTitle>
          <Package className="w-5 h-5 text-[var(--color-secondary)]" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold text-[var(--text-primary)]">
            {new Intl.NumberFormat('es-ES').format(data.production_volume_30d)} kg
          </div>
          <p className="text-xs text-[var(--text-secondary)] mt-1">
            {t('enterprise.last_30_days')}
          </p>
        </CardContent>
      </Card>

      {/* Pending Internal Transfers Card */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <CardTitle className="text-sm font-medium text-[var(--text-secondary)]">
            {t('enterprise.pending_orders')}
          </CardTitle>
          <ShoppingCart className="w-5 h-5 text-[var(--color-warning)]" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold text-[var(--text-primary)]">
            {data.pending_internal_transfers_count}
          </div>
          <p className="text-xs text-[var(--text-secondary)] mt-1">
            {t('enterprise.internal_transfers')}
          </p>
        </CardContent>
      </Card>

      {/* Active Shipments Card */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <CardTitle className="text-sm font-medium text-[var(--text-secondary)]">
            {t('enterprise.active_shipments')}
          </CardTitle>
          <Truck className="w-5 h-5 text-[var(--color-info)]" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold text-[var(--text-primary)]">
            {data.active_shipments_count}
          </div>
          <p className="text-xs text-[var(--text-secondary)] mt-1">
            {t('enterprise.today')}
          </p>
        </CardContent>
      </Card>
    </div>
  );
};

export default NetworkSummaryCards;