import React, { useCallback, useEffect, useMemo, useState } from 'react';
import {
  ATTENDANCE_STATUS_OPTIONS,
  apiFetchAttendance,
  apiFetchAttendanceShifts,
  apiPushAttendanceQLDT,
  apiUpdateAttendanceStatus,
  attendanceStatusClass,
  type AttendanceRow,
  type AttendanceShiftInfo,
} from '../api';

interface AttendancePanelProps {
  classId: number;
}

function formatQldtTime(iso?: string): string {
  if (!iso) return '';
  return new Date(iso).toLocaleString('vi-VN', {
    day: '2-digit',
    month: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  });
}

export const AttendancePanel: React.FC<AttendancePanelProps> = ({ classId }) => {
  const today = new Date().toISOString().slice(0, 10);
  const [date, setDate] = useState(today);
  const [period, setPeriod] = useState(1);
  const [rows, setRows] = useState<AttendanceRow[]>([]);
  const [shifts, setShifts] = useState<any[]>([]);
  const [shiftInfo, setShiftInfo] = useState<AttendanceShiftInfo | null>(null);
  const [loading, setLoading] = useState(false);
  const [pushing, setPushing] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');

  const loadShifts = useCallback(async () => {
    try {
      const res = await apiFetchAttendanceShifts(classId, date);
      setShifts(res.data || []);
      if (res.data?.length && !res.data.find((s: any) => s.period === period)) {
        setPeriod(res.data[0].period || 1);
      }
    } catch {
      setShifts([]);
    }
  }, [classId, date, period]);

  const loadAttendance = useCallback(async () => {
    try {
      setLoading(true);
      const res = await apiFetchAttendance(classId, date, period);
      setRows(res.data || []);
      setShiftInfo(res.shift || null);
    } catch (e: any) {
      alert(e.message || 'Không tải được điểm danh');
    } finally {
      setLoading(false);
    }
  }, [classId, date, period]);

  useEffect(() => { loadShifts(); }, [loadShifts]);
  useEffect(() => { loadAttendance(); }, [loadAttendance]);

  const filteredRows = useMemo(() => {
    const q = searchQuery.trim().toLowerCase();
    if (!q) return rows;
    return rows.filter(row => {
      const haystack = [row.fullName, row.studentCode, row.email, row.statusLabel]
        .filter(Boolean)
        .join(' ')
        .toLowerCase();
      return haystack.includes(q);
    });
  }, [rows, searchQuery]);

  const statusCounts = useMemo(() => {
    const counts: Record<number, number> = { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0 };
    for (const row of rows) {
      if (counts[row.status] !== undefined) counts[row.status]++;
    }
    return counts;
  }, [rows]);

  const handleStatusChange = async (studentRkId: number, status: number) => {
    try {
      await apiUpdateAttendanceStatus(classId, { date, period, studentRkId, status });
      await loadAttendance();
    } catch (e: any) {
      alert(e.message || 'Cập nhật trạng thái thất bại');
    }
  };

  const handlePushQLDT = async () => {
    if (!shiftInfo?.courseId) {
      alert('Ca học này chưa chọn môn học. Vui lòng cấu hình trong lịch học.');
      return;
    }
    if (!confirm(`Đẩy điểm danh Ca ${period} ngày ${date} lên QLĐT?`)) return;
    try {
      setPushing(true);
      const res = await apiPushAttendanceQLDT(classId, date, period);
      alert(res.message || 'Đã đẩy lên QLĐT');
      await loadAttendance();
    } catch (e: any) {
      alert(e.message || 'Đẩy QLĐT thất bại');
    } finally {
      setPushing(false);
    }
  };

  const currentShift = shifts.find(s => s.period === period);
  const qldtSynced = Boolean(shiftInfo?.pushedToQldtAt);
  const qldtDirty = Boolean(shiftInfo?.qldtDirty);

  return (
    <div className="attendance-panel">
      <div className="attendance-toolbar">
        <label className="attendance-field">
          <span>Ngày</span>
          <input
            type="date"
            className="search-input"
            style={{ padding: '0.5rem 0.75rem' }}
            value={date}
            onChange={e => setDate(e.target.value)}
          />
        </label>
        <label className="attendance-field">
          <span>Ca học</span>
          <select className="select-filter" value={period} onChange={e => setPeriod(Number(e.target.value))}>
            {(shifts.length ? shifts : [{ period: 1 }, { period: 2 }, { period: 3 }, { period: 4 }]).map((s: any) => (
              <option key={s.period} value={s.period}>
                Ca {s.period}{s.startTime ? ` (${s.startTime}–${s.endTime})` : ''}
              </option>
            ))}
          </select>
        </label>
        <label className="attendance-field attendance-field--grow">
          <span>Tìm sinh viên</span>
          <input
            type="search"
            className="app-pool-search attendance-search"
            placeholder="Mã SV, tên, email..."
            value={searchQuery}
            onChange={e => setSearchQuery(e.target.value)}
          />
        </label>
        <button type="button" className="btn btn-secondary" onClick={loadAttendance} disabled={loading}>
          Tải lại
        </button>
        <button type="button" className="btn btn-primary" onClick={handlePushQLDT} disabled={pushing || rows.length === 0}>
          {pushing ? 'Đang đẩy...' : 'Đẩy QLĐT'}
        </button>
      </div>

      <div
        className={`attendance-qldt-banner${
          qldtSynced ? (qldtDirty ? ' attendance-qldt-banner--stale' : ' attendance-qldt-banner--synced') : ''
        }`}
      >
        {qldtSynced ? (
          qldtDirty ? (
            <>
              <strong>Đã lưu QLĐT — có thay đổi mới</strong>
              <span>
                Lần đẩy: {formatQldtTime(shiftInfo?.pushedToQldtAt)} · Cần đẩy lại sau khi chỉnh sửa
              </span>
            </>
          ) : (
            <>
              <strong>Đã lưu QLĐT</strong>
              <span>Lần đẩy gần nhất: {formatQldtTime(shiftInfo?.pushedToQldtAt)}</span>
            </>
          )
        ) : (
          <>
            <strong>Chưa đẩy lên QLĐT</strong>
            <span>Ca {period} ngày {date} — bấm &quot;Đẩy QLĐT&quot; sau khi kiểm tra trạng thái</span>
          </>
        )}
      </div>

      {currentShift && (
        <div className="attendance-shift-info">
          <span>{currentShift.startTime}–{currentShift.endTime}</span>
          <span>{currentShift.courseName || 'Chưa chọn môn'}</span>
          {!currentShift.isActive && <span className="badge badge-muted">Ca tắt</span>}
        </div>
      )}

      <div className="attendance-status-summary">
        {ATTENDANCE_STATUS_OPTIONS.map(opt => (
          <button
            key={opt.value}
            type="button"
            className={`attendance-summary-chip ${attendanceStatusClass(opt.value)}`}
            onClick={() => setSearchQuery('')}
            title={`${opt.label}: ${statusCounts[opt.value] ?? 0} sinh viên`}
          >
            <span className="attendance-summary-chip-label">{opt.short}</span>
            <span className="attendance-summary-chip-count">{statusCounts[opt.value] ?? 0}</span>
          </button>
        ))}
        <span className="attendance-summary-total">
          {filteredRows.length}/{rows.length} SV
          {searchQuery.trim() ? ' (đã lọc)' : ''}
        </span>
      </div>

      <p className="schedule-hint" style={{ margin: 0 }}>
        Sửa trạng thái thủ công sẽ được khóa — hệ thống tự tính sẽ không ghi đè.
      </p>

      <div className="attendance-table-scroll table-wrapper">
        {loading ? (
          <div className="empty-state"><div className="sync-spinner" style={{ width: 28, height: 28 }} /></div>
        ) : (
          <table className="data-table attendance-table">
            <thead>
              <tr>
                <th>Sinh viên</th>
                <th>Online</th>
                <th>Trạng thái</th>
                <th>QLĐT / Ghi chú</th>
              </tr>
            </thead>
            <tbody>
              {filteredRows.length === 0 ? (
                <tr>
                  <td colSpan={4} style={{ textAlign: 'center', color: 'var(--text-muted)' }}>
                    {rows.length === 0 ? 'Chưa có dữ liệu điểm danh' : 'Không tìm thấy sinh viên phù hợp'}
                  </td>
                </tr>
              ) : (
                filteredRows.map(row => (
                  <tr key={row.studentRkId} className={attendanceStatusClass(row.status)}>
                    <td>
                      <div className="attendance-student-name">{row.fullName}</div>
                      <div className="attendance-student-meta">
                        <code>{row.studentCode}</code>
                        {row.email && <span>{row.email}</span>}
                      </div>
                    </td>
                    <td>
                      <span className="attendance-online-mins">{row.onlineMinutes}</span>
                      <span className="attendance-online-unit">phút</span>
                    </td>
                    <td>
                      <select
                        className={`attendance-status-select ${attendanceStatusClass(row.status)}`}
                        value={row.status}
                        onChange={e => handleStatusChange(row.studentRkId, Number(e.target.value))}
                      >
                        {ATTENDANCE_STATUS_OPTIONS.map(opt => (
                          <option key={opt.value} value={opt.value}>{opt.label}</option>
                        ))}
                      </select>
                    </td>
                    <td>
                      <div className="attendance-notes">
                        {row.pushedToQldtAt ? (
                          <span className="attendance-qldt-tag attendance-qldt-tag--ok" title={row.pushedToQldtAt}>
                            QLĐT ✓
                          </span>
                        ) : (
                          <span className="attendance-qldt-tag attendance-qldt-tag--pending">Chưa QLĐT</span>
                        )}
                        {row.statusEditedByTeacher && (
                          <span className="attendance-lock-tag" title="Giáo viên đã sửa — không bị ghi đè">
                            Đã khóa
                          </span>
                        )}
                      </div>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
};
