/**
 * Check-in Dashboard App - Overview of automatic check-ins
 */

import React, { useState } from 'react';

export function CheckinDashboard({ projectId }: { projectId?: number }) {
  const [questions] = useState([
    { id: 1, title: 'What did you work on today?', schedule: 'Weekdays at 5pm', answers_count: 45, paused: false },
    { id: 2, title: 'What are your goals for this week?', schedule: 'Mondays at 9am', answers_count: 12, paused: false },
    { id: 3, title: 'Any blockers or concerns?', schedule: 'Every other day at 10am', answers_count: 28, paused: true },
  ]);

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
        <h1 style={{ fontSize: '24px', margin: 0 }}>Automatic Check-ins</h1>
        <button style={{ padding: '10px 20px', background: '#1d8cf8', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
          New Check-in
        </button>
      </div>

      <div style={{ display: 'grid', gap: '16px' }}>
        {questions.map(question => (
          <div key={question.id} style={{ 
            border: '1px solid #ddd', 
            borderRadius: '8px', 
            padding: '20px', 
            background: 'white',
            opacity: question.paused ? 0.6 : 1
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: '12px' }}>
              <h3 style={{ fontSize: '18px', margin: 0 }}>{question.title}</h3>
              {question.paused && (
                <span style={{ padding: '4px 12px', background: '#999', color: 'white', borderRadius: '12px', fontSize: '12px' }}>
                  PAUSED
                </span>
              )}
            </div>
            <div style={{ fontSize: '14px', color: '#666', marginBottom: '8px' }}>{question.schedule}</div>
            <div style={{ fontSize: '14px', color: '#1d8cf8', fontWeight: 'bold' }}>
              {question.answers_count} responses
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}