import React, { useState, useEffect } from 'react';
import { useScrollToTop } from '../hooks/useScrollToTop';
import '../styles/DrugsList.css';
import drugs from '../data/original-drugs-chn.json';
import SEO from '../components/SEO';
import { useTranslation } from '../js/i18n';
import { usePageLoading } from '../hooks/usePageLoading';
import LoadingOverlay from './LoadingOverlay';

const DrugsList = () => {
  useScrollToTop();
  const { t } = useTranslation();
  const isLoading = usePageLoading();
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [isSearchFocused, setIsSearchFocused] = useState(false);

  // Filter drugs based on search term and category
  const filteredDrugs = drugs
    .filter(category => selectedCategory === 'all' || category.category === selectedCategory)
    .map(category => ({
      ...category,
      list: category.list.filter(drug => 
        drug.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        drug.factory.toLowerCase().includes(searchTerm.toLowerCase())
      )
    }))
    .filter(category => category.list.length > 0);

  const totalDrugs = drugs.reduce((acc, curr) => acc + curr.list.length, 0);
  const filteredTotalDrugs = filteredDrugs.reduce((acc, curr) => acc + curr.list.length, 0);

  // Add schema.org structured data for SEO
  useEffect(() => {
    const schema = {
      "@context": "https://schema.org",
      "@type": "Dataset",
      "name": t('tools.drugsList.title'),
      "description": t('tools.drugsList.description'),
      "keywords": ["drugs", "medicine", "China", "NMPA", "pharmaceutical"],
      "url": "https://fishersama.com/drugs-list",
      "creator": {
        "@type": "Organization",
        "name": "National Medical Products Administration",
        "url": "https://www.nmpa.gov.cn/"
      },
      "dateModified": new Date().toISOString().split('T')[0],
      "license": "https://www.nmpa.gov.cn/",
      "numberOfItems": totalDrugs
    };

    const script = document.createElement('script');
    script.type = 'application/ld+json';
    script.text = JSON.stringify(schema);
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, [t, totalDrugs]);

  return (
    <>
      <SEO
        title={t('tools.drugsList.title')}
        description={t('tools.drugsList.description')}
        keywords="drugs,medicine,China,NMPA,pharmaceutical,original drugs"
      />
      {isLoading && <LoadingOverlay />}
      <div className="drugs-container">
        <header className="page-header">
          <h1 className="drugs-title">{t('tools.drugsList.title')}</h1>
          <p className="page-description">{t('tools.drugsList.description')}</p>
        </header>
        
        {/* Search and Filter Section */}
        <div className={`search-section ${isSearchFocused ? 'focused' : ''}`}>
          <div className="search-container">
            <div className="search-wrapper">
              <div className="search-input-wrapper">
                <input
                  type="text"
                  placeholder={t('tools.drugsList.searchPlaceholder')}
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  onFocus={() => setIsSearchFocused(true)}
                  onBlur={() => setIsSearchFocused(false)}
                  className="search-input"
                  aria-label={t('tools.drugsList.searchPlaceholder')}
                />
                {searchTerm && (
                  <button
                    className="clear-search"
                    onClick={() => setSearchTerm('')}
                    aria-label={t('tools.drugsList.clearSearch')}
                  >
                    ×
                  </button>
                )}
              </div>
              <div className="search-stats" role="status" aria-live="polite">
                {t('tools.drugsList.showing')} {filteredTotalDrugs} / {totalDrugs} {t('tools.drugsList.items')}
              </div>
            </div>
            <div className="category-filter">
              <select 
                value={selectedCategory}
                onChange={(e) => setSelectedCategory(e.target.value)}
                className="category-select"
                aria-label={t('tools.drugsList.selectCategory')}
              >
                <option value="all">{t('tools.drugsList.allCategories')}</option>
                {drugs.map(category => (
                  <option key={category.category} value={category.category}>
                    {category.category} ({category.list.length})
                  </option>
                ))}
              </select>
            </div>
          </div>
        </div>

        {/* Drugs List */}
        <div className="drugs-list" role="main">
          {filteredDrugs.length === 0 ? (
            <div className="no-results">
              <p>{t('tools.drugsList.noResults')}</p>
            </div>
          ) : (
            filteredDrugs.map((category, categoryIndex) => (
              <section key={categoryIndex} className="category-section">
                <div className="category-header">
                  <h2 className="category-title">{category.category}</h2>
                  <span className="category-count">
                    {category.list.length} {t('tools.drugsList.items')}
                  </span>
                </div>
                <div className="table-container">
                  <table>
                    <thead>
                      <tr>
                        <th scope="col">{t('tools.drugsList.drugName')}</th>
                        <th scope="col">{t('tools.drugsList.manufacturer')}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {category.list.map((drug, drugIndex) => (
                        <tr key={drugIndex}>
                          <td>{drug.name}</td>
                          <td>{drug.factory}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </section>
            ))
          )}
        </div>

        {/* Source Information */}
        <footer className="source-info">
          <h3>{t('tools.drugsList.sourceTitle')}</h3>
          <a 
            href="https://mp.weixin.qq.com/s/EBu_ZTy5uovPa_8kCs_TBQ" 
            target="_blank" 
            rel="noopener noreferrer"
            className="source-link"
          >
            {t('tools.drugsList.sourceUrl')}
          </a>
        </footer>
      </div>
    </>
  );
};

export default DrugsList; 