import React, { useEffect, useState } from 'react';
import {
  apiApplyScheduleTemplate,
  apiFetchClassCourses,
  apiSaveClassSchedule,
  type ClassCourseItem,
  type ClassScheduleItem,
} from '../api';

const DAYS = ['Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7', 'Chủ Nhật'];
const PERIODS = [1, 2, 3, 4];

interface ScheduleEditorProps {
  classId: number;
  schedules: ClassScheduleItem[];
  onSaved: () => void;
}

const emptyShift = (day: number, period: number): ClassScheduleItem => ({
  dayOfWeek: day,
  period,
  startTime: '',
  endTime: '',
  courseId: 0,
  courseName: '',
  isActive: false,
});

export const ScheduleEditor: React.FC<ScheduleEditorProps> = ({ classId, schedules, onSaved }) => {
  const [local, setLocal] = useState<ClassScheduleItem[]>([]);
  const [courses, setCourses] = useState<ClassCourseItem[]>([]);
  const [coursesWarning, setCoursesWarning] = useState('');
  const [coursesError, setCoursesError] = useState('');
  const [saving, setSaving] = useState(false);
  const [applying, setApplying] = useState(false);
  const [expandedDay, setExpandedDay] = useState<number>(0);

  useEffect(() => {
    const mapped = schedules.map(s => ({ ...s, period: s.period || 1, isActive: s.isActive ?? true }));
    const deduped = new Map<string, ClassScheduleItem>();
    for (const s of mapped) {
      deduped.set(`${s.dayOfWeek}-${s.period}`, s);
    }
    setLocal(Array.from(deduped.values()));
  }, [schedules]);

  const loadCourses = async () => {
    try {
      setCoursesError('');
      setCoursesWarning('');
      const res = await apiFetchClassCourses(classId);
      setCourses(res.data || []);
      if (res.warning) {
        setCoursesWarning(res.warning);
      } else if (res.cached) {
        setCoursesWarning('Đang dùng danh sách môn đã lưu. Cập nhật QLDT_TOKEN và sync lớp để làm mới.');
      }
      if (!res.data?.length) {
        setCoursesError('Chưa có môn học. Chạy Sync lớp học hoặc cập nhật QLDT_TOKEN trong server/.env');
      }
    } catch (e: any) {
      setCourses([]);
      setCoursesError(e.message || 'Không tải được môn học');
    }
  };

  useEffect(() => {
    loadCourses();
  }, [classId]);

  const shiftsForDay = (day: number) =>
    local.filter(s => s.dayOfWeek === day).sort((a, b) => a.period - b.period);

  const updateShift = (day: number, period: number, patch: Partial<ClassScheduleItem>) => {
    setLocal(prev => {
      const idx = prev.findIndex(s => s.dayOfWeek === day && s.period === period);
      if (idx >= 0) {
        const next = [...prev];
        next[idx] = { ...next[idx], ...patch };
        return next;
      }
      return [...prev, { ...emptyShift(day, period), ...patch }];
    });
  };

  const addShift = (day: number) => {
    const existing = shiftsForDay(day).map(s => s.period);
    const nextPeriod = PERIODS.find(p => !existing.includes(p));
    if (!nextPeriod) {
      alert('Mỗi ngày tối đa 4 ca học.');
      return;
    }
    setLocal(prev => [...prev, emptyShift(day, nextPeriod)]);
  };

  const removeShift = (day: number, period: number) => {
    setLocal(prev => prev.filter(s => !(s.dayOfWeek === day && s.period === period)));
  };

  const handleApplyTemplate = async () => {
    if (!confirm('Áp dụng template 4 ca/ngày (Thứ 2–6)? Các ca trùng sẽ được bỏ qua.')) return;
    try {
      setApplying(true);
      const res = await apiApplyScheduleTemplate(classId);
      alert(`Đã thêm ${res.created} ca${res.skipped ? `, bỏ qua ${res.skipped} ca trùng` : ''}.`);
      onSaved();
    } catch (e: any) {
      alert(e.message || 'Áp dụng template thất bại');
    } finally {
      setApplying(false);
    }
  };

  const handleSave = async () => {
    const payload = local.filter(s => s.startTime?.trim() && s.endTime?.trim());
    try {
      setSaving(true);
      await apiSaveClassSchedule(classId, payload);
      alert('Đã lưu lịch học!');
      onSaved();
    } catch (e: any) {
      alert(e.message || 'Lưu lịch học thất bại');
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="schedule-editor">
      <div className="schedule-editor-toolbar">
        <button type="button" className="btn btn-secondary" onClick={handleApplyTemplate} disabled={applying}>
          {applying ? 'Đang áp dụng...' : 'Template 4 ca (T2–T6)'}
        </button>
      </div>

      {coursesWarning && (
        <p className="schedule-hint schedule-hint-warn">{coursesWarning}</p>
      )}
      {coursesError && (
        <p className="schedule-hint schedule-hint-error">{coursesError}</p>
      )}

      <div className="schedule-day-tabs">
        {DAYS.map((name, day) => (
          <button
            key={day}
            type="button"
            className={`schedule-day-tab ${expandedDay === day ? 'active' : ''}`}
            onClick={() => setExpandedDay(day)}
          >
            {name}
            {shiftsForDay(day).length > 0 && (
              <span className="schedule-day-count">{shiftsForDay(day).filter(s => s.isActive).length}</span>
            )}
          </button>
        ))}
      </div>

      <div className="schedule-day-panel">
        <div className="schedule-day-header">
          <strong>{DAYS[expandedDay]}</strong>
          <button type="button" className="btn btn-secondary" style={{ padding: '0.35rem 0.65rem', fontSize: '0.78rem' }} onClick={() => addShift(expandedDay)}>
            + Thêm ca
          </button>
        </div>

        {shiftsForDay(expandedDay).length === 0 ? (
          <p className="schedule-hint">Chưa có ca học. Bấm "Thêm ca" hoặc dùng template.</p>
        ) : (
          shiftsForDay(expandedDay).map(shift => (
            <div key={`${expandedDay}-${shift.period}`} className={`schedule-shift-card ${shift.isActive ? '' : 'inactive'}`}>
              <div className="schedule-shift-head">
                <label className="schedule-field schedule-field-ca">
                  <span>Ca học</span>
                  <select
                    className="schedule-input"
                    value={shift.period}
                    onChange={e => {
                      const newPeriod = Number(e.target.value);
                      if (newPeriod !== shift.period && shiftsForDay(expandedDay).some(s => s.period === newPeriod)) {
                        alert(`Ca ${newPeriod} đã tồn tại trong ngày này.`);
                        return;
                      }
                      setLocal(prev => prev.map(s =>
                        s.dayOfWeek === expandedDay && s.period === shift.period
                          ? { ...s, period: newPeriod }
                          : s
                      ));
                    }}
                  >
                    {PERIODS.map(p => (
                      <option key={p} value={p}>Ca {p}</option>
                    ))}
                  </select>
                </label>
                <label className="schedule-active-toggle">
                  <input type="checkbox" checked={shift.isActive} onChange={e => updateShift(expandedDay, shift.period, { isActive: e.target.checked })} />
                  <span>Bật</span>
                </label>
                <button type="button" className="btn btn-secondary schedule-remove-btn" onClick={() => removeShift(expandedDay, shift.period)} title="Xóa ca">×</button>
              </div>

              <div className="schedule-time-row">
                <label className="schedule-field">
                  <span>Bắt đầu</span>
                  <input className="schedule-input time-input" placeholder="08:00" value={shift.startTime} onChange={e => updateShift(expandedDay, shift.period, { startTime: e.target.value })} />
                </label>
                <label className="schedule-field">
                  <span>Kết thúc</span>
                  <input className="schedule-input time-input" placeholder="12:00" value={shift.endTime} onChange={e => updateShift(expandedDay, shift.period, { endTime: e.target.value })} />
                </label>
              </div>

              <label className="schedule-field">
                <span>Môn học (QLĐT)</span>
                <select
                  className="schedule-input"
                  value={shift.courseId || ''}
                  onChange={e => {
                    const cid = Number(e.target.value);
                    const course = courses.find(c => c.id === cid);
                    updateShift(expandedDay, shift.period, {
                      courseId: cid,
                      courseName: course?.name || '',
                    });
                  }}
                >
                  <option value="">— Chọn môn —</option>
                  {courses.map(c => (
                    <option key={c.id} value={c.id}>{c.name}{c.courseCode ? ` (${c.courseCode})` : ''}</option>
                  ))}
                </select>
              </label>
            </div>
          ))
        )}
      </div>

      <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }} onClick={handleSave} disabled={saving}>
        {saving ? 'Đang lưu...' : 'Lưu lịch học'}
      </button>
    </div>
  );
};
