import React, { useEffect, useState } from 'react';
import { useAuth } from '../auth/AuthContext';
import {
  isRescidePopupHidden,
  RESCIDE_DEFAULT_DOWNLOADS,
  RESCIDE_FEATURES,
  setRescidePopupHidden,
} from '../rescide';
import { navigate } from '../navigation';

type Props = {
  /** Khi true, không hiện popup (ví dụ đang ở workspace lớp/thi). */
  disabled?: boolean;
};

export const RescideAnnouncePopup: React.FC<Props> = ({ disabled }) => {
  const { staff } = useAuth();
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (disabled || !staff?.email) {
      setOpen(false);
      return;
    }
    setOpen(!isRescidePopupHidden(staff.email));
  }, [staff?.email, disabled]);

  if (!open || !staff?.email) return null;

  const dismissOnce = () => setOpen(false);

  const dismissForever = () => {
    setRescidePopupHidden(staff.email, true);
    setOpen(false);
  };

  const goTab = () => {
    setOpen(false);
    navigate('rescide');
  };

  return (
    <div className="modal-overlay" style={{ zIndex: 1200 }} onClick={dismissOnce}>
      <div
        className="modal-container"
        style={{ maxWidth: 520, width: '92%' }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="modal-header" style={{ borderBottom: '1px solid var(--border-light)' }}>
          <h2 className="modal-title" style={{ margin: 0 }}>
            Thông báo: RESCIDE IDE
          </h2>
          <button type="button" className="modal-close-btn" aria-label="Đóng" onClick={dismissOnce}>
            ×
          </button>
        </div>
        <div className="modal-body" style={{ padding: '1.25rem 1.5rem' }}>
          <p style={{ fontSize: '0.95rem', color: 'var(--text-secondary)', lineHeight: 1.6, marginBottom: '1rem' }}>
            <strong style={{ color: 'var(--text-primary)' }}>RESCIDE</strong> — IDE thi thực hành đang mở test thử để
            đánh giá và cải thiện chức năng. Mục đích: môi trường IDE chuyên cho kỳ thi thực hành, chống gian lận cùng
            RAIA DESKTOP.
          </p>
          <ul
            style={{
              margin: '0 0 1.25rem',
              paddingLeft: '1.15rem',
              fontSize: '0.875rem',
              color: 'var(--text-secondary)',
              lineHeight: 1.65,
            }}
          >
            {RESCIDE_FEATURES.map((f) => (
              <li key={f} style={{ marginBottom: '0.35rem' }}>
                {f}
              </li>
            ))}
          </ul>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', marginBottom: '0.25rem' }}>
            {RESCIDE_DEFAULT_DOWNLOADS.map((d) => (
              <a
                key={d.downloadUrl}
                href={d.downloadUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="btn btn-secondary"
                style={{ justifyContent: 'space-between', textDecoration: 'none', width: '100%' }}
              >
                <span>{d.name}</span>
                <span style={{ fontWeight: 700, color: 'var(--accent)' }}>Tải</span>
              </a>
            ))}
          </div>
        </div>
        <div
          className="modal-footer"
          style={{
            display: 'flex',
            flexWrap: 'wrap',
            gap: '0.5rem',
            justifyContent: 'flex-end',
            borderTop: '1px solid var(--border-light)',
            padding: '1rem 1.5rem',
          }}
        >
          <button type="button" className="btn btn-secondary" onClick={dismissForever}>
            Ẩn với tài khoản này
          </button>
          <button type="button" className="btn btn-secondary" onClick={goTab}>
            Xem chi tiết
          </button>
          <button type="button" className="btn btn-primary" onClick={dismissOnce}>
            Đã hiểu
          </button>
        </div>
      </div>
    </div>
  );
};