import React, { useState, useEffect, useMemo } from 'react';
import { User, CheckCircle, XCircle, Settings, Users, Calendar, Clock, LogOut, ShieldCheck } from 'lucide-react';

// 초기 더미 데이터 생성 (50명)
const generateInitialStudents = () => {
  const days = ['월', '화', '수', '목'];
  return Array.from({ length: 50 }, (_, i) => ({
    id: i + 1,
    name: `학생${String(i + 1).padStart(2, '0')}`,
    class: Math.floor(i / 10) + 1,
    selectedDays: days.filter(() => Math.random() > 0.3), // 무작위 요일 선택
  }));
};

const App = () => {
  // 상태 관리
  const [userRole, setUserRole] = useState('viewer'); // 'viewer' (선생님), 'admin' (관리자)
  const [students, setStudents] = useState(generateInitialStudents());
  const [attendance, setAttendance] = useState({}); // { '2023-10-23-1-1': status } 형식
  const [currentDay, setCurrentDay] = useState('월');
  const [currentPeriod, setCurrentPeriod] = useState(1); // 1교시 또는 2교시
  const [searchTerm, setSearchTerm] = useState('');

  // 시간 및 날짜 설정
  const periods = [
    { id: 1, time: "18:30 ~ 20:20", label: "1교시" },
    { id: 2, time: "20:30 ~ 21:30", label: "2교시" }
  ];

  // 출석 체크 핸들러
  const toggleAttendance = (studentId) => {
    if (userRole !== 'admin') return; // 관리자만 수정 가능

    const key = `${currentDay}-${currentPeriod}-${studentId}`;
    setAttendance(prev => ({
      ...prev,
      [key]: prev[key] === 'present' ? 'absent' : 'present'
    }));
  };

  // 필터링된 학생 목록
  const filteredStudents = useMemo(() => {
    return students.filter(s => 
      s.selectedDays.includes(currentDay) && 
      s.name.includes(searchTerm)
    );
  }, [students, currentDay, searchTerm]);

  // 통계 계산
  const stats = useMemo(() => {
    const relevant = filteredStudents.length;
    const present = filteredStudents.filter(s => 
      attendance[`${currentDay}-${currentPeriod}-${s.id}`] === 'present'
    ).length;
    return { total: relevant, present, absent: relevant - present };
  }, [filteredStudents, attendance, currentDay, currentPeriod]);

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
      {/* 상단 네비게이션 */}
      <nav className="bg-white border-b sticky top-0 z-10 px-4 py-3 flex justify-between items-center shadow-sm">
        <div className="flex items-center gap-2">
          <div className="bg-indigo-600 p-2 rounded-lg text-white">
            <Users size={20} />
          </div>
          <h1 className="text-xl font-bold tracking-tight">야간 자율학습 관리 시스템</h1>
        </div>
        
        <div className="flex items-center gap-4">
          <div className="flex bg-slate-100 p-1 rounded-md">
            <button 
              onClick={() => setUserRole('viewer')}
              className={`px-3 py-1 text-sm rounded transition-all ${userRole === 'viewer' ? 'bg-white shadow-sm font-semibold' : 'text-slate-500'}`}
            >
              선생님용
            </button>
            <button 
              onClick={() => setUserRole('admin')}
              className={`px-3 py-1 text-sm rounded transition-all ${userRole === 'admin' ? 'bg-white shadow-sm font-semibold text-indigo-600' : 'text-slate-500'}`}
            >
              관리자용
            </button>
          </div>
          {userRole === 'admin' && <ShieldCheck className="text-indigo-600" size={20} />}
        </div>
      </nav>

      <main className="max-w-6xl mx-auto p-4 md:p-6 space-y-6">
        {/* 필터 및 설정 섹션 */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {/* 요일 선택 */}
          <div className="bg-white p-4 rounded-xl shadow-sm border border-slate-200">
            <div className="flex items-center gap-2 mb-3 text-slate-500 font-medium text-sm">
              <Calendar size={16} /> 요일 선택
            </div>
            <div className="grid grid-cols-4 gap-2">
              {['월', '화', '수', '목'].map(day => (
                <button
                  key={day}
                  onClick={() => setCurrentDay(day)}
                  className={`py-2 rounded-lg text-sm font-medium transition-colors ${currentDay === day ? 'bg-indigo-600 text-white' : 'bg-slate-50 hover:bg-slate-100'}`}
                >
                  {day}
                </button>
              ))}
            </div>
          </div>

          {/* 교시 선택 */}
          <div className="bg-white p-4 rounded-xl shadow-sm border border-slate-200">
            <div className="flex items-center gap-2 mb-3 text-slate-500 font-medium text-sm">
              <Clock size={16} /> 교시 선택
            </div>
            <div className="grid grid-cols-2 gap-2">
              {periods.map(p => (
                <button
                  key={p.id}
                  onClick={() => setCurrentPeriod(p.id)}
                  className={`py-2 px-1 rounded-lg text-xs font-medium transition-colors ${currentPeriod === p.id ? 'bg-indigo-600 text-white' : 'bg-slate-50 hover:bg-slate-100'}`}
                >
                  {p.label} <span className="block opacity-80 font-normal">{p.time}</span>
                </button>
              ))}
            </div>
          </div>

          {/* 현황 요약 */}
          <div className="bg-white p-4 rounded-xl shadow-sm border border-slate-200 flex flex-col justify-center">
            <div className="flex justify-between items-center mb-2">
              <span className="text-sm text-slate-500">현재 출석 현황 ({currentDay})</span>
              <span className="text-xs font-bold text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-full">{currentPeriod}교시</span>
            </div>
            <div className="flex justify-between items-end">
              <div>
                <span className="text-3xl font-bold">{stats.present}</span>
                <span className="text-slate-400 text-sm ml-1">/ {stats.total}명</span>
              </div>
              <div className="text-right">
                <p className="text-xs text-rose-500 font-semibold">미출석: {stats.absent}명</p>
                <div className="w-32 h-2 bg-slate-100 rounded-full mt-1 overflow-hidden">
                  <div 
                    className="h-full bg-indigo-600 transition-all duration-500" 
                    style={{ width: `${(stats.present / stats.total) * 100}%` }}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 학생 리스트 섹션 */}
        <div className="bg-white rounded-xl shadow-md border border-slate-200 overflow-hidden">
          <div className="p-4 border-b flex flex-col md:flex-row md:items-center justify-between gap-4">
            <h2 className="text-lg font-bold flex items-center gap-2">
              명단 리스트 
              <span className="text-sm font-normal text-slate-400">({filteredStudents.length}명 대기 중)</span>
            </h2>
            <div className="relative">
              <input 
                type="text" 
                placeholder="학생 이름 검색..."
                className="pl-4 pr-10 py-2 bg-slate-100 border-none rounded-full text-sm w-full md:w-64 focus:ring-2 focus:ring-indigo-500 transition-all"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
              <div className="absolute right-3 top-2.5 text-slate-400">
                <Settings size={16} />
              </div>
            </div>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="bg-slate-50 text-slate-500 text-xs uppercase tracking-wider font-semibold">
                  <th className="px-6 py-3 border-b">ID</th>
                  <th className="px-6 py-3 border-b">학생 이름</th>
                  <th className="px-6 py-3 border-b">학년/반</th>
                  <th className="px-6 py-3 border-b text-center">출석 여부</th>
                  <th className="px-6 py-3 border-b">상태</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {filteredStudents.length > 0 ? (
                  filteredStudents.map(student => {
                    const isPresent = attendance[`${currentDay}-${currentPeriod}-${student.id}`] === 'present';
                    return (
                      <tr key={student.id} className="hover:bg-slate-50 transition-colors">
                        <td className="px-6 py-4 text-sm text-slate-500">{student.id}</td>
                        <td className="px-6 py-4 font-semibold text-slate-800">{student.name}</td>
                        <td className="px-6 py-4 text-sm">{student.class}반</td>
                        <td className="px-6 py-4 text-center">
                          <button
                            disabled={userRole !== 'admin'}
                            onClick={() => toggleAttendance(student.id)}
                            className={`p-2 rounded-full transition-all ${
                              userRole !== 'admin' ? 'opacity-50 cursor-not-allowed' : 'hover:scale-110 active:scale-95'
                            } ${
                              isPresent ? 'text-emerald-500 bg-emerald-50' : 'text-slate-300 bg-slate-50'
                            }`}
                          >
                            <CheckCircle size={28} />
                          </button>
                        </td>
                        <td className="px-6 py-4">
                          {isPresent ? (
                            <span className="px-3 py-1 bg-emerald-100 text-emerald-700 text-xs font-bold rounded-full">출석완료</span>
                          ) : (
                            <span className="px-3 py-1 bg-slate-100 text-slate-500 text-xs font-bold rounded-full">미출석</span>
                          )}
                        </td>
                      </tr>
                    );
                  })
                ) : (
                  <tr>
                    <td colSpan="5" className="px-6 py-12 text-center text-slate-400 italic">
                      해당 요일에 신청한 학생이 없습니다.
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </main>

      <footer className="max-w-6xl mx-auto px-6 py-8 text-center text-slate-400 text-sm">
        <p>© 2024 야간 자율학습 관리 시스템 | 50명 정원 관리 중</p>
        {userRole === 'viewer' && (
          <p className="mt-1">조회 전용 모드입니다. 수정 권한이 필요하면 관리자에게 문의하세요.</p>
        )}
      </footer>
    </div>
  );
};

export default App;