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

import { Users, TrendingDown, Timer, Eye, Globe, Target, FlaskConical } from 'lucide-react';

export const MiniRealTimeVisitors = () => (
  <div className="h-full flex flex-col items-center justify-center">
    <div className="text-3xl font-mono text-primary animate-pulse">428</div>
    <div className="text-[8px] text-muted-foreground mt-1 flex items-center gap-1">
      <Users size={8} /> LIVE USERS
    </div>
  </div>
);

export const MiniBounceRate = () => (
  <div className="h-full flex flex-col items-center justify-center">
    <div className="text-2xl font-mono text-primary">45%</div>
    <div className="w-16 h-1 bg-secondary rounded-full mt-2 overflow-hidden">
      <div className="h-full w-[45%] bg-primary" />
    </div>
    <div className="text-[8px] text-muted-foreground mt-1">BOUNCE RATE</div>
  </div>
);

export const MiniSessionDuration = () => (
  <div className="h-full flex flex-col items-center justify-center">
    <div className="flex items-end gap-1">
      <span className="text-xl font-mono text-primary">2</span>
      <span className="text-xs text-muted-foreground mb-1">m</span>
      <span className="text-xl font-mono text-primary">34</span>
      <span className="text-xs text-muted-foreground mb-1">s</span>
    </div>
    <div className="text-[8px] text-muted-foreground mt-1 flex items-center gap-1">
      <Timer size={8} /> AVG SESSION
    </div>
  </div>
);

export const MiniPageViews = () => (
  <div className="h-full flex items-end justify-between px-2 pb-2 gap-1">
    {[20, 45, 30, 80, 55, 90, 65].map((h, i) => (
      <div key={i} className="flex-1 bg-primary/20 rounded-sm hover:bg-primary/60 transition-colors" style={{ height: `${h}%` }} />
    ))}
  </div>
);

export const MiniTrafficSources = () => (
  <div className="h-full flex flex-col justify-center gap-1 px-2">
    {[
      { label: 'Direct', val: '40%' },
      { label: 'Social', val: '30%' },
      { label: 'Search', val: '30%' }
    ].map(s => (
      <div key={s.label} className="flex justify-between text-[8px]">
        <span className="text-muted-foreground">{s.label}</span>
        <span className="text-primary">{s.val}</span>
      </div>
    ))}
  </div>
);

export const MiniGoalCompletion = () => (
  <div className="h-full flex items-center justify-center relative">
    <svg viewBox="0 0 36 36" className="w-12 h-12">
      <path
        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
        fill="none"
        stroke="hsl(var(--secondary))"
        strokeWidth="4"
      />
      <path
        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
        fill="none"
        stroke="hsl(var(--primary))"
        strokeWidth="4"
        strokeDasharray="85, 100"
        className="animate-[spin_3s_linear_infinite]"
      />
    </svg>
    <Target size={12} className="absolute text-primary" />
  </div>
);

export const MiniCountryStats = () => (
  <div className="h-full grid grid-cols-2 gap-1 p-1">
    {['US', 'DE', 'UK', 'DK'].map(c => (
      <div key={c} className="bg-secondary/30 rounded flex items-center justify-center text-[8px] font-mono">
        {c}
      </div>
    ))}
  </div>
);

export const MiniABTest = () => (
  <div className="h-full flex items-center justify-around">
    <div className="flex flex-col items-center">
      <div className="text-xs font-bold text-primary">A</div>
      <div className="text-[8px] text-muted-foreground">12%</div>
    </div>
    <div className="h-8 w-px bg-border" />
    <div className="flex flex-col items-center">
      <div className="text-xs font-bold text-green-500">B</div>
      <div className="text-[8px] text-muted-foreground">18%</div>
    </div>
  </div>
);