rikkei_simple_care/management/src/components/DashboardTab.tsx

import React, { useEffect, useState } from 'react';
import { api, type GuideLinkItem } from '../api';
import type { StatsResponse } from '../api';
import { useAuth } from '../auth/AuthContext';

interface DashboardTabProps {
  onNavigate: (tab: string) => void;
}

const IconClasses = () => (
  <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M22 10v6M2 10l10-5 10 5-10 5z" />
    <path d="M6 12v5c0 2 2 3 6 3s6-1 6-3v-5" />
  </svg>
);

const IconActiveClasses = () => (
  <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
  </svg>
);

const IconStudents = () => (
  <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
    <circle cx="9" cy="7" r="4" />
    <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
  </svg>
);

const IconAlert = () => (
  <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
    <line x1="12" y1="9" x2="12" y2="13" />
    <line x1="12" y1="17" x2="12.01" y2="17" />
  </svg>
);

export const DashboardTab: React.FC<DashboardTabProps> = ({ onNavigate }) => {
  const { staff } = useAuth();
  const isSuperAdmin = staff?.email === 'phuocntb@rikkeiacademy.com';

  const [stats, setStats] = useState<StatsResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Guide links (teacher guides) state
  const [links, setLinks] = useState<GuideLinkItem[]>([]);
  const [linksLoading, setLinksLoading] = useState(true);

  // Modal states
  const [showModal, setShowModal] = useState(false);
  const [editingLink, setEditingLink] = useState<GuideLinkItem | null>(null);
  const [modalTitle, setModalTitle] = useState('');
  const [modalUrl, setModalUrl] = useState('');
  const [modalSaving, setModalSaving] = useState(false);

  const fetchLinks = async () => {
    try {
      setLinksLoading(true);
      const res = await api.listGuideLinks();
      setLinks(res.data || []);
    } catch (err) {
      console.error('Không thể tải tài liệu hướng dẫn giáo viên:', err);
    } finally {
      setLinksLoading(false);
    }
  };

  useEffect(() => {
    const fetchStats = async () => {
      try {
        setLoading(true);
        const data = await api.getStats();
        setStats(data);
      } catch (err: any) {
        setError(err.message || 'Không thể tải dữ liệu thống kê');
      } finally {
        setLoading(false);
      }
    };
    fetchStats();
    fetchLinks();
  }, []);

  const handleOpenAddModal = () => {
    setEditingLink(null);
    setModalTitle('');
    setModalUrl('');
    setShowModal(true);
  };

  const handleOpenEditModal = (link: GuideLinkItem) => {
    setEditingLink(link);
    setModalTitle(link.title);
    setModalUrl(link.url);
    setShowModal(true);
  };

  const handleSaveLink = async () => {
    if (!modalTitle.trim() || !modalUrl.trim()) {
      alert('Vui lòng điền đầy đủ tiêu đề và đường dẫn');
      return;
    }
    try {
      setModalSaving(true);
      if (editingLink) {
        await api.updateGuideLink(editingLink.id, modalTitle.trim(), modalUrl.trim());
      } else {
        await api.createGuideLink(modalTitle.trim(), modalUrl.trim());
      }
      setShowModal(false);
      await fetchLinks();
    } catch (err: any) {
      alert(err.message || 'Lưu tài liệu thất bại');
    } finally {
      setModalSaving(false);
    }
  };

  const handleDeleteLink = async (id: number, title: string) => {
    if (window.confirm(`Bạn có chắc chắn muốn xóa tài liệu giáo viên "${title}"?`)) {
      try {
        await api.deleteGuideLink(id);
        await fetchLinks();
      } catch (err: any) {
        alert(err.message || 'Xóa tài liệu thất bại');
      }
    }
  };

  return (
    <div className="tab-page">
      <div className="tab-page-toolbar">
        <div className="page-header">
          <div className="page-title">
            <h1>Tổng Quan Hệ Thống</h1>
            <p>Giám sát đồng bộ và quản lý lớp học, sinh viên từ hệ thống chính</p>
          </div>
        </div>
      </div>

      <div className="tab-page-body tab-page-scroll">
        {loading && (
          <div className="empty-state">
            <div className="sync-spinner" style={{ width: '40px', height: '40px', borderWidth: '3px' }}></div>
            <p style={{ marginTop: '1rem' }}>Đang tải thông số hệ thống...</p>
          </div>
        )}

        {error && (
          <div className="empty-state" style={{ border: '1px solid rgba(214, 48, 49, 0.2)', backgroundColor: 'rgba(214, 48, 49, 0.05)', borderRadius: '12px' }}>
            <div className="empty-state-icon" style={{ color: 'var(--danger)' }}>
              <IconAlert />
            </div>
            <p style={{ color: 'var(--danger)', fontWeight: 600 }}>Lỗi: {error}</p>
          </div>
        )}

        {!loading && !error && stats && (
          <>
            <div className="stats-grid">
              <div className="stat-card" onClick={() => onNavigate('classes')} style={{ cursor: 'pointer' }}>
                <div>
                  <div className="stat-label">Tổng lớp học đã đồng bộ</div>
                  <div className="stat-value">{stats.totalClasses}</div>
                </div>
                <div className="stat-icon" style={{ color: 'var(--accent)' }}>
                  <IconClasses />
                </div>
              </div>

              <div className="stat-card" onClick={() => onNavigate('classes')} style={{ cursor: 'pointer' }}>
                <div>
                  <div className="stat-label">Lớp đang giảng dạy</div>
                  <div className="stat-value" style={{ color: 'var(--success)' }}>{stats.activeClasses}</div>
                </div>
                <div className="stat-icon success" style={{ color: 'var(--success)', backgroundColor: 'var(--success-light)' }}>
                  <IconActiveClasses />
                </div>
              </div>

              <div className="stat-card" onClick={() => onNavigate('students')} style={{ cursor: 'pointer' }}>
                <div>
                  <div className="stat-label">Tổng sinh viên đã đồng bộ</div>
                  <div className="stat-value" style={{ color: 'var(--accent-hover)' }}>{stats.totalStudents}</div>
                </div>
                <div className="stat-icon" style={{ color: 'var(--accent-hover)' }}>
                  <IconStudents />
                </div>
              </div>
            </div>

            <div style={{ marginTop: '1.5rem' }}>
              <div className="content-card">
                <h2>Khởi động nhanh</h2>
                <p style={{ lineHeight: '1.6', color: 'var(--text-secondary)' }}>
                  Chào mừng bạn đến với trang quản trị <strong>Simple Care</strong>.
                  Hệ thống hỗ trợ quản lý lớp học, thi cử và chăm sóc sinh viên.
                </p>
                <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', marginTop: '1rem' }}>
                  <button className="btn btn-primary" onClick={() => onNavigate('classes')}>
                    Quản lý lớp học
                  </button>
                  <button className="btn btn-secondary" onClick={() => onNavigate('learning')}>
                    Lịch học & Giám sát
                  </button>
                  <button className="btn btn-secondary" onClick={() => onNavigate('exams')}>
                    Quản lý phòng thi
                  </button>
                </div>
              </div>
            </div>

            <div className="content-card" style={{ marginTop: '1.5rem' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem', borderBottom: '1px solid var(--border-color)', paddingBottom: '0.75rem' }}>
                <h2 style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--accent)' }}>
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                    <polyline points="14 2 14 8 20 8" />
                    <line x1="16" y1="13" x2="8" y2="13" />
                    <line x1="16" y1="17" x2="8" y2="17" />
                  </svg>
                  Tài liệu nội bộ (Giáo viên)
                </h2>
                {isSuperAdmin && (
                  <button 
                    className="btn btn-primary btn-sm"
                    onClick={handleOpenAddModal}
                    style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}
                  >
                    + Thêm tài liệu
                  </button>
                )}
              </div>

              {linksLoading && (
                <div style={{ display: 'flex', justifyContent: 'center', padding: '1rem' }}>
                  <div className="sync-spinner" style={{ width: '24px', height: '24px' }}></div>
                </div>
              )}

              {!linksLoading && links.length === 0 && (
                <p style={{ color: 'var(--text-muted)', fontStyle: 'italic', fontSize: '0.9rem', margin: '0.5rem 0' }}>Chưa có tài liệu hướng dẫn nào được cấu hình.</p>
              )}

              {!linksLoading && links.length > 0 && (
                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
                  {links.map((link) => (
                    <div 
                      key={link.id}
                      style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        padding: '0.75rem 1rem',
                        backgroundColor: 'var(--bg-app)',
                        borderRadius: 'var(--radius-sm)',
                        border: '1px solid var(--border-color)',
                        transition: 'var(--transition)'
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.borderColor = 'rgba(187, 33, 38, 0.25)';
                        e.currentTarget.style.backgroundColor = '#fff';
                        e.currentTarget.style.boxShadow = 'var(--shadow-sm)';
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.borderColor = 'var(--border-color)';
                        e.currentTarget.style.backgroundColor = 'var(--bg-app)';
                        e.currentTarget.style.boxShadow = 'none';
                      }}
                    >
                      <a 
                        href={link.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        style={{
                          display: 'flex',
                          alignItems: 'center',
                          gap: '10px',
                          color: 'var(--text-primary)',
                          textDecoration: 'none',
                          fontWeight: 500,
                          fontSize: '0.92rem',
                          flex: 1
                        }}
                        onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent)'}
                        onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-primary)'}
                      >
                        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: '#4285F4' }}>
                          <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
                          <polyline points="14 2 14 8 20 8" />
                        </svg>
                        {link.title}
                      </a>
                      {isSuperAdmin && (
                        <div style={{ display: 'flex', gap: '6px' }}>
                          <button
                            className="btn btn-secondary btn-sm"
                            onClick={() => handleOpenEditModal(link)}
                            style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem' }}
                          >
                            Sửa
                          </button>
                          <button
                            className="btn btn-secondary btn-sm"
                            onClick={() => handleDeleteLink(link.id, link.title)}
                            style={{ padding: '0.25rem 0.5rem', fontSize: '0.75rem', color: 'var(--danger)', borderColor: 'rgba(214, 48, 49, 0.2)' }}
                          >
                            Xóa
                          </button>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          </>
        )}
      </div>

      {showModal && (
        <div className="modal-overlay" onClick={() => setShowModal(false)}>
          <div className="modal-container" style={{ maxWidth: '450px' }} onClick={e => e.stopPropagation()}>
            <div className="modal-header">
              <h2 className="modal-title">{editingLink ? 'Cập nhật tài liệu' : 'Thêm tài liệu hướng dẫn'}</h2>
              <button className="modal-close-btn" onClick={() => setShowModal(false)} aria-label="Đóng">&times;</button>
            </div>
            <div className="modal-body" style={{ padding: '1.5rem' }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                <label className="login-field" style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
                  <span style={{ fontSize: '0.85rem', fontWeight: 600, color: 'var(--text-secondary)' }}>Tiêu đề tài liệu</span>
                  <input
                    type="text"
                    value={modalTitle}
                    onChange={e => setModalTitle(e.target.value)}
                    placeholder="VD: Hướng dẫn coi thi cuối kỳ"
                    style={{
                      width: '100%',
                      padding: '0.55rem 0.75rem',
                      borderRadius: 'var(--radius-sm)',
                      border: '1px solid var(--border-color)',
                      fontSize: '0.9rem',
                      outline: 'none',
                      transition: 'var(--transition)'
                    }}
                    onFocus={e => e.target.style.borderColor = 'var(--accent)'}
                    onBlur={e => e.target.style.borderColor = 'var(--border-color)'}
                  />
                </label>
                <label className="login-field" style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
                  <span style={{ fontSize: '0.85rem', fontWeight: 600, color: 'var(--text-secondary)' }}>Đường dẫn Google Docs</span>
                  <input
                    type="url"
                    value={modalUrl}
                    onChange={e => setModalUrl(e.target.value)}
                    placeholder="https://docs.google.com/document/d/..."
                    style={{
                      width: '100%',
                      padding: '0.55rem 0.75rem',
                      borderRadius: 'var(--radius-sm)',
                      border: '1px solid var(--border-color)',
                      fontSize: '0.9rem',
                      outline: 'none',
                      transition: 'var(--transition)'
                    }}
                    onFocus={e => e.target.style.borderColor = 'var(--accent)'}
                    onBlur={e => e.target.style.borderColor = 'var(--border-color)'}
                  />
                </label>
              </div>
            </div>
            <div className="modal-footer" style={{ padding: '1rem 1.5rem' }}>
              <button className="btn btn-secondary" onClick={() => setShowModal(false)}>Hủy</button>
              <button 
                className="btn btn-primary" 
                onClick={handleSaveLink}
                disabled={modalSaving}
              >
                {modalSaving ? 'Đang lưu...' : 'Lưu lại'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};