'use client';
import { useState } from 'react';

interface AppraisalCycle {
  id: string;
  name: string;
  type: 'Annual' | 'Half-yearly' | 'Quarterly';
  status: 'Active' | 'Upcoming' | 'Completed' | 'Draft';
  goalSettingStart: string;
  selfAssessmentDeadline: string;
  managerReviewDeadline: string;
  calibrationDate: string;
  endDate: string;
  eligibleEmployees: number;
  completionRate: number;
  departments: string[];
}

const INITIAL_CYCLES: AppraisalCycle[] = [
  { id: 'CYC-2026-Q1', name: 'Q1 2026 Appraisal', type: 'Quarterly', status: 'Active', goalSettingStart: '2026-01-05', selfAssessmentDeadline: '2026-03-28', managerReviewDeadline: '2026-04-10', calibrationDate: '2026-04-18', endDate: '2026-04-30', eligibleEmployees: 47, completionRate: 72, departments: ['All'] },
  { id: 'CYC-2025-ANN', name: 'Annual Appraisal 2025', type: 'Annual', status: 'Completed', goalSettingStart: '2025-01-10', selfAssessmentDeadline: '2025-12-20', managerReviewDeadline: '2026-01-10', calibrationDate: '2026-01-20', endDate: '2026-01-31', eligibleEmployees: 44, completionRate: 96, departments: ['All'] },
  { id: 'CYC-2026-Q2', name: 'Q2 2026 Appraisal', type: 'Quarterly', status: 'Upcoming', goalSettingStart: '2026-04-01', selfAssessmentDeadline: '2026-06-28', managerReviewDeadline: '2026-07-10', calibrationDate: '2026-07-18', endDate: '2026-07-31', eligibleEmployees: 47, completionRate: 0, departments: ['All'] },
  { id: 'CYC-2026-H1', name: 'H1 2026 Mid-year Review', type: 'Half-yearly', status: 'Upcoming', goalSettingStart: '2026-01-01', selfAssessmentDeadline: '2026-06-25', managerReviewDeadline: '2026-07-05', calibrationDate: '2026-07-12', endDate: '2026-07-20', eligibleEmployees: 47, completionRate: 0, departments: ['ICT', 'Finance', 'Programmes'] },
];

const PROGRESS_DATA: Record<string, { dept: string; total: number; selfDone: number; managerDone: number; calibrated: number }[]> = {
  'CYC-2026-Q1': [
    { dept: 'Finance', total: 9, selfDone: 9, managerDone: 8, calibrated: 7 },
    { dept: 'Human Resources', total: 7, selfDone: 7, managerDone: 6, calibrated: 5 },
    { dept: 'ICT', total: 8, selfDone: 6, managerDone: 4, calibrated: 3 },
    { dept: 'Operations', total: 11, selfDone: 10, managerDone: 7, calibrated: 5 },
    { dept: 'Legal', total: 5, selfDone: 5, managerDone: 5, calibrated: 5 },
    { dept: 'Administration', total: 7, selfDone: 5, managerDone: 4, calibrated: 3 },
  ],
  'CYC-2025-ANN': [
    { dept: 'Finance', total: 9, selfDone: 9, managerDone: 9, calibrated: 9 },
    { dept: 'Human Resources', total: 7, selfDone: 7, managerDone: 7, calibrated: 6 },
    { dept: 'ICT', total: 8, selfDone: 8, managerDone: 8, calibrated: 8 },
    { dept: 'Operations', total: 11, selfDone: 11, managerDone: 10, calibrated: 10 },
    { dept: 'Legal', total: 5, selfDone: 5, managerDone: 5, calibrated: 5 },
    { dept: 'Administration', total: 4, selfDone: 4, managerDone: 4, calibrated: 4 },
  ],
};

const statusColors: Record<string, string> = {
  Active: 'bg-green-100 text-green-700',
  Upcoming: 'bg-blue-100 text-blue-700',
  Completed: 'bg-gray-100 text-gray-600',
  Draft: 'bg-yellow-100 text-yellow-700',
};

const typeColors: Record<string, string> = {
  Annual: 'bg-purple-100 text-purple-700',
  'Half-yearly': 'bg-pink-100 text-pink-700',
  Quarterly: 'bg-indigo-100 text-indigo-700',
};

function ProgressModal({ cycle, onClose }: { cycle: AppraisalCycle; onClose: () => void }) {
  const rows = PROGRESS_DATA[cycle.id] || [];
  const totals = rows.reduce((acc, r) => ({
    total: acc.total + r.total,
    selfDone: acc.selfDone + r.selfDone,
    managerDone: acc.managerDone + r.managerDone,
    calibrated: acc.calibrated + r.calibrated,
  }), { total: 0, selfDone: 0, managerDone: 0, calibrated: 0 });

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between" style={{ background: '#b828a0' }}>
          <div>
            <h2 className="text-white font-bold text-lg">Cycle Progress</h2>
            <p className="text-pink-200 text-sm">{cycle.name}</p>
          </div>
          <button onClick={onClose} className="w-8 h-8 flex items-center justify-center cursor-pointer">
            <i className="ri-close-line text-white text-xl"></i>
          </button>
        </div>
        <div className="p-6 space-y-5">
          <div className="grid grid-cols-4 gap-3">
            {[
              { label: 'Eligible Employees', value: cycle.eligibleEmployees, icon: 'ri-team-line', color: '#b828a0' },
              { label: 'Self-Assessment Done', value: totals.selfDone, icon: 'ri-user-line', color: '#2563eb' },
              { label: 'Manager Review Done', value: totals.managerDone, icon: 'ri-user-star-line', color: '#059669' },
              { label: 'Calibrated', value: totals.calibrated, icon: 'ri-scales-3-line', color: '#d97706' },
            ].map(s => (
              <div key={s.label} className="bg-gray-50 rounded-xl p-3 text-center">
                <div className="w-8 h-8 flex items-center justify-center rounded-xl mx-auto mb-2" style={{ background: s.color + '20' }}>
                  <i className={`${s.icon} text-base`} style={{ color: s.color }}></i>
                </div>
                <p className="text-xl font-bold text-gray-800">{s.value}</p>
                <p className="text-xs text-gray-500 mt-0.5">{s.label}</p>
              </div>
            ))}
          </div>

          <div>
            <div className="flex items-center justify-between mb-2">
              <p className="text-sm font-semibold text-gray-700">Overall Completion</p>
              <p className="text-sm font-bold" style={{ color: '#b828a0' }}>{cycle.completionRate}%</p>
            </div>
            <div className="w-full h-3 bg-gray-100 rounded-full overflow-hidden">
              <div className="h-full rounded-full transition-all" style={{ width: `${cycle.completionRate}%`, background: '#b828a0' }}></div>
            </div>
          </div>

          {rows.length > 0 && (
            <div>
              <p className="text-sm font-semibold text-gray-700 mb-3">Progress by Department</p>
              <table className="w-full">
                <thead>
                  <tr className="border-b border-gray-100">
                    {['Department', 'Total', 'Self-Assessment', 'Manager Review', 'Calibrated', 'Progress'].map(h => (
                      <th key={h} className="text-left text-xs font-semibold text-gray-500 pb-2 pr-3">{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {rows.map(r => {
                    const pct = Math.round((r.calibrated / r.total) * 100);
                    return (
                      <tr key={r.dept} className="border-b border-gray-50">
                        <td className="py-2 pr-3 text-sm font-medium text-gray-800">{r.dept}</td>
                        <td className="py-2 pr-3 text-sm text-gray-600">{r.total}</td>
                        <td className="py-2 pr-3">
                          <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${r.selfDone === r.total ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>{r.selfDone}/{r.total}</span>
                        </td>
                        <td className="py-2 pr-3">
                          <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${r.managerDone === r.total ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>{r.managerDone}/{r.total}</span>
                        </td>
                        <td className="py-2 pr-3">
                          <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${r.calibrated === r.total ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'}`}>{r.calibrated}/{r.total}</span>
                        </td>
                        <td className="py-2">
                          <div className="flex items-center gap-2">
                            <div className="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden w-20">
                              <div className="h-full rounded-full" style={{ width: `${pct}%`, background: '#b828a0' }}></div>
                            </div>
                            <span className="text-xs text-gray-500 w-8">{pct}%</span>
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
          {rows.length === 0 && (
            <div className="text-center py-8 text-gray-400 text-sm">No progress data available — cycle has not started yet</div>
          )}
        </div>
      </div>
    </div>
  );
}

function EditCycleModal({ cycle, onClose, onSave }: { cycle: AppraisalCycle; onClose: () => void; onSave: (c: AppraisalCycle) => void }) {
  const [form, setForm] = useState<AppraisalCycle>({ ...cycle });
  const set = (k: keyof AppraisalCycle, v: any) => setForm(p => ({ ...p, [k]: v }));

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-xl max-h-[90vh] overflow-y-auto">
        <div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between" style={{ background: '#b828a0' }}>
          <h2 className="text-white font-bold text-lg">Edit Cycle — {cycle.id}</h2>
          <button onClick={onClose} className="w-8 h-8 flex items-center justify-center cursor-pointer">
            <i className="ri-close-line text-white text-xl"></i>
          </button>
        </div>
        <div className="p-6 space-y-4">
          <div>
            <label className="text-xs font-semibold text-gray-600 block mb-1">Cycle Name</label>
            <input value={form.name} onChange={e => set('name', e.target.value)}
              className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400" />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-xs font-semibold text-gray-600 block mb-1">Cycle Type</label>
              <select value={form.type} onChange={e => set('type', e.target.value as any)}
                className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none pr-8 cursor-pointer">
                <option>Quarterly</option><option>Half-yearly</option><option>Annual</option>
              </select>
            </div>
            <div>
              <label className="text-xs font-semibold text-gray-600 block mb-1">Status</label>
              <select value={form.status} onChange={e => set('status', e.target.value as any)}
                className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none pr-8 cursor-pointer">
                <option>Draft</option><option>Upcoming</option><option>Active</option><option>Completed</option>
              </select>
            </div>
          </div>
          {[
            { label: 'Goal Setting Start', key: 'goalSettingStart' },
            { label: 'Self-Assessment Deadline', key: 'selfAssessmentDeadline' },
            { label: 'Manager Review Deadline', key: 'managerReviewDeadline' },
            { label: 'Calibration Date', key: 'calibrationDate' },
            { label: 'Cycle End Date', key: 'endDate' },
          ].map(f => (
            <div key={f.key}>
              <label className="text-xs font-semibold text-gray-600 block mb-1">{f.label}</label>
              <input type="date" value={(form as any)[f.key]} onChange={e => set(f.key as keyof AppraisalCycle, e.target.value)}
                className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400" />
            </div>
          ))}
          <div>
            <label className="text-xs font-semibold text-gray-600 block mb-1">Eligible Employees</label>
            <input type="number" value={form.eligibleEmployees} onChange={e => set('eligibleEmployees', +e.target.value)}
              className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm outline-none focus:border-pink-400" />
          </div>
        </div>
        <div className="px-6 pb-6 flex gap-3">
          <button onClick={onClose} className="flex-1 py-2.5 rounded-xl border border-gray-200 text-sm font-medium text-gray-600 hover:bg-gray-50 cursor-pointer whitespace-nowrap">Cancel</button>
          <button onClick={() => { onSave(form); onClose(); }}
            className="flex-1 py-2.5 rounded-xl text-white text-sm font-semibold cursor-pointer whitespace-nowrap"
            style={{ background: '#b828a0' }}>
            Save Changes
          </button>
        </div>
      </div>
    </div>
  );
}

function LaunchConfirmModal({ cycle, onClose, onLaunch }: { cycle: AppraisalCycle; onClose: () => void; onLaunch: () => void }) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-sm p-6">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-12 h-12 flex items-center justify-center rounded-2xl" style={{ background: '#fdf0fb' }}>
            <i className="ri-play-circle-line text-2xl" style={{ color: '#b828a0' }}></i>
          </div>
          <div>
            <p className="text-sm font-bold text-gray-800">Launch Cycle</p>
            <p className="text-xs text-gray-500">{cycle.name}</p>
          </div>
        </div>
        <div className="bg-amber-50 border border-amber-200 rounded-xl p-3 mb-5 text-xs text-amber-700 space-y-1">
          <p className="font-semibold">This will:</p>
          <p>• Notify all {cycle.eligibleEmployees} eligible employees</p>
          <p>• Open self-assessment forms for all staff</p>
          <p>• Set deadline reminders for HODs and HR</p>
          <p>• Change cycle status to Active</p>
        </div>
        <div className="flex gap-3">
          <button onClick={onClose} className="flex-1 py-2.5 rounded-xl border border-gray-200 text-sm text-gray-600 hover:bg-gray-50 cursor-pointer whitespace-nowrap">Cancel</button>
          <button onClick={onLaunch} className="flex-1 py-2.5 rounded-xl text-white text-sm font-semibold cursor-pointer whitespace-nowrap" style={{ background: '#b828a0' }}>
            Launch Now
          </button>
        </div>
      </div>
    </div>
  );
}

export default function CyclesTab() {
  const [cycles, setCycles] = useState<AppraisalCycle[]>(INITIAL_CYCLES);
  const [showNew, setShowNew] = useState(false);
  const [viewingProgress, setViewingProgress] = useState<AppraisalCycle | null>(null);
  const [editingCycle, setEditingCycle] = useState<AppraisalCycle | null>(null);
  const [launchingCycle, setLaunchingCycle] = useState<AppraisalCycle | null>(null);
  const [toast, setToast] = useState('');
  const [form, setForm] = useState({ name: '', type: 'Quarterly', goalSettingStart: '', selfDeadline: '', managerDeadline: '', calibrationDate: '', endDate: '' });

  const showToast = (msg: string) => { setToast(msg); setTimeout(() => setToast(''), 3000); };

  const handleLaunch = (cycle: AppraisalCycle) => {
    setCycles(prev => prev.map(c => c.id === cycle.id ? { ...c, status: 'Active' } : c));
    setLaunchingCycle(null);
    showToast(`"${cycle.name}" has been launched successfully. All employees have been notified.`);
  };

  const handleSaveEdit = (updated: AppraisalCycle) => {
    setCycles(prev => prev.map(c => c.id === updated.id ? updated : c));
    showToast('Cycle updated successfully');
  };

  const handleCreateCycle = () => {
    const newCycle: AppraisalCycle = {
      id: `CYC-${Date.now()}`,
      name: form.name || 'New Cycle',
      type: form.type as any,
      status: 'Draft',
      goalSettingStart: form.goalSettingStart,
      selfAssessmentDeadline: form.selfDeadline,
      managerReviewDeadline: form.managerDeadline,
      calibrationDate: form.calibrationDate,
      endDate: form.endDate,
      eligibleEmployees: 47,
      completionRate: 0,
      departments: ['All'],
    };
    setCycles(prev => [newCycle, ...prev]);
    setShowNew(false);
    showToast(`"${newCycle.name}" created as Draft`);
  };

  return (
    <div>
      {toast && (
        <div className="fixed top-20 right-6 z-[100] bg-green-600 text-white px-5 py-3 rounded-xl shadow-lg text-sm font-medium flex items-center gap-2">
          <div className="w-5 h-5 flex items-center justify-center"><i className="ri-checkbox-circle-line text-lg"></i></div>
          {toast}
        </div>
      )}

      {viewingProgress && <ProgressModal cycle={viewingProgress} onClose={() => setViewingProgress(null)} />}
      {editingCycle && <EditCycleModal cycle={editingCycle} onClose={() => setEditingCycle(null)} onSave={handleSaveEdit} />}
      {launchingCycle && <LaunchConfirmModal cycle={launchingCycle} onClose={() => setLaunchingCycle(null)} onLaunch={() => handleLaunch(launchingCycle)} />}

      <div className="flex items-center justify-between mb-5">
        <div>
          <h3 className="font-semibold text-gray-800">Appraisal Cycles</h3>
          <p className="text-xs text-gray-500 mt-0.5">Configure and manage performance review cycles</p>
        </div>
        <button onClick={() => setShowNew(true)} className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white whitespace-nowrap cursor-pointer" style={{ background: '#b828a0' }}>
          <div className="w-4 h-4 flex items-center justify-center"><i className="ri-add-line"></i></div>
          New Cycle
        </button>
      </div>

      {showNew && (
        <div className="bg-white border border-gray-100 rounded-2xl p-5 shadow-sm mb-5">
          <div className="flex items-center justify-between mb-3">
            <h3 className="font-semibold text-gray-800">Create New Appraisal Cycle</h3>
            <button onClick={() => setShowNew(false)} className="w-7 h-7 flex items-center justify-center rounded-lg hover:bg-gray-100 cursor-pointer"><i className="ri-close-line text-gray-500"></i></button>
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-medium text-gray-600 mb-1">Cycle Name</label>
              <input value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-300" placeholder="e.g. Q3 2026 Appraisal" />
            </div>
            <div>
              <label className="block text-xs font-medium text-gray-600 mb-1">Cycle Type</label>
              <select value={form.type} onChange={e => setForm(f => ({ ...f, type: e.target.value }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none pr-8 cursor-pointer">
                <option>Quarterly</option><option>Half-yearly</option><option>Annual</option>
              </select>
            </div>
            <div>
              <label className="block text-xs font-medium text-gray-600 mb-1">Goal Setting Start</label>
              <input type="date" value={form.goalSettingStart} onChange={e => setForm(f => ({ ...f, goalSettingStart: e.target.value }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none" />
            </div>
            <div>
              <label className="block text-xs font-medium text-gray-600 mb-1">Self-Assessment Deadline</label>
              <input type="date" value={form.selfDeadline} onChange={e => setForm(f => ({ ...f, selfDeadline: e.target.value }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none" />
            </div>
            <div>
              <label className="block text-xs font-medium text-gray-600 mb-1">Manager Review Deadline</label>
              <input type="date" value={form.managerDeadline} onChange={e => setForm(f => ({ ...f, managerDeadline: e.target.value }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none" />
            </div>
            <div>
              <label className="block text-xs font-medium text-gray-600 mb-1">Calibration Meeting Date</label>
              <input type="date" value={form.calibrationDate} onChange={e => setForm(f => ({ ...f, calibrationDate: e.target.value }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none" />
            </div>
          </div>
          <div className="flex gap-2 mt-4">
            <button onClick={() => setShowNew(false)} className="px-4 py-2 rounded-lg border border-gray-200 text-sm text-gray-600 hover:bg-gray-50 cursor-pointer whitespace-nowrap">Cancel</button>
            <button onClick={handleCreateCycle} className="px-4 py-2 rounded-lg text-sm font-medium text-white cursor-pointer whitespace-nowrap" style={{ background: '#b828a0' }}>Create Cycle</button>
          </div>
        </div>
      )}

      <div className="space-y-4">
        {cycles.map(cycle => (
          <div key={cycle.id} className="bg-white border border-gray-100 rounded-2xl p-5 shadow-sm">
            <div className="flex items-start justify-between mb-4">
              <div>
                <div className="flex items-center gap-2 mb-1">
                  <h3 className="font-semibold text-gray-800">{cycle.name}</h3>
                  <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${typeColors[cycle.type]}`}>{cycle.type}</span>
                  <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${statusColors[cycle.status]}`}>{cycle.status}</span>
                </div>
                <div className="text-xs text-gray-500">ID: {cycle.id} · Departments: {cycle.departments.join(', ')}</div>
              </div>
              <div className="text-right">
                <div className="text-2xl font-bold" style={{ color: '#b828a0' }}>{cycle.completionRate}%</div>
                <div className="text-xs text-gray-400">Completion</div>
              </div>
            </div>

            <div className="grid grid-cols-5 gap-3 mb-4">
              {[
                { label: 'Goal Setting', date: cycle.goalSettingStart, icon: 'ri-flag-line' },
                { label: 'Self-Assessment', date: cycle.selfAssessmentDeadline, icon: 'ri-user-line' },
                { label: 'Manager Review', date: cycle.managerReviewDeadline, icon: 'ri-user-star-line' },
                { label: 'Calibration', date: cycle.calibrationDate, icon: 'ri-scales-3-line' },
                { label: 'Cycle End', date: cycle.endDate, icon: 'ri-checkbox-circle-line' },
              ].map((item) => {
                const isPast = new Date(item.date) < new Date();
                return (
                  <div key={item.label} className={`rounded-xl p-3 text-center ${isPast && cycle.status !== 'Upcoming' ? 'bg-green-50 border border-green-100' : 'bg-gray-50'}`}>
                    <div className={`w-7 h-7 rounded-full flex items-center justify-center mx-auto mb-1 ${isPast && cycle.status !== 'Upcoming' ? 'bg-green-100' : 'bg-gray-100'}`}>
                      <i className={`${item.icon} text-xs ${isPast && cycle.status !== 'Upcoming' ? 'text-green-600' : 'text-gray-400'}`}></i>
                    </div>
                    <div className="text-xs font-medium text-gray-700">{item.label}</div>
                    <div className="text-xs text-gray-400 mt-0.5">{item.date}</div>
                  </div>
                );
              })}
            </div>

            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4 text-xs text-gray-500">
                <span><strong>{cycle.eligibleEmployees}</strong> eligible employees</span>
                {cycle.status === 'Active' && <span className="text-green-600 font-medium">Currently running</span>}
                {cycle.status === 'Completed' && <span className="text-gray-500 font-medium">Cycle closed</span>}
              </div>
              <div className="flex gap-2">
                {(cycle.status === 'Active' || cycle.status === 'Completed') && (
                  <button onClick={() => setViewingProgress(cycle)}
                    className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium text-white cursor-pointer whitespace-nowrap hover:opacity-90"
                    style={{ background: '#b828a0' }}>
                    <div className="w-4 h-4 flex items-center justify-center"><i className="ri-eye-line text-sm"></i></div>
                    View Progress
                  </button>
                )}
                {cycle.status === 'Upcoming' && (
                  <button onClick={() => setLaunchingCycle(cycle)}
                    className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium text-white cursor-pointer whitespace-nowrap hover:opacity-90"
                    style={{ background: '#b828a0' }}>
                    <div className="w-4 h-4 flex items-center justify-center"><i className="ri-play-circle-line text-sm"></i></div>
                    Launch
                  </button>
                )}
                {cycle.status === 'Draft' && (
                  <button onClick={() => setLaunchingCycle(cycle)}
                    className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium text-white cursor-pointer whitespace-nowrap hover:opacity-90"
                    style={{ background: '#059669' }}>
                    <div className="w-4 h-4 flex items-center justify-center"><i className="ri-rocket-line text-sm"></i></div>
                    Launch
                  </button>
                )}
                <button onClick={() => setEditingCycle(cycle)}
                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-200 text-sm text-gray-600 hover:bg-gray-50 cursor-pointer whitespace-nowrap">
                  <div className="w-4 h-4 flex items-center justify-center"><i className="ri-edit-line text-sm"></i></div>
                  Edit
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}