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

import {
  BarChart3,
  PieChart,
  LineChart,
  Activity,
  Table,
  Target,
  Map,
  TrendingUp,
  Grid3X3,
  LayoutDashboard,
  Filter,
  Share2
} from 'lucide-react';

const rand = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;

export const MiniBarChart = () => (
  <div className="flex items-end justify-around h-full gap-1 pb-2">
    {[60, 80, 45, 90, 70, 55, 85].map((h, i) => (
      <div
        key={i}
        className="flex-1 bg-gradient-to-t from-primary to-primary/30 rounded-t animate-pulse"
        style={{ height: `${h}%`, animationDelay: `${i * 0.1}s` }}
      />
    ))}
  </div>
);

export const MiniPieChart = () => (
  <div className="h-full flex items-center justify-center">
    <div className="relative w-16 h-16">
      <svg viewBox="0 0 36 36" className="w-full h-full -rotate-90">
        <circle
          cx="18"
          cy="18"
          r="15.9"
          fill="none"
          stroke="hsl(var(--secondary))"
          strokeWidth="3"
        />
        <circle
          cx="18"
          cy="18"
          r="15.9"
          fill="none"
          stroke="hsl(var(--primary))"
          strokeWidth="3"
          strokeDasharray="75 25"
          className="animate-pulse"
        />
        <circle
          cx="18"
          cy="18"
          r="15.9"
          fill="none"
          stroke="hsl(var(--accent))"
          strokeWidth="3"
          strokeDasharray="25 75"
          strokeDashoffset="-75"
        />
      </svg>
      <div className="absolute inset-0 flex items-center justify-center text-[10px] font-mono text-primary">
        75%
      </div>
    </div>
  </div>
);

export const MiniLineChart = () => (
  <div className="h-full flex items-end p-2">
    <svg viewBox="0 0 100 40" className="w-full h-full">
      <path
        d="M0,35 L15,28 L30,32 L45,15 L60,20 L75,8 L100,12"
        fill="none"
        stroke="hsl(var(--primary))"
        strokeWidth="2"
        className="animate-pulse"
      />
      <path
        d="M0,35 L15,28 L30,32 L45,15 L60,20 L75,8 L100,12 L100,40 L0,40 Z"
        fill="url(#gradient)"
        opacity="0.3"
      />
      <defs>
        <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="hsl(var(--primary))" />
          <stop offset="100%" stopColor="transparent" />
        </linearGradient>
      </defs>
    </svg>
  </div>
);

export const MiniActivity = () => (
  <div className="h-full flex items-center justify-center gap-0.5">
    {[...Array(20)].map((_, i) => (
      <div
        key={i}
        className="w-1 bg-primary rounded-full animate-pulse"
        style={{
          height: `${Math.random() * 60 + 20}%`,
          animationDelay: `${i * 0.05}s`,
        }}
      />
    ))}
  </div>
);

export const MiniTable = () => (
  <div className="h-full flex flex-col text-[7px] font-mono">
    <div className="flex border-b border-primary/30 pb-1 mb-1">
      <span className="flex-1 text-primary">ID</span>
      <span className="flex-1 text-primary">STATUS</span>
      <span className="flex-1 text-primary">VAL</span>
    </div>
    {[...Array(4)].map((_, i) => (
      <div key={i} className="flex py-0.5 text-muted-foreground">
        <span className="flex-1">#{String(i + 1).padStart(3, '0')}</span>
        <span className="flex-1 text-green-400">●</span>
        <span className="flex-1">{Math.floor(Math.random() * 100)}</span>
      </div>
    ))}
  </div>
);

export const MiniGauge = () => (
  <div className="h-full flex items-center justify-center">
    <div className="relative w-16 h-10 overflow-hidden">
      <div className="absolute inset-0 border-4 border-b-0 border-primary/30 rounded-t-full" />
      <div
        className="absolute inset-0 border-4 border-b-0 border-primary rounded-t-full animate-pulse"
        style={{ clipPath: 'polygon(0 100%, 0 0, 75% 0, 75% 100%)' }}
      />
      <div className="absolute bottom-0 left-1/2 w-0.5 h-8 bg-accent origin-bottom -translate-x-1/2 rotate-[30deg]" />
      <div className="absolute bottom-0 left-1/2 text-[8px] font-mono text-primary -translate-x-1/2">
        75%
      </div>
    </div>
  </div>
);

