import { Phone, TrendingUp, Activity, BarChart2, ShoppingCart, ShoppingBag, Scale } from 'lucide-react';
import type { TileItem } from "../../api/types";

export interface StatsTilesProps {
  tiles?: TileItem[];
}

export function StatsTiles({ tiles }: StatsTilesProps) {
  if (!tiles?.length) return null;

  return (
    <div className="grid grid-cols-2 gap-5 md:grid-cols-4">
      {tiles.map((tile, idx) => {
        const displayLabel = (tile.key || `tile_${idx}`)
          .replace(/_/g, " ")
          .replace(/\b\w/g, (c) => c.toUpperCase());

        const lowerKey = String(tile.key).toLowerCase();
        let Icon = BarChart2;
        if (lowerKey.includes('call') || lowerKey.includes('total')) Icon = Phone;
        if (lowerKey.includes('productive')) Icon = TrendingUp;
        if (lowerKey.includes('order') || lowerKey.includes('cart')) Icon = ShoppingCart;
        if (lowerKey.includes('bag')) Icon = ShoppingBag;
        if (lowerKey.includes('kg') || lowerKey.includes('weight')) Icon = Scale;
        if (lowerKey.includes('active')) Icon = Activity;

        const isDanger = lowerKey.includes('no_order');

        return (
          <div
            key={tile.tile_uid || idx}
            className={`flex flex-col justify-between w-full h-[100px] p-4 rounded-lg bg-[var(--z-bg-neutral-100)] border border-[var(--z-border-neutral-300)] border-t-4 shadow-sm transition-transform duration-200 hover:-translate-y-1 ${
              isDanger ? 'border-t-[var(--z-text-danger-400)]' : 'border-t-[var(--z-text-primary)]'
            }`}
          >
            <div className="flex justify-between items-center">
              <span className={`text-[10px] font-bold uppercase tracking-wider whitespace-nowrap overflow-hidden text-ellipsis max-w-[80%] ${
                isDanger ? 'text-[var(--z-text-danger-400)]' : 'text-[var(--z-text-neutral-500)]'
              }`}>
                {displayLabel}
              </span>
              <Icon size={16} className={`${
                isDanger ? 'text-[var(--z-text-danger-400)]' : 'text-[var(--z-text-success-400)]'
              }`} />
            </div>

            <p className={`text-[30px] font-extrabold leading-tight tabular-nums ${
              isDanger ? 'text-[var(--z-text-danger-400)]' : 'text-[var(--z-text-primary)]'
            }`}>
              {(tile.value as React.ReactNode) ?? "-"}
            </p>
          </div>
        );
      })}
    </div>
  );
}