import React, { useState, useEffect } from 'react';
import './tailwind.css';

const subjects = [
{ name: 'Нийгмийн бүтэц', color: 'bg-blue-200' },
{ name: 'Улс төр', color: 'bg-purple-200' },
{ name: 'Хууль', color: 'bg-blue-300' },
{ name: 'Эдийн засаг', color: 'bg-purple-300' },
{ name: 'Соёл', color: 'bg-blue-400' },
];

const motivationalMessages = [
'Өнөөдөр чиний өдөр! 💪',
'Бид чадна! 🌟',
'ЭЭШ-д ойрхон байна! 🚀',
'Сайн хийж байна, үргэлжлүүл! ✨',
'Бэлтгэл чинь үр дүнгээ өгнө! 🔥',
];

function App() {
const [todayTasks, setTodayTasks] = useState(subjects);
const [completed, setCompleted] = useState({});
const [message, setMessage] = useState('');
const [countdown, setCountdown] = useState('');

// 140 өдрийн countdown
useEffect(() => {
const eeshDate = new Date();
eeshDate.setDate(eeshDate.getDate() + 140);
const interval = setInterval(() => {
const now = new Date();
const diff = eeshDate - now;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
setCountdown(${days} өдөр ЭЕШ хүртэл);
}, 1000 * 60 * 60); // цаг тутам
return () => clearInterval(interval);
}, []);

// Урмын үг солигдож гаргах
useEffect(() => {
const msgInterval = setInterval(() => {
const randomMsg = motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)];
setMessage(randomMsg);
}, 1000 * 60 * 60); // цаг тутам
return () => clearInterval(msgInterval);
}, []);

const toggleComplete = (name) => {
setCompleted({ ...completed, [name]: !completed[name] });
};

return (

  <h2 className="text-2xl font-semibold mb-4">Өдрийн хичээлүүд</h2>
  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
    {todayTasks.map((subject) => (
      <div key={subject.name} className={`${subject.color} p-4 rounded-lg shadow-md flex justify-between items-center`}> 
        <span className="font-medium text-lg">{subject.name}</span>
        <input type="checkbox" checked={completed[subject.name] || false} onChange={() => toggleComplete(subject.name)} />
      </div>
    ))}
  </div>

  <h2 className="text-2xl font-semibold mt-8 mb-4">Өдрийн дүн шинжилгээ</h2>
  <ul className="list-disc pl-6">
    {Object.keys(completed).map((key) => (
      <li key={key} className={completed[key] ? 'line-through text-gray-500' : ''}>{key}: {completed[key] ? 'Дууссан' : 'Хийж байна'}</li>
    ))}
  </ul>

  <h2 className="text-2xl font-semibold mt-8 mb-4">Өмнөх ЭЕШ-ийн асуултууд</h2>
  <p className="text-gray-700 mb-2">(Энд та асуулт нэмж, тест үүсгэж болно)</p>
  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
    {[...Array(5)].map((_, idx) => (
      <div key={idx} className="p-4 bg-white rounded shadow">
        <p>Асуулт {idx + 1}</p>
        <input type="text" placeholder="Хариулт бичнэ үү" className="mt-2 border p-1 rounded w-full" />
      </div>
    ))}
  </div>
</div>