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

import {
  Sun,
  HardDrive,
  Wifi,
  Battery,
  Settings,
  Activity,
  Thermometer,
  ArrowDown,
  ArrowUp,
  Power
} from 'lucide-react';

export const MiniWeather = () => (
  <div className="h-full flex items-center justify-between px-2">
    <Sun className="w-8 h-8 text-yellow-400 animate-pulse" />
    <div className="text-right">
      <div className="text-lg font-mono text-primary">22°</div>
      <div className="text-[8px] text-muted-foreground">SUNNY</div>
    </div>
  </div>
);

export const MiniStorage = () => (
  <div className="h-full flex flex-col justify-center gap-2">
    {[
      { label: 'SSD', used: 75 },
      { label: 'RAM', used: 45 },
      { label: 'CPU', used: 60 },
    ].map(item => (
      <div key={item.label} className="flex items-center gap-2">
        <span className="text-[8px] font-mono text-muted-foreground w-6">{item.label}</span>
        <div className="flex-1 h-2 bg-secondary rounded-full overflow-hidden">
          <div
            className="h-full bg-gradient-to-r from-primary to-accent animate-pulse"
            style={{ width: `${item.used}%` }}
          />
        </div>
        <span className="text-[8px] font-mono text-primary w-6">{item.used}%</span>
      </div>
    ))}
  </div>
);

export const MiniNetwork = () => (
  <div className="h-full flex items-center justify-center">
    <div className="relative">
      <div className="w-12 h-12 rounded-full border-2 border-primary/30 flex items-center justify-center">
        <Wifi className="w-5 h-5 text-primary animate-pulse" />
      </div>
      {[0, 1, 2].map(i => (
        <div
          key={i}
          className="absolute inset-0 rounded-full border border-primary/20 animate-ping"
          style={{ animationDelay: `${i * 0.5}s`, animationDuration: '2s' }}
        />
      ))}
    </div>
  </div>
);

export const MiniBattery = () => (
  <div className="h-full flex items-center justify-center gap-3">
    <div className="relative w-12 h-6 border-2 border-primary/50 rounded">
      <div className="absolute right-[-4px] top-1/2 -translate-y-1/2 w-1 h-2 bg-primary/50 rounded-r" />
      <div
        className="absolute inset-0.5 bg-gradient-to-r from-green-500 to-green-400 rounded-sm"
        style={{ width: '75%' }}
      />
    </div>
    <div className="text-right">
      <div className="text-sm font-mono text-primary">78%</div>
      <div className="text-[7px] text-muted-foreground">2h 15m</div>
    </div>
  </div>
);

export const MiniTogglePanel = () => (
  <div className="h-full flex flex-col gap-2 justify-center">
    {[
      { label: 'Dark Mode', on: true },
      { label: 'Notifications', on: true },
      { label: 'Auto-sync', on: false },
    ].map(({ label, on }) => (
      <div key={label} className="flex items-center justify-between">
        <span className="text-[8px] text-muted-foreground">{label}</span>
        <div className={`w-6 h-3 rounded-full ${on ? 'bg-primary' : 'bg-secondary'} relative`}>
          <div
            className={`absolute w-2.5 h-2.5 rounded-full bg-white top-0.5 transition-all ${on ? 'right-0.5' : 'left-0.5'}`}
          />
        </div>
      </div>
    ))}
  </div>
);

export const MiniSliders = () => (
  <div className="h-full flex flex-col gap-2 justify-center">
    {[
      { label: 'Volume', value: 75 },
      { label: 'Brightness', value: 50 },
      { label: 'Speed', value: 90 },
    ].map(({ label, value }) => (
      <div key={label} className="flex items-center gap-2">
        <span className="text-[7px] text-muted-foreground w-10">{label}</span>
        <div className="flex-1 h-1.5 bg-secondary rounded-full">
          <div className="h-full bg-primary rounded-full relative" style={{ width: `${value}%` }}>
            <div className="absolute right-0 top-1/2 -translate-y-1/2 w-2.5 h-2.5 bg-primary rounded-full border-2 border-background" />
          </div>
        </div>
      </div>
    ))}
  </div>
);

export const MiniStatusBoard = () => (
  <div className="h-full grid grid-cols-2 gap-1">
    {[
      { label: 'API', status: 'online' },
      { label: 'DB', status: 'online' },
      { label: 'CDN', status: 'warning' },
      { label: 'Auth', status: 'online' },
    ].map(({ label, status }) => (
      <div key={label} className="flex items-center gap-1 bg-secondary/20 rounded px-1.5 py-1">
        <div
          className={`w-1.5 h-1.5 rounded-full ${status === 'online' ? 'bg-green-400' : status === 'warning' ? 'bg-yellow-400' : 'bg-red-400'}`}
        />
        <span className="text-[8px] text-muted-foreground">{label}</span>
      </div>
    ))}
  </div>
);

export const MiniThermometer = () => (
  <div className="h-full flex items-center justify-center gap-4">
    <div className="relative w-4 h-16 bg-secondary rounded-full overflow-hidden">
      <div
        className="absolute bottom-0 w-full bg-gradient-to-t from-red-500 to-yellow-500 rounded-full"
        style={{ height: '60%' }}
      />
    </div>
    <div className="text-right">
      <div className="text-lg font-mono text-primary">24°C</div>
      <div className="text-[7px] text-muted-foreground">Indoor</div>
    </div>
  </div>
);

export const MiniCPUCores = () => (
  <div className="h-full grid grid-cols-4 gap-1">
    {[45, 78, 32, 91, 56, 23, 67, 44].map((load, i) => (
      <div key={i} className="flex flex-col items-center justify-center bg-secondary/20 rounded p-0.5">
        <div className={`w-full h-2 rounded ${load > 80 ? 'bg-red-400' : load > 50 ? 'bg-yellow-400' : 'bg-green-400'}`} style={{ opacity: load / 100 }} />
        <span className="text-[5px] text-muted-foreground">C{i}</span>
      </div>
    ))}
  </div>
);

export const MiniMemoryUsage = () => (
  <div className="h-full flex flex-col justify-center gap-2">
    <div className="flex justify-between text-[8px]">
      <span className="text-muted-foreground">Memory</span>
      <span className="text-primary">12.4 / 16 GB</span>
    </div>
    <div className="h-4 bg-secondary rounded flex overflow-hidden">
      <div className="bg-primary" style={{ width: '50%' }} title="Used" />
      <div className="bg-yellow-500" style={{ width: '15%' }} title="Cached" />
      <div className="bg-blue-500" style={{ width: '12%' }} title="Buffers" />
    </div>
    <div className="flex justify-between text-[6px] text-muted-foreground">
      <span>Used</span><span>Cached</span><span>Free</span>
    </div>
  </div>
);

export const MiniDiskIO = () => (
  <div className="h-full flex flex-col gap-1 justify-center">
    <div className="flex items-center gap-2 text-[7px]">
      <ArrowDown className="w-3 h-3 text-green-400" />
      <span className="text-muted-foreground">Read:</span>
      <span className="text-primary font-mono">125 MB/s</span>
    </div>
    <div className="flex items-center gap-2 text-[7px]">
      <ArrowUp className="w-3 h-3 text-blue-400" />
      <span className="text-muted-foreground">Write:</span>
      <span className="text-primary font-mono">89 MB/s</span>
    </div>
    <div className="h-1.5 bg-secondary rounded-full overflow-hidden flex">
      <div className="bg-green-400" style={{ width: '60%' }} />
      <div className="bg-blue-400" style={{ width: '40%' }} />
    </div>
  </div>
);

export const MiniProcessList = () => (
  <div className="h-full flex flex-col gap-0.5 text-[6px] font-mono">
    <div className="flex border-b border-border/30 pb-0.5 text-muted-foreground">
      <span className="flex-1">PID</span><span className="w-12">CPU</span><span className="w-10">MEM</span>
    </div>
    {[
      { pid: '1234', name: 'node', cpu: '12%', mem: '2.1G' },
      { pid: '5678', name: 'nginx', cpu: '3%', mem: '512M' },
      { pid: '9012', name: 'postgres', cpu: '8%', mem: '1.8G' },
    ].map(p => (
      <div key={p.pid} className="flex">
        <span className="flex-1 text-primary">{p.pid}</span>
        <span className="w-12">{p.cpu}</span>
        <span className="w-10">{p.mem}</span>
      </div>
    ))}
  </div>
);

export const MiniUptime = () => (
  <div className="h-full flex flex-col items-center justify-center gap-2">
    <div className="flex items-center gap-2">
      <Power className="w-4 h-4 text-green-400" />
      <span className="text-green-400 text-[8px]">ONLINE</span>
    </div>
    <span className="text-sm font-mono text-primary">127d 14h 32m</span>
    <span className="text-[7px] text-muted-foreground">99.98% uptime</span>
  </div>
);

export const MiniTemperatureMonitor = () => (
  <div className="h-full flex flex-col gap-1">
    {[
      { component: 'CPU', temp: 62 },
      { component: 'GPU', temp: 71 },
      { component: 'SSD', temp: 45 },
    ].map(c => (
      <div key={c.component} className="flex items-center gap-2 text-[7px]">
        <span className="w-6 text-muted-foreground">{c.component}</span>
        <div className="flex-1 h-2 bg-secondary rounded-full overflow-hidden">
          <div className={`h-full ${c.temp > 70 ? 'bg-red-400' : c.temp > 50 ? 'bg-yellow-400' : 'bg-green-400'}`} style={{ width: `${c.temp}%` }} />
        </div>
        <span className="w-8 text-right text-primary">{c.temp}°C</span>
      </div>
    ))}
  </div>
);