import React, { useEffect, useState } from 'react';
import {
  apiFetchAcceptedWifis,
  apiSaveAcceptedWifis,
  type WifiAcceptItem,
} from '../api';
import { WifiPoolModal } from './WifiPoolModal';

function bssidKey(bssid: string): string {
  return bssid.toLowerCase().replace(/[^0-9a-f]/g, '');
}

function formatBssid(raw: string): string | null {
  const key = bssidKey(raw);
  if (key.length !== 12) return null;
  return key.match(/.{2}/g)!.join(':');
}

export const NetworkTab: React.FC = () => {
  const [acceptedItems, setAcceptedItems] = useState<WifiAcceptItem[]>([]);
  const [saving, setSaving] = useState(false);
  const [loading, setLoading] = useState(true);
  const [poolOpen, setPoolOpen] = useState(false);
  const [manualSsid, setManualSsid] = useState('');
  const [manualBssid, setManualBssid] = useState('');
  const [manualError, setManualError] = useState<string | null>(null);

  const loadAccepted = async () => {
    try {
      setLoading(true);
      const res = await apiFetchAcceptedWifis();
      setAcceptedItems(
        (res.data || [])
          .filter(r => r.ssid && r.bssid)
          .map(r => ({ ssid: r.ssid, bssid: r.bssid }))
      );
    } catch {
      setAcceptedItems([]);
    } finally {
      setLoading(false);
    }
  };

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

  const addWifi = (ssid: string, bssid: string) => {
    const trimmedSsid = ssid.trim();
    const trimmedBssid = bssid.trim();
    const key = bssidKey(trimmedBssid);
    if (!trimmedSsid || key.length !== 12) return;
    setAcceptedItems(prev => {
      if (prev.some(item => bssidKey(item.bssid) === key)) return prev;
      return [...prev, { ssid: trimmedSsid, bssid: trimmedBssid }];
    });
  };

  const removeWifi = (bssid: string) => {
    const key = bssidKey(bssid);
    setAcceptedItems(prev => prev.filter(item => bssidKey(item.bssid) !== key));
  };

  const handleManualAdd = () => {
    const ssid = manualSsid.trim();
    const bssid = formatBssid(manualBssid);
    if (!ssid) {
      setManualError('Nhập tên WiFi (SSID).');
      return;
    }
    if (!bssid) {
      setManualError('BSSID không hợp lệ — nhập 12 ký tự hex (vd: f0:61:c0:b0:fd:d2).');
      return;
    }
    const key = bssidKey(bssid);
    if (acceptedItems.some(item => bssidKey(item.bssid) === key)) {
      setManualError('BSSID này đã có trong danh sách.');
      return;
    }
    setAcceptedItems(prev => [...prev, { ssid, bssid }]);
    setManualSsid('');
    setManualBssid('');
    setManualError(null);
  };

  const handleSave = async () => {
    try {
      setSaving(true);
      await apiSaveAcceptedWifis(acceptedItems);
      alert('Đã lưu danh sách WiFi được phép!');
      await loadAccepted();
    } catch (e: any) {
      alert(e?.message || 'Không thể lưu cấu hình WiFi');
    } finally {
      setSaving(false);
    }
  };

  const acceptedBssidKeys = acceptedItems.map(item => bssidKey(item.bssid)).join(',');

  return (
    <div className="page-container">
      <div className="page-header">
        <div>
          <h1 className="page-title">Quản lý mạng</h1>
          <p className="page-subtitle">
            Cấu hình điểm phát WiFi được phép (SSID + BSSID/MAC) áp dụng <strong>toàn hệ thống</strong>.
            Sinh viên không thể giả mạo bằng hotspot trùng tên.
          </p>
        </div>
      </div>

      <div className="network-grid">
        <div className="card config-card-flat">
          <div className="card-header-title">WiFi được chấp nhận</div>
          <p className="config-card-desc">
            Chọn từ kho WiFi hoặc thêm thủ công SSID + BSSID. Để trống = chưa bật kiểm tra WiFi.
          </p>

          <form
            className="network-manual-form"
            onSubmit={e => {
              e.preventDefault();
              handleManualAdd();
            }}
          >
            <p className="network-manual-hint">Thêm thủ công khi cần (vd: lấy BSSID từ router hoặc lệnh netsh)</p>
            <input
              type="text"
              className="app-pool-search"
              placeholder="SSID (tên WiFi)"
              value={manualSsid}
              onChange={e => {
                setManualSsid(e.target.value);
                setManualError(null);
              }}
              disabled={loading}
            />
            <input
              type="text"
              className="app-pool-search"
              placeholder="BSSID / MAC (f0:61:c0:b0:fd:d2)"
              value={manualBssid}
              onChange={e => {
                setManualBssid(e.target.value);
                setManualError(null);
              }}
              disabled={loading}
              spellCheck={false}
            />
            <button type="submit" className="btn btn-secondary" disabled={loading}>
              + Thêm thủ công
            </button>
            {manualError && <p className="network-manual-error">{manualError}</p>}
          </form>

          {loading ? (
            <div className="app-pool-status">Đang tải...</div>
          ) : acceptedItems.length === 0 ? (
            <div className="app-pool-status" style={{ marginBottom: '0.75rem' }}>
              Chưa có điểm phát nào. Mở kho WiFi để thêm từ máy sinh viên đang kết nối đúng mạng trường.
            </div>
          ) : (
            <table className="data-table app-pool-table" style={{ marginBottom: '0.75rem' }}>
              <thead>
                <tr>
                  <th>SSID</th>
                  <th>BSSID (MAC)</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {acceptedItems.map(item => (
                  <tr key={bssidKey(item.bssid)}>
                    <td><code className="app-pool-kw">{item.ssid}</code></td>
                    <td className="app-pool-muted" style={{ fontFamily: 'monospace', fontSize: '0.85rem' }}>
                      {item.bssid}
                    </td>
                    <td>
                      <button
                        type="button"
                        className="btn btn-secondary app-pool-add-btn"
                        onClick={() => removeWifi(item.bssid)}
                      >
                        Xóa
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}

          <div className="network-actions">
            <button type="button" className="btn btn-secondary" onClick={() => setPoolOpen(true)}>
              Mở kho WiFi
            </button>
            <button type="button" className="btn btn-primary" onClick={handleSave} disabled={saving || loading}>
              {saving ? 'Đang lưu...' : 'Lưu cấu hình'}
            </button>
          </div>
        </div>

        <div className="card config-card-flat network-info-card">
          <div className="card-header-title">Cách hoạt động</div>
          <ul className="network-info-list">
            <li>Sinh viên kết nối WiFi → app gửi <strong>SSID + BSSID</strong> (MAC điểm phát) lên kho</li>
            <li>Thầy cô chọn từ kho hoặc <strong>thêm thủ công</strong> SSID + BSSID khi cần</li>
            <li>Hotspot giả trùng tên nhưng MAC khác → app báo lỗi và thoát</li>
            <li>Chưa cấu hình → không chặn (để thu thập kho trước)</li>
          </ul>
        </div>
      </div>

      <WifiPoolModal
        open={poolOpen}
        onClose={() => setPoolOpen(false)}
        onSelect={addWifi}
        acceptedBssidKeys={acceptedBssidKeys}
      />
    </div>
  );
};
