import React, { useState } from 'react';
import type { StudentItem, StudentSessionLogItem } from '../api';
import { StudentAvatar, StudentOnlineBadge } from './StudentAvatar';
import { ProctorStreamPanels } from './ProctorStreamPanels';

interface StudentDetailModalProps {
  student: StudentItem;
  isOnline: boolean;
  sessionLog?: StudentSessionLogItem | null;
  onClose: () => void;
}

const formatDuration = (totalSeconds: number) => {
  const hrs = Math.floor(totalSeconds / 3600);
  const mins = Math.floor((totalSeconds % 3600) / 60);
  const secs = totalSeconds % 60;
  const pad = (n: number) => String(n).padStart(2, '0');
  return `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;
};

export const StudentDetailModal: React.FC<StudentDetailModalProps> = ({
  student,
  isOnline,
  sessionLog,
  onClose,
}) => {
  const [showProctor, setShowProctor] = useState(false);

  return (
    <div className="modal-overlay student-detail-overlay" onClick={onClose}>
      <div className={`modal-container student-detail-modal ${showProctor ? 'student-detail-modal--proctor' : ''}`} onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <div className="student-detail-header">
            <StudentAvatar fullName={student.fullName} avatar={student.avatar} isOnline={isOnline} size={56} />
            <div>
              <h2 className="modal-title" style={{ margin: 0 }}>{student.fullName}</h2>
              <p style={{ margin: '4px 0 0', color: 'var(--text-muted)', fontSize: '0.85rem' }}>
                <span style={{ fontFamily: 'monospace', fontWeight: 700, color: 'var(--accent)' }}>{student.studentCode}</span>
                {student.email && <> · {student.email}</>}
              </p>
            </div>
          </div>
          <button type="button" className="btn btn-secondary" onClick={onClose}>Đóng</button>
        </div>

        <div className="student-detail-body">
          <div className="student-detail-info">
            <div className="student-detail-meta">
              <div className="student-meta-item">
                <span className="student-meta-label">Trạng thái</span>
                <span className="student-meta-value">
                  <StudentOnlineBadge isOnline={isOnline} size="md" />
                </span>
              </div>
              {student.phone && (
                <div className="student-meta-item">
                  <span className="student-meta-label">Điện thoại</span>
                  <span className="student-meta-value">{student.phone}</span>
                </div>
              )}
              {sessionLog && (
                <>
                  <div className="student-meta-item">
                    <span className="student-meta-label">Online (ca)</span>
                    <span className="student-meta-value" style={{ color: 'var(--success)', fontFamily: 'monospace' }}>
                      {formatDuration(sessionLog.onlineSeconds)}
                    </span>
                  </div>
                  <div className="student-meta-item">
                    <span className="student-meta-label">Offline (ca)</span>
                    <span className="student-meta-value" style={{ color: 'var(--danger)', fontFamily: 'monospace' }}>
                      {formatDuration(sessionLog.offlineSeconds)}
                    </span>
                  </div>
                  {sessionLog.wifiSsids && sessionLog.wifiSsids !== '—' && (
                    <div className="student-meta-item">
                      <span className="student-meta-label">WiFi</span>
                      <span className="student-meta-value" style={{ fontFamily: 'monospace', fontSize: '0.8rem' }}>
                        {sessionLog.wifiSsids}
                      </span>
                    </div>
                  )}
                </>
              )}
            </div>

            <button
              type="button"
              className="btn btn-primary"
              style={{ width: '100%', justifyContent: 'center' }}
              onClick={() => setShowProctor(v => !v)}
            >
              {showProctor ? 'Ẩn giám sát' : 'Xem webcam & màn hình'}
            </button>
            {!isOnline && !showProctor && (
              <p className="schedule-hint" style={{ margin: 0 }}>
                Sinh viên offline — stream chỉ có khi app Simple Care đang chạy.
              </p>
            )}
          </div>

          {showProctor && (
            <div className="student-detail-proctor">
              <ProctorStreamPanels studentId={student.rkId} />
            </div>
          )}
        </div>
      </div>
    </div>
  );
};