import React, { useEffect, useState } from 'react';
import { api } from '../api';
import type { StudentItem, SyncStatus } from '../api';

export const StudentsTab: React.FC = () => {
  const [students, setStudents] = useState<StudentItem[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [pageSize] = useState(15);
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(true);

  // Sync state
  const [syncStatus, setSyncStatus] = useState<SyncStatus | null>(null);

  const fetchStudents = async () => {
    try {
      setLoading(true);
      const res = await api.getStudents({
        page,
        pageSize,
        q: search || undefined,
      });
      setStudents(res.data);
      setTotal(res.total);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  const fetchSyncStatus = async () => {
    try {
      const status = await api.getStudentsSyncStatus();
      setSyncStatus(status);
      return status.running;
    } catch (err) {
      console.error('Lỗi khi lấy status sync:', err);
      return false;
    }
  };

  useEffect(() => {
    fetchStudents();
  }, [page, search]);

  useEffect(() => {
    fetchSyncStatus();
  }, []);

  // Sync polling logic
  useEffect(() => {
    let timer: any;
    if (syncStatus?.running) {
      timer = setInterval(async () => {
        const isRunning = await fetchSyncStatus();
        if (!isRunning) {
          clearInterval(timer);
          fetchStudents(); // Reload data when sync completes
        }
      }, 2000);
    }
    return () => {
      if (timer) clearInterval(timer);
    };
  }, [syncStatus?.running]);

  const handleStartSync = async () => {
    try {
      await api.startStudentsSync();
      // Set local state to running to trigger useEffect poller
      setSyncStatus({
        running: true,
        done: false,
        total: 0,
        synced: 0,
        updatedAt: Date.now() / 1000
      });
    } catch (err: any) {
      alert(err.message || 'Không thể bắt đầu đồng bộ sinh viên');
    }
  };

  // Tính toán % tiến trình sync
  const syncPercent = syncStatus && syncStatus.total > 0
    ? Math.round((syncStatus.synced / syncStatus.total) * 100)
    : 0;

  return (
    <div className="tab-page">
      <div className="tab-page-toolbar">
      <div className="page-header">
        <div className="page-title">
          <h1>Danh Sách Sinh Viên</h1>
          <p>Danh sách toàn bộ sinh viên trong hệ thống được đồng bộ</p>
        </div>
        <button
          className="btn btn-primary"
          onClick={handleStartSync}
          disabled={syncStatus?.running}
        >
          {syncStatus?.running ? (
            <>
              <div className="sync-spinner"></div> Đồng bộ...
            </>
          ) : (
            '🔄 Đồng bộ toàn bộ SV'
          )}
        </button>
      </div>

      {/* Sync Status Banner */}
      {syncStatus && (syncStatus.running || syncStatus.done || syncStatus.error) && (
        <div className="sync-progress-banner" style={{ borderStyle: 'solid', borderColor: 'var(--success)' }}>
          <div className="sync-header">
            <div className="sync-title">
              {syncStatus.running && <div className="sync-spinner"></div>}
              <span>
                {syncStatus.running && `Đang tải sinh viên... Trang ${syncStatus.page || 0} (${syncPercent}%)`}
                {syncStatus.done && '🎉 Đồng bộ toàn bộ sinh viên hoàn tất!'}
                {syncStatus.error && `❌ Đồng bộ thất bại: ${syncStatus.error}`}
              </span>
            </div>
            <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
              Đã tải: {syncStatus.synced} / {syncStatus.total} sinh viên
            </div>
          </div>
          {syncStatus.running && (
            <div className="sync-bar-container">
              <div className="sync-bar" style={{ width: `${syncPercent}%`, background: 'linear-gradient(to right, var(--success), #a7f3d0)' }}></div>
            </div>
          )}
          <div className="sync-meta">
            <span>Cập nhật lần cuối: {new Date(syncStatus.updatedAt * 1000).toLocaleString()}</span>
            {syncStatus.running && <span style={{ color: 'var(--success)' }}>Hệ thống đang kéo dữ liệu trang {syncStatus.page}...</span>}
          </div>
        </div>
      )}

      {/* Control filters */}
      <div className="control-bar">
        <div className="search-input-wrapper" style={{ maxWidth: '400px' }}>
          <input
            type="text"
            className="search-input"
            placeholder="Tìm theo tên, mã SV, email, số điện thoại..."
            value={search}
            onChange={e => {
              setSearch(e.target.value);
              setPage(1);
            }}
          />
          <span className="search-icon">🔍</span>
        </div>
      </div>
      </div>

      {/* Students Table */}
      <div className="tab-page-body">
      <div className="table-wrapper table-fill">
        {loading ? (
          <div className="empty-state">
            <div className="sync-spinner" style={{ width: '32px', height: '32px' }}></div>
            <p style={{ marginTop: '0.5rem' }}>Đang tải danh sách sinh viên...</p>
          </div>
        ) : students.length === 0 ? (
          <div className="empty-state">
            <div className="empty-state-icon">👥</div>
            <h2>Không có sinh viên nào</h2>
            <p>Hãy thử thay đổi bộ lọc hoặc bấm nút "Đồng bộ toàn bộ SV" để tải dữ liệu.</p>
          </div>
        ) : (
          <table className="data-table">
            <thead>
              <tr>
                <th>Mã SV</th>
                <th>Họ Tên</th>
                <th>Thông Tin Liên Hệ</th>
                <th>Ngày sinh / Giới tính</th>
                <th>Phân hệ</th>
                <th>Địa điểm</th>
                <th>Trạng thái</th>
              </tr>
            </thead>
            <tbody>
              {students.map(st => (
                <tr key={st.id}>
                  <td style={{ fontWeight: 600 }}>{st.studentCode}</td>
                  <td style={{ color: 'var(--text-primary)', fontWeight: 500 }}>
                    {st.fullName}
                    <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>ID: {st.rkId}</div>
                  </td>
                  <td>
                    <div>📧 {st.email}</div>
                    {st.phone && <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>📞 {st.phone}</div>}
                  </td>
                  <td>
                    <div>🎂 {st.dateOfBirth ? new Date(st.dateOfBirth).toLocaleDateString('vi-VN') : '—'}</div>
                    <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
                      Giới tính: {st.gender === 1 ? 'Nam' : st.gender === 0 ? 'Nữ' : 'Khác'}
                    </div>
                  </td>
                  <td>
                    <span className="badge badge-muted">
                      {st.systemName || 'Chung'}
                    </span>
                  </td>
                  <td>{st.location || '—'}</td>
                  <td>
                    <span className={`badge ${st.status === 'Đang học' || st.status === 'active' ? 'badge-success' : 'badge-muted'}`}>
                      {st.status || 'Đang học'}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
      </div>

      {/* Pagination controls */}
      {!loading && students.length > 0 && (
        <div className="tab-page-footer">
        <div className="pagination-row">
          <div>
            Hiển thị sinh viên thứ <b>{((page - 1) * pageSize) + 1}</b> đến <b>{Math.min(page * pageSize, total)}</b> trong tổng số <b>{total}</b> sinh viên
          </div>
          <div className="pagination-btn-group">
            <button
              className="pagination-btn"
              onClick={() => setPage(p => Math.max(1, p - 1))}
              disabled={page === 1}
            >
              ◀
            </button>
            <span style={{ display: 'flex', alignItems: 'center', padding: '0 1rem', fontWeight: 600, color: 'var(--text-primary)' }}>
              Trang {page} / {Math.ceil(total / pageSize) || 1}
            </span>
            <button
              className="pagination-btn"
              onClick={() => setPage(p => p + 1)}
              disabled={page >= Math.ceil(total / pageSize)}
            >
              ▶
            </button>
          </div>
        </div>
        </div>
      )}
    </div>
  );
};
