apps/matrix-frontend/src/components/widgets/mini/CommerceWidgets.tsx

import { useState } from 'react';
import { ShoppingCart, Truck, Package, Star, AlertTriangle } from 'lucide-react';

export const MiniCart = () => (
  <div className="h-full flex flex-col">
    <div className="flex items-center justify-between mb-2">
      <ShoppingCart className="w-4 h-4 text-primary" />
      <span className="text-[8px] bg-accent text-accent-foreground px-1 rounded">3</span>
    </div>
    {[1, 2, 3].map(i => (
      <div key={i} className="flex items-center gap-2 mb-1">
        <div className="w-4 h-4 bg-secondary rounded" />
        <div className="flex-1 h-2 bg-secondary/50 rounded" />
        <span className="text-[7px] text-primary">$99</span>
      </div>
    ))}
    <div className="mt-auto pt-1 border-t border-border/30 flex justify-between text-[8px]">
      <span className="text-muted-foreground">Total:</span>
      <span className="text-primary font-mono">$297</span>
    </div>
  </div>
);

export const MiniCountdown = () => {
  const [time] = useState({ d: 12, h: 5, m: 34, s: 22 });
  return (
    <div className="h-full flex items-center justify-center gap-2">
      {Object.entries(time).map(([unit, val]) => (
        <div key={unit} className="text-center">
          <div className="text-lg font-mono text-primary bg-secondary/30 rounded px-1">
            {String(val).padStart(2, '0')}
          </div>
          <div className="text-[6px] text-muted-foreground uppercase">{unit}</div>
        </div>
      ))}
    </div>
  );
};

export const MiniCryptoTicker = () => (
  <div className="h-full flex flex-col justify-center gap-1">
    {[
      { symbol: 'BTC', price: '43,250', change: '+2.4%', up: true },
      { symbol: 'ETH', price: '2,280', change: '-0.8%', up: false },
      { symbol: 'SOL', price: '98.50', change: '+5.2%', up: true },
    ].map(({ symbol, price, change, up }) => (
      <div key={symbol} className="flex items-center justify-between text-[8px]">
        <span className="font-mono text-foreground">{symbol}</span>
        <span className="font-mono text-primary">${price}</span>
        <span className={up ? 'text-green-400' : 'text-red-400'}>{change}</span>
      </div>
    ))}
  </div>
);

export const MiniOrderStatus = () => (
  <div className="h-full flex items-center justify-between px-1">
    {['Ordered', 'Packed', 'Shipped', 'Delivered'].map((s, i) => (
      <div key={s} className="flex flex-col items-center gap-1">
        <div className={`w-5 h-5 rounded-full flex items-center justify-center text-[7px] ${i < 2 ? 'bg-green-500 text-white' : i === 2 ? 'bg-yellow-500 text-black' : 'bg-secondary text-muted-foreground'}`}>
          {i < 2 ? '✓' : i === 2 ? <Truck className="w-3 h-3" /> : '○'}
        </div>
        <span className="text-[5px] text-muted-foreground">{s}</span>
      </div>
    ))}
  </div>
);

export const MiniProductCard = () => (
  <div className="h-full flex gap-2">
    <div className="w-12 h-12 bg-secondary/50 rounded flex items-center justify-center">
      <Package className="w-6 h-6 text-muted-foreground" />
    </div>
    <div className="flex-1 flex flex-col justify-center">
      <span className="text-[9px] font-medium truncate">Product Name</span>
      <span className="text-[8px] text-muted-foreground">SKU: PRD-001</span>
      <div className="flex items-center gap-2 mt-1">
        <span className="text-[10px] text-primary font-mono">$49.99</span>
        <span className="text-[7px] text-green-400">In Stock</span>
      </div>
    </div>
  </div>
);

export const MiniSalesFunnel = () => (
  <div className="h-full flex flex-col justify-center gap-0.5">
    {[
      { label: 'Visitors', value: '10,000', width: '100%' },
      { label: 'Added to Cart', value: '2,500', width: '70%' },
      { label: 'Checkout', value: '800', width: '45%' },
      { label: 'Purchased', value: '320', width: '25%' },
    ].map((stage, i) => (
      <div key={stage.label} className="flex items-center gap-2">
        <div className="h-2 bg-gradient-to-r from-primary to-accent rounded-r" style={{ width: stage.width }} />
        <span className="text-[6px] text-muted-foreground whitespace-nowrap">{stage.value}</span>
      </div>
    ))}
  </div>
);

export const MiniReviewScore = () => (
  <div className="h-full flex flex-col items-center justify-center gap-1">
    <div className="flex gap-0.5">
      {[1, 2, 3, 4, 5].map(i => (
        <Star key={i} className={`w-3 h-3 ${i <= 4 ? 'text-yellow-400 fill-yellow-400' : 'text-muted-foreground'}`} />
      ))}
    </div>
    <span className="text-sm font-mono text-primary">4.2</span>
    <span className="text-[7px] text-muted-foreground">1,247 reviews</span>
  </div>
);

export const MiniInventoryAlert = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center gap-1 text-[8px]">
      <AlertTriangle className="w-3 h-3 text-yellow-400" />
      <span className="text-yellow-400">Low Stock Alert</span>
    </div>
    {[
      { name: 'Widget A', qty: 5 },
      { name: 'Gadget B', qty: 12 },
    ].map(item => (
      <div key={item.name} className="flex items-center justify-between text-[7px] bg-secondary/20 rounded px-1.5 py-0.5">
        <span className="text-muted-foreground">{item.name}</span>
        <span className="text-red-400 font-mono">{item.qty} left</span>
      </div>
    ))}
  </div>
);

export const MiniConversionRate = () => (
  <div className="h-full flex flex-col items-center justify-center gap-1">
    <div className="relative w-14 h-14">
      <svg viewBox="0 0 36 36" className="w-full h-full -rotate-90">
        <circle cx="18" cy="18" r="15" fill="none" stroke="hsl(var(--secondary))" strokeWidth="3" />
        <circle cx="18" cy="18" r="15" fill="none" stroke="hsl(var(--primary))" strokeWidth="3" strokeDasharray="32 68" />
      </svg>
      <div className="absolute inset-0 flex flex-col items-center justify-center">
        <span className="text-sm font-mono text-primary">3.2%</span>
      </div>
    </div>
    <span className="text-[7px] text-muted-foreground">Conversion Rate</span>
  </div>
);