`frontend/src/components/MeetingControls.tsx`

75 lines
import type { Meeting } from '../types';

const MEETING_TYPES = [
  { type: 'strategic', label: 'Strategic', color: '#8b5cf6', icon: '\uD83C\uDFAF' },
  { type: 'initiative', label: 'Initiative', color: '#3b82f6', icon: '\uD83D\uDE80' },
  { type: 'ops', label: 'Operations', color: '#22c55e', icon: '\u2699\uFE0F' },
  { type: 'emergency', label: 'Emergency', color: '#ef4444', icon: '\uD83D\uDEA8' },
];

interface Props {
  activeMeeting: Meeting | null;
  onStart: (type: string) => void;
  onHalt: () => void;
  onAdvance: () => void;
}

export default function MeetingControls({ activeMeeting, onStart, onHalt, onAdvance }: Props) {
  const isActive = activeMeeting && activeMeeting.status === 'in_progress';

  return (
    <div style={styles.card}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <h3 style={{ margin: 0, fontSize: 14, fontWeight: 700 }}>Meeting Controls</h3>
        {isActive && (
          <div style={{ display: 'flex', gap: 6 }}>
            <button style={styles.advanceBtn} onClick={onAdvance}>Advance Phase</button>
            <button style={styles.haltBtn} onClick={onHalt}>Halt</button>
          </div>
        )}
      </div>

      {!isActive && (
        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
          {MEETING_TYPES.map(mt => (
            <button
              key={mt.type}
              style={{ ...styles.startBtn, borderColor: mt.color + '66', color: mt.color }}
              onClick={() => onStart(mt.type)}
            >
              <span>{mt.icon}</span>
              <span>{mt.label}</span>
            </button>
          ))}
        </div>
      )}

      {isActive && (
        <div style={{ marginTop: 8, fontSize: 11, color: '#7a7f96' }}>
          {activeMeeting.meeting_type} meeting in progress — Phase: {activeMeeting.phase.replace(/_/g, ' ')}
        </div>
      )}
    </div>
  );
}

const styles: Record<string, React.CSSProperties> = {
  card: { background: '#1a1a2e', borderRadius: 12, padding: 16, border: '1px solid #252540' },
  startBtn: {
    flex: 1, padding: '10px 12px', borderRadius: 8, border: '1px solid',
    background: 'transparent', fontWeight: 600, fontSize: 12,
    cursor: 'pointer', fontFamily: 'inherit', display: 'flex', alignItems: 'center',
    justifyContent: 'center', gap: 6, transition: 'all 0.2s',
  },
  advanceBtn: {
    padding: '6px 14px', borderRadius: 6, border: 'none',
    background: '#8b5cf6', color: '#fff', fontWeight: 600, fontSize: 11,
    cursor: 'pointer', fontFamily: 'inherit',
  },
  haltBtn: {
    padding: '6px 14px', borderRadius: 6, border: 'none',
    background: '#ef4444', color: '#fff', fontWeight: 600, fontSize: 11,
    cursor: 'pointer', fontFamily: 'inherit',
  },
};