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

import { CheckCircle } from 'lucide-react';

export const MiniSprintProgress = () => (
  <div className="h-full flex flex-col gap-1">
    <div className="flex items-center justify-between text-[8px]">
      <span className="text-muted-foreground">Sprint 14</span>
      <span className="text-primary">Day 8/14</span>
    </div>
    <div className="h-3 bg-secondary rounded-full overflow-hidden flex">
      <div className="h-full bg-green-500" style={{ width: '45%' }} />
      <div className="h-full bg-blue-500" style={{ width: '20%' }} />
      <div className="h-full bg-yellow-500" style={{ width: '15%' }} />
    </div>
    <div className="flex justify-between text-[6px] text-muted-foreground">
      <span>Done: 12</span><span>In Progress: 5</span><span>Todo: 8</span>
    </div>
  </div>
);

export const MiniBurndown = () => (
  <div className="h-full flex flex-col">
    <span className="text-[7px] text-muted-foreground mb-1">Burndown</span>
    <svg viewBox="0 0 100 50" className="flex-1">
      <line x1="0" y1="5" x2="100" y2="45" stroke="hsl(var(--muted-foreground))" strokeWidth="1" strokeDasharray="3" />
      <path d="M0,5 L15,8 L30,15 L45,18 L60,28 L75,25 L90,35" fill="none" stroke="hsl(var(--primary))" strokeWidth="2" />
      <circle cx="90" cy="35" r="2" fill="hsl(var(--primary))" />
    </svg>
    <div className="flex justify-between text-[6px] text-muted-foreground">
      <span>Start</span><span>Today</span><span>End</span>
    </div>
  </div>
);

export const MiniTeamCapacity = () => (
  <div className="h-full flex flex-col gap-1">
    {[
      { name: 'Alice', capacity: 80 },
      { name: 'Bob', capacity: 95 },
      { name: 'Carol', capacity: 60 },
    ].map(m => (
      <div key={m.name} className="flex items-center gap-2 text-[7px]">
        <span className="w-8 truncate text-muted-foreground">{m.name}</span>
        <div className="flex-1 h-2 bg-secondary rounded-full overflow-hidden">
          <div className={`h-full ${m.capacity > 90 ? 'bg-red-400' : m.capacity > 70 ? 'bg-yellow-400' : 'bg-green-400'}`} style={{ width: `${m.capacity}%` }} />
        </div>
        <span className="w-6 text-right text-primary">{m.capacity}%</span>
      </div>
    ))}
  </div>
);

export const MiniMilestones = () => (
  <div className="h-full flex items-center">
    <div className="flex-1 relative h-2">
      <div className="absolute inset-x-0 top-1/2 h-0.5 bg-secondary -translate-y-1/2" />
      {[0, 33, 66, 100].map((pos, i) => (
        <div key={i} className={`absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-3 h-3 rounded-full border-2 ${i < 2 ? 'bg-primary border-primary' : i === 2 ? 'bg-yellow-400 border-yellow-400' : 'bg-secondary border-muted-foreground'}`} style={{ left: `${pos}%` }}>
          {i < 2 && <CheckCircle className="w-full h-full text-primary-foreground" />}
        </div>
      ))}
    </div>
  </div>
);

export const MiniVelocity = () => (
  <div className="h-full flex flex-col">
    <span className="text-[7px] text-muted-foreground">Velocity</span>
    <div className="flex-1 flex items-end gap-1">
      {[28, 32, 25, 38, 35, 42].map((v, i) => (
        <div key={i} className="flex-1 flex flex-col items-center gap-0.5">
          <div className="w-full bg-primary/70 rounded-t" style={{ height: `${v * 2}%` }} />
          <span className="text-[5px] text-muted-foreground">S{i + 9}</span>
        </div>
      ))}
    </div>
    <div className="text-[7px] text-right text-primary">Avg: 33 pts</div>
  </div>
);

export const MiniIssueTracker = () => (
  <div className="h-full flex flex-col gap-1">
    {[
      { id: 'BUG-42', priority: 'high', title: 'Login crash' },
      { id: 'FEAT-18', priority: 'med', title: 'Dark mode' },
      { id: 'BUG-43', priority: 'low', title: 'Typo fix' },
    ].map(issue => (
      <div key={issue.id} className="flex items-center gap-1 text-[7px] bg-secondary/20 rounded px-1 py-0.5">
        <div className={`w-1.5 h-1.5 rounded-full ${issue.priority === 'high' ? 'bg-red-400' : issue.priority === 'med' ? 'bg-yellow-400' : 'bg-blue-400'}`} />
        <span className="text-primary font-mono">{issue.id}</span>
        <span className="flex-1 truncate text-muted-foreground">{issue.title}</span>
      </div>
    ))}
  </div>
);