out.txt

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { helpApiService } from '../api/helpApi';
import SupportTicketModal from '../components/SupportTicketModal';

// Used for future backend integration
const pageKey = 'student_help_center';
const role = 'student';

const StudentHelp = () => {
  const navigate = useNavigate();
  const [searchTerm, setSearchTerm] = useState('');
  const [articles, setArticles] = useState([]);
  const [popularArticles, setPopularArticles] = useState([]);
  const [activeCategory, setActiveCategory] = useState('');
  const [loading, setLoading] = useState(false);
  const [loadingPopular, setLoadingPopular] = useState(false);
  const [loadingCategories, setLoadingCategories] = useState(false);
  const [error, setError] = useState('');
  const [categoryError, setCategoryError] = useState('');
  const [categories, setCategories] = useState([]);
  const [showTicketModal, setShowTicketModal] = useState(false);

  const topics = categories.length ? categories : [
    'Events & Registrations',
    'Payments & Wallet',
    'Bookings (Courts & Gym)',
    'Loyalty & Vendors',
    'Account & Profile',
  ];

  const loadPopular = useCallback(async () => {
    try {
      setLoadingPopular(true);
      const res = await helpApiService.getArticles({
        role,
        pageKey,
        popular: true,
      });
      if (res.success) {
        setPopularArticles(res.data.articles || []);
      } else {
        setPopularArticles([]);
        setError(res.message || 'Failed to load popular articles');
      }
    } finally {
      setLoadingPopular(false);
    }
  }, []);

  const loadArticles = useCallback(async (opts = {}) => {
    try {
      setLoading(true);
      setError('');
      const res = await helpApiService.getArticles({
        role,
        pageKey,
        search: opts.search || '',
        category: opts.category || '',
      });
      if (res.success) {
        setArticles(res.data.articles || []);
      } else {
        setArticles([]);
        setError(res.message || 'Failed to load articles');
      }
    } catch (e) {
      setArticles([]);
      setError(e.message || 'Failed to load articles');
    } finally {
      setLoading(false);
    }
  }, []);

  const loadCategories = useCallback(async () => {
    try {
      setLoadingCategories(true);
      setCategoryError('');
      const res = await helpApiService.getCategories({ role, pageKey });
      if (res.success) {
        setCategories(res.data.categories || []);
      } else {
        setCategoryError(res.message || 'Failed to load categories');
      }
    } catch (e) {
      setCategoryError(e.message || 'Failed to load categories');
    } finally {
      setLoadingCategories(false);
    }
  }, []);

  useEffect(() => {
    loadPopular();
    loadArticles();
    loadCategories();
  }, [loadArticles, loadPopular, loadCategories]);

  const handleSearchSubmit = async (e) => {
    e.preventDefault();
    await loadArticles({ search: searchTerm, category: activeCategory });
  };

  const handleCategoryClick = async (topic) => {
    const next = activeCategory === topic ? '' : topic;
    setActiveCategory(next);
    await loadArticles({ search: searchTerm, category: next });
  };

  const visiblePopular = useMemo(() => {
    if (!searchTerm.trim()) return popularArticles;
    const term = searchTerm.toLowerCase();
    return popularArticles.filter(
      (article) =>
        article.title.toLowerCase().includes(term) ||
        article.summary.toLowerCase().includes(term),
    );
  }, [popularArticles, searchTerm]);

  const handleOpenArticle = (id) => {
    navigate(`/student/help/${id}`);
  };

  return (
    <div style={{
      minHeight: '100vh',
      background: 'linear-gradient(135deg, #f6f7fb 0%, #eef2ff 100%)',
      padding: '2.5rem 1.5rem',
    }}>
      <div style={{ maxWidth: '1100px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: '1rem',
          padding: '1.25rem',
          background: '#ffffff',
          borderRadius: '1rem',
          border: '1px solid #e5e7eb',
          boxShadow: '0 15px 35px rgba(17,24,39,0.08)',
          animation: 'fadeIn 0.5s ease-out',
        }}>
          <span className="material-symbols-outlined" style={{ fontSize: '2.25rem', color: '#1D3557' }}>
            help
          </span>
          <div>
            <h1 style={{ margin: 0, color: '#1D3557' }}>Student Help Center</h1>
            <p style={{ margin: '0.2rem 0 0', color: '#4b5563' }}>
              Find help, guides, and support for using Bindly as a student.
            </p>
          </div>
        </div>

        {/* Search */}
        <div style={{
          background: '#ffffff',
          borderRadius: '0.75rem',
          padding: '1rem 1.25rem',
          boxShadow: '0 10px 25px rgba(17, 24, 39, 0.05)',
          border: '1px solid #e5e7eb',
          animation: 'slideUp 0.5s ease-out',
        }}>
          <form onSubmit={handleSearchSubmit}>
            <label style={{ display: 'block', color: '#4b5563', fontWeight: 600, marginBottom: '0.5rem' }}>
              Search help articles
            </label>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: '0.75rem',
              background: '#f8fafc',
              border: '1px solid #e5e7eb',
              borderRadius: '0.75rem',
              padding: '0.75rem 1rem',
              transition: 'box-shadow 0.2s ease, transform 0.2s ease',
            }}>
              <span className="material-symbols-outlined" style={{ color: '#9ca3af' }}>search</span>
              <input
                type="text"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="Search for payments, registrations, bookings..."
                style={{
                  border: 'none',
                  outline: 'none',
                  background: 'transparent',
                  width: '100%',
                  fontSize: '0.95rem',
                  color: '#1f2937',
                }}
              />
              <button
                type="submit"
                style={{
                  border: 'none',
                  background: '#1D3557',
                  color: '#ffffff',
                  padding: '0.65rem 1rem',
                  borderRadius: '0.6rem',
                  fontWeight: 700,
                  cursor: 'pointer',
                  boxShadow: '0 10px 20px rgba(29,53,87,0.25)',
                  transition: 'transform 0.1s ease, box-shadow 0.2s ease',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}
              >
                Search
              </button>
            </div>
          </form>
        </div>

        {/* Popular articles */}
        <section style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <h2 style={{ margin: 0, color: '#1D3557', fontSize: '1.2rem' }}>Popular articles for students</h2>
          </div>
          {loadingPopular ? (
            <div style={{ color: '#6b7280' }}>Loading popular articles...</div>
          ) : (
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
              gap: '1rem',
            }}>
              {visiblePopular.map((article) => (
                <button
                  key={article.id}
                  type="button"
                  onClick={() => handleOpenArticle(article.id)}
                  style={{
                    background: '#ffffff',
                    borderRadius: '0.75rem',
                    padding: '1rem',
                    border: '1px solid #e5e7eb',
                    boxShadow: '0 4px 12px rgba(17, 24, 39, 0.06)',
                    display: 'flex',
                    flexDirection: 'column',
                    gap: '0.5rem',
                    textAlign: 'left',
                    cursor: 'pointer',
                    transition: 'transform 0.15s ease, box-shadow 0.2s ease',
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 12px 24px rgba(17,24,39,0.12)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 4px 12px rgba(17,24,39,0.06)'; }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                    <span className="material-symbols-outlined" style={{ color: '#1D3557' }}>description</span>
                    <h3 style={{ margin: 0, fontSize: '1rem', color: '#111827' }}>{article.title}</h3>
                  </div>
                  <p style={{ margin: 0, color: '#4b5563', fontSize: '0.95rem' }}>{article.summary}</p>
                  <span style={{ color: '#1D3557', fontWeight: 600 }}>View details →</span>
                </button>
              ))}
              {visiblePopular.length === 0 && (
                <div style={{ color: '#6b7280' }}>No popular articles found.</div>
              )}
            </div>
          )}
        </section>

        {/* Browse by topic */}
        <section style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
          <h2 style={{ margin: 0, color: '#1D3557', fontSize: '1.2rem' }}>Browse by topic</h2>
          {loadingCategories && <div style={{ color: '#6b7280' }}>Loading categories...</div>}
          {categoryError && <div style={{ color: '#b91c1c' }}>{categoryError}</div>}
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
            gap: '0.75rem',
          }}>
            {topics.map((topic) => (
              <button
                key={topic}
                type="button"
                onClick={() => handleCategoryClick(topic)}
                style={{
                  background: '#ffffff',
                  border: activeCategory === topic ? '2px solid #1D3557' : '1px solid #e5e7eb',
                  borderRadius: '0.75rem',
                  padding: '1rem',
                  textAlign: 'left',
                  cursor: 'pointer',
                  color: '#111827',
                  fontWeight: 600,
                  boxShadow: '0 4px 10px rgba(17, 24, 39, 0.05)',
                  transition: 'transform 0.15s ease, box-shadow 0.2s ease',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 12px 22px rgba(17,24,39,0.08)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 4px 10px rgba(17,24,39,0.05)'; }}
              >
                {topic}
              </button>
            ))}
          </div>
        </section>

        {/* Search results / Article list */}
        <section style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <h2 style={{ margin: 0, color: '#1D3557', fontSize: '1.2rem' }}>
              Articles {activeCategory ? `• ${activeCategory}` : ''}
            </h2>
            {activeCategory && (
              <button
                type="button"
                onClick={() => handleCategoryClick(activeCategory)}
                style={{
                  border: 'none',
                  background: 'none',
                  color: '#1D3557',
                  fontWeight: 600,
                  cursor: 'pointer',
                }}
              >
                Clear category
              </button>
            )}
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
            gap: '1rem',
          }}>
            {loading ? (
              <div style={{ color: '#6b7280' }}>Loading articles...</div>
            ) : error ? (
              <div style={{ color: '#b91c1c' }}>{error}</div>
            ) : articles.length === 0 ? (
              <div style={{ color: '#6b7280' }}>No articles found for your filters.</div>
            ) : (
              articles.map((article) => (
                <button
                  key={article.id}
                  type="button"
                  onClick={() => handleOpenArticle(article.id)}
                  style={{
                    background: '#ffffff',
                    borderRadius: '0.75rem',
                    padding: '1rem',
                    border: '1px solid #e5e7eb',
                    boxShadow: '0 4px 10px rgba(17, 24, 39, 0.06)',
                    textAlign: 'left',
                    cursor: 'pointer',
                  }}
                >
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.25rem' }}>
                    <h3 style={{ margin: 0, fontSize: '1rem', color: '#111827' }}>{article.title}</h3>
                    <span style={{
                      padding: '0.25rem 0.6rem',
                      borderRadius: '999px',
                      background: '#e0e7ff',
                      color: '#312e81',
                      fontSize: '0.75rem',
                      fontWeight: 700,
                    }}>
                      {article.category}
                    </span>
                  </div>
                  <p style={{ margin: 0, color: '#4b5563', fontSize: '0.95rem' }}>{article.summary}</p>
                  <span style={{ color: '#1D3557', fontWeight: 600, marginTop: '0.5rem', display: 'inline-block' }}>
                    Read article →
                  </span>
                </button>
              ))
            )}
          </div>
        </section>

        {/* Still need help */}
        <section style={{
          background: '#1D3557',
          color: '#ffffff',
          borderRadius: '0.85rem',
          padding: '1.25rem 1.5rem',
          display: 'flex',
          flexWrap: 'wrap',
          gap: '1rem',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}>
          <div>
            <h3 style={{ margin: 0 }}>Still need help?</h3>
            <p style={{ margin: '0.25rem 0 0', color: 'rgba(255,255,255,0.9)' }}>
              Contact support and we’ll follow up shortly.
            </p>
          </div>
          <button
            type="button"
            onClick={() => setShowTicketModal(true)}
            style={{
              background: '#ffffff',
              color: '#1D3557',
              border: 'none',
              borderRadius: '0.65rem',
              padding: '0.75rem 1.25rem',
              fontWeight: 700,
              cursor: 'pointer',
              boxShadow: '0 8px 18px rgba(0,0,0,0.12)',
            }}
          >
            Contact Support
          </button>
        </section>

        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
          <Link
            to="/student/help/tickets"
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: '0.35rem',
              padding: '0.65rem 1rem',
              background: '#1D3557',
              color: '#ffffff',
              borderRadius: '0.65rem',
              textDecoration: 'none',
              fontWeight: 700,
              boxShadow: '0 10px 20px rgba(29,53,87,0.18)',
              transition: 'transform 0.1s ease, box-shadow 0.2s ease',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 14px 26px rgba(29,53,87,0.24)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 10px 20px rgba(29,53,87,0.18)'; }}
          >
            <span className="material-symbols-outlined" style={{ fontSize: '1.05rem' }}>assignment</span>
            View My Support Tickets
          </Link>

          <Link
            to="/dashboard"
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: '0.35rem',
              padding: '0.65rem 1rem',
              background: '#f8fafc',
              color: '#1D3557',
              borderRadius: '0.65rem',
              textDecoration: 'none',
              fontWeight: 700,
              border: '1px solid #e5e7eb',
              boxShadow: '0 8px 16px rgba(17,24,39,0.12)',
              transition: 'transform 0.1s ease, box-shadow 0.2s ease',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = '0 12px 20px rgba(17,24,39,0.16)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 8px 16px rgba(17,24,39,0.12)'; }}
          >
            <span className="material-symbols-outlined" style={{ fontSize: '1.05rem' }}>arrow_back</span>
            Back to Dashboard
          </Link>

          <span style={{ color: '#6b7280', fontSize: '0.85rem' }}>Page key: {pageKey}</span>
        </div>
      </div>
      <SupportTicketModal
        open={showTicketModal}
        onClose={() => setShowTicketModal(false)}
        role={role}
        pageKey={pageKey}
        context={{}}
        defaultCategory={activeCategory || 'Events'}
      />
      <div style={{ marginTop: '1rem' }}>
        <Link to="/student/help/tickets" style={{ color: '#1D3557', fontWeight: 600, textDecoration: 'none' }}>
          View My Support Tickets →
        </Link>
    </div>
      <style>{`
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes slideUp {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
};

export default StudentHelp;