import { useCallback, useEffect, useState } from 'react';
import {
  apiFetchClassViolations,
  apiFetchExamViolations,
  VIOLATION_KIND_OPTIONS,
  type StudentViolationItem,
} from '../api';
import { kindLabel } from '../hooks/useStaffChatSocket';

type Props =
  | { mode: 'class'; classId: number }
  | { mode: 'exam'; examId: number };

function todayLocal(): string {
  const d = new Date();
  const pad = (n: number) => String(n).padStart(2, '0');
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
}

function formatTime(iso?: string): string {
  if (!iso) return '—';
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return iso;
  return d.toLocaleString('vi-VN');
}

export const ViolationsPanel = (props: Props) => {
  const [date, setDate] = useState(todayLocal);
  const [kind, setKind] = useState('');
  const [rows, setRows] = useState<StudentViolationItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState('');

  const load = useCallback(async () => {
    setLoading(true);
    setErr('');
    try {
      const res =
        props.mode === 'class'
          ? await apiFetchClassViolations(props.classId, date, kind)
          : await apiFetchExamViolations(props.examId, date, kind);
      setRows(res.data || []);
    } catch (e: any) {
      setErr(e?.message || 'Không tải được danh sách vi phạm');
      setRows([]);
    } finally {
      setLoading(false);
    }
  }, [props, date, kind]);

  useEffect(() => {
    void load();
  }, [load]);

  return (
    <div className="session-logs-panel" style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', height: '100%' }}>
      {props.mode === 'exam' && (
        <div style={{
          padding: '0.65rem 0.85rem',
          background: '#fef3c7',
          border: '1px solid #fcd34d',
          borderRadius: '6px',
          color: '#92400e',
          fontSize: '0.82rem',
          display: 'flex',
          alignItems: 'center',
          gap: '0.35rem',
          margin: '0',
          lineHeight: '1.4'
        }}>
          ⚠️ <strong>Lưu ý:</strong> Chức năng theo dõi vi phạm đang được theo dõi đánh giá tính chuẩn xác, hiện tại kết quả chạy thử chỉ mang tính chất tham khảo thu thập dữ liệu theo các loại máy.
        </div>
      )}
      <div className="attendance-toolbar" style={{ marginBottom: 0, flexWrap: 'wrap' }}>
        <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>Loại</span>
          <select className="select-filter" value={kind} onChange={(e) => setKind(e.target.value)}>
            {VIOLATION_KIND_OPTIONS.map((o) => (
              <option key={o.value || 'all'} value={o.value}>{o.label}</option>
            ))}
          </select>
        </label>
        <button type="button" className="btn btn-secondary btn-sm" onClick={() => void load()} disabled={loading}>
          {loading ? 'Đang tải...' : 'Làm mới'}
        </button>
        <span style={{ marginLeft: 'auto', fontSize: '0.82rem', color: 'var(--text-muted)', fontWeight: 600 }}>
          {rows.length} vi phạm
        </span>
      </div>

      {err && <div className="form-error" style={{ margin: 0 }}>{err}</div>}

      <div className="attendance-table-scroll table-wrapper" style={{ border: 'none', flex: 1, overflowY: 'auto' }}>
        {loading && rows.length === 0 ? (
          <div className="empty-state" style={{ minHeight: '220px' }}>
            <div className="sync-spinner" style={{ width: '32px', height: '32px' }} />
            <p style={{ marginTop: '0.5rem' }}>Đang tải vi phạm...</p>
          </div>
        ) : rows.length === 0 ? (
          <div className="empty-state" style={{ minHeight: '220px' }}>
            <p>Không có vi phạm trong ngày đã chọn.</p>
          </div>
        ) : (
          <table className="data-table">
            <thead>
              <tr>
                <th>Thời gian</th>
                <th>Sinh viên</th>
                <th>Mã SV</th>
                <th>Loại</th>
                <th>Chi tiết</th>
                <th>Chế độ</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr key={r.id}>
                  <td style={{ whiteSpace: 'nowrap', fontFamily: 'monospace', fontSize: '0.8rem' }}>
                    {formatTime(r.createdAt || r.clientAt)}
                  </td>
                  <td style={{ fontWeight: 600 }}>{r.fullName || '—'}</td>
                  <td><code>{r.studentCode || r.studentRkId}</code></td>
                  <td>
                    <span className="badge badge-warning" style={{ fontSize: '0.72rem' }}>
                      {kindLabel(r.kind)}
                    </span>
                  </td>
                  <td style={{ maxWidth: 360, fontSize: '0.85rem' }} title={r.reason}>
                    {r.reason}
                  </td>
                  <td style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>{r.monitorMode || '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
};