export const MiniMap = () => (
  <div className="h-full bg-secondary/30 rounded relative overflow-hidden">
    <div className="absolute inset-0 grid grid-cols-4 grid-rows-4 gap-px opacity-30">
      {[...Array(16)].map((_, i) => (
        <div key={i} className="border border-primary/20" />
      ))}
    </div>
    <div className="absolute top-1/3 left-1/2 w-2 h-2 bg-accent rounded-full animate-ping" />
    <div className="absolute top-1/3 left-1/2 w-2 h-2 bg-accent rounded-full" />
    <div className="absolute top-1/2 left-1/4 w-1.5 h-1.5 bg-primary rounded-full" />
    <div className="absolute top-2/3 left-3/4 w-1.5 h-1.5 bg-primary rounded-full" />
  </div>
);

export const MiniProgress = () => (
  <div className="h-full flex flex-col justify-center gap-3">
    <div className="text-center">
      <div className="text-2xl font-mono text-primary animate-pulse">87%</div>
      <div className="text-[8px] text-muted-foreground">PROGRESS</div>
    </div>
    <div className="h-2 bg-secondary rounded-full overflow-hidden">
      <div className="h-full w-[87%] bg-gradient-to-r from-primary via-accent to-primary animate-pulse rounded-full" />
    </div>
  </div>
);

export const MiniHeatmap = () => (
  <div className="h-full grid grid-cols-7 gap-0.5 p-1">
    {[...Array(35)].map((_, i) => (
      <div
        key={i}
        className="rounded-sm"
        style={{
          backgroundColor: `hsl(var(--primary) / ${Math.random() * 0.8 + 0.1})`,
        }}
      />
    ))}
  </div>
);

export const MiniTreemap = () => (
  <div className="h-full grid grid-cols-3 grid-rows-2 gap-0.5">
    <div className="col-span-2 bg-primary/60 rounded flex items-center justify-center text-[8px]">
      45%
    </div>
    <div className="bg-primary/40 rounded flex items-center justify-center text-[7px]">20%</div>
    <div className="bg-primary/30 rounded flex items-center justify-center text-[7px]">15%</div>
    <div className="bg-primary/20 rounded flex items-center justify-center text-[6px]">12%</div>
    <div className="bg-primary/10 rounded flex items-center justify-center text-[6px]">8%</div>
  </div>
);

export const MiniRadar = () => (
  <div className="h-full flex items-center justify-center">
    <svg viewBox="0 0 100 100" className="w-16 h-16">
      <polygon
        points="50,10 90,30 80,80 20,80 10,30"
        fill="none"
        stroke="hsl(var(--secondary))"
        strokeWidth="1"
      />
      <polygon
        points="50,25 75,37 70,65 30,65 25,37"
        fill="none"
        stroke="hsl(var(--secondary))"
        strokeWidth="1"
      />
      <polygon
        points="50,40 60,45 57,55 43,55 40,45"
        fill="none"
        stroke="hsl(var(--secondary))"
        strokeWidth="1"
      />
      <polygon
        points="50,20 80,35 72,72 28,72 20,35"
        fill="hsl(var(--primary) / 0.3)"
        stroke="hsl(var(--primary))"
        strokeWidth="2"
        className="animate-pulse"
      />
    </svg>
  </div>
);

export const MiniFunnel = () => (
  <div className="h-full flex flex-col justify-center gap-1 px-2">
    {[
      { label: 'Visitors', width: '100%', value: '10K' },
      { label: 'Signups', width: '60%', value: '6K' },
      { label: 'Active', width: '35%', value: '3.5K' },
      { label: 'Paid', width: '15%', value: '1.5K' },
    ].map(({ label, width, value }) => (
      <div key={label} className="flex items-center gap-2">
        <div className="flex-1 h-3 bg-secondary/30 rounded overflow-hidden">
          <div className="h-full bg-gradient-to-r from-primary to-accent" style={{ width }} />
        </div>
        <span className="text-[6px] text-muted-foreground w-8">{value}</span>
      </div>
    ))}
  </div>
);

export const MiniSankey = () => (
  <div className="h-full flex items-center justify-center">
    <svg viewBox="0 0 100 60" className="w-full h-full">
      <path
        d="M10,10 Q30,10 50,20 T90,25"
        fill="none"
        stroke="hsl(var(--primary))"
        strokeWidth="8"
        opacity="0.6"
      />
      <path
        d="M10,30 Q30,30 50,30 T90,35"
        fill="none"
        stroke="hsl(var(--primary))"
        strokeWidth="6"
        opacity="0.4"
      />
      <path
        d="M10,50 Q30,50 50,40 T90,45"
        fill="none"
        stroke="hsl(var(--primary))"
        strokeWidth="4"
        opacity="0.2"
      />
    </svg>
  </div>
);

export const MiniScatter = () => (
  <div className="h-full relative bg-secondary/10 rounded">
    {[...Array(12)].map((_, i) => (
      <div
        key={i}
        className="absolute w-2 h-2 bg-primary rounded-full animate-pulse"
        style={{
          left: `${Math.random() * 80 + 10}%`,
          top: `${Math.random() * 80 + 10}%`,
          animationDelay: `${i * 0.1}s`,
          opacity: Math.random() * 0.5 + 0.5,
        }}
      />
    ))}
  </div>
);

export const MiniQRCode = () => (
  <div className="h-full flex items-center justify-center">
    <div className="w-14 h-14 grid grid-cols-7 gap-px">
      {[...Array(49)].map((_, i) => {
        const isCorner = (i < 21 && (i % 7 < 3 || i < 3)) || (i >= 28 && i < 49 && i % 7 < 3);
        const isRandom = !isCorner && Math.random() > 0.5;
        return (
          <div key={i} className={`${isCorner || isRandom ? 'bg-primary' : 'bg-secondary/30'}`} />
        );
      })}
    </div>
  </div>
);

export const MiniSpeedometer = () => (
  <div className="h-full flex items-center justify-center">
    <div className="relative w-16 h-8 overflow-hidden mt-2">
      <div className="absolute inset-0 border-4 border-b-0 border-primary/30 rounded-t-full" />
      <div 
        className="absolute inset-0 border-4 border-b-0 border-primary rounded-t-full animate-pulse"
        style={{ transform: 'rotate(-45deg)', transformOrigin: 'bottom center' }}
      />
      <div className="absolute bottom-0 left-1/2 w-0.5 h-7 bg-red-500 origin-bottom -translate-x-1/2 rotate-45" />
      <div className="absolute bottom-0 left-1/2 w-2 h-2 bg-primary rounded-full -translate-x-1/2 translate-y-1/2" />
    </div>
  </div>
);

export const MiniFlowchart = () => (
  <div className="h-full flex items-center justify-center">
    <svg viewBox="0 0 100 60" className="w-full h-full">
      <rect
        x="5"
        y="22"
        width="20"
        height="16"
        rx="2"
        fill="hsl(var(--primary) / 0.3)"
        stroke="hsl(var(--primary))"
      />
      <rect
        x="40"
        y="5"
        width="20"
        height="16"
        rx="8"
        fill="hsl(var(--primary) / 0.3)"
        stroke="hsl(var(--primary))"
      />
      <rect
        x="40"
        y="39"
        width="20"
        height="16"
        rx="8"
        fill="hsl(var(--primary) / 0.3)"
        stroke="hsl(var(--primary))"
      />
      <rect
        x="75"
        y="22"
        width="20"
        height="16"
        rx="2"
        fill="hsl(var(--primary) / 0.3)"
        stroke="hsl(var(--primary))"
      />
      <path d="M25,30 L40,13" fill="none" stroke="hsl(var(--primary))" strokeWidth="1" />
      <path d="M25,30 L40,47" fill="none" stroke="hsl(var(--primary))" strokeWidth="1" />
      <path d="M60,13 L75,30" fill="none" stroke="hsl(var(--primary))" strokeWidth="1" />
      <path d="M60,47 L75,30" fill="none" stroke="hsl(var(--primary))" strokeWidth="1" />
    </svg>
  </div>
);