import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import LanguageSwitcher from './components/LanguageSwitcher';
import SiteFooter from './components/SiteFooter';
import './ApiDocs.css';

function ApiDocs() {
  const [selectedDoc, setSelectedDoc] = useState(null);
  const { t } = useTranslation();

  // Mock data - this will be replaced with actual API data later
  const apiDocuments = [
    {
      id: 1,
      title: 'HicoinPay API Reference',
      version: 'v2.1',
      description: 'Complete API reference for payment processing, webhooks, and merchant management.',
      lastUpdated: '2024-01-15',
      fileSize: '2.4 MB',
      downloadUrl: '/api-docs/hicoinpay-api-reference-v2.1.pdf'
    }
  ];

  const handleDownload = (document) => {
    alert(`Downloading ${document.title} (${document.fileSize})...`);
  };

  const handleViewDetails = (document) => {
    setSelectedDoc(document);
  };

  return (
    <div className="api-docs-container">
      {/* Header */}
      <header className="docs-header">
        <div className="container">
          <div className="header-content">
            <div className="breadcrumb">
              <a href="/">{t('navigation.home')}</a> / <span>{t('apiDocs.title')}</span>
            </div>
            {/* Title removed per request */}
            <p>{t('apiDocs.subtitle')}</p>
            <div style={{ marginTop: '1rem' }}>
              <LanguageSwitcher inverse />
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="docs-main">
        <div className="container">
          <div className="docs-grid">
            {/* Documents List */}
            <div className="documents-section">
              <div className="section-header">
                <h2>{t('apiDocs.availableDocs')}</h2>
                <p>{t('apiDocs.downloadLatest')}</p>
              </div>

              <div className="documents-grid">
                {apiDocuments.map((doc) => (
                  <div key={doc.id} className="document-card">
                    <div className="document-header">
                      <h3>{doc.title}</h3>
                      <span className="version-badge">{t('apiDocs.version')}{doc.version}</span>
                    </div>
                    <p className="document-description">{doc.description}</p>
                    <div className="document-meta">
                      <span className="last-updated">{t('apiDocs.updated')}: {doc.lastUpdated}</span>
                      <span className="file-size">{doc.fileSize}</span>
                    </div>
                    <div className="document-actions">
                      <button 
                        className="btn-primary"
                        onClick={() => handleDownload(doc)}
                      >
                        {t('apiDocs.downloadPdf')}
                      </button>
                      <button 
                        className="btn-outline"
                        onClick={() => handleViewDetails(doc)}
                      >
                        {t('apiDocs.viewDetails')}
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Sidebar removed to keep only API Reference */}
          </div>
        </div>
      </main>

      {/* Document Details Modal */}
      {selectedDoc && (
        <div className="modal-overlay" onClick={() => setSelectedDoc(null)}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <div className="modal-header">
              <h2>{selectedDoc.title}</h2>
              <button 
                className="close-button"
                onClick={() => setSelectedDoc(null)}
              >
                ×
              </button>
            </div>
            <div className="modal-body">
              <div className="document-info">
                <div className="info-row">
                  <strong>{t('apiDocs.modal.version')}:</strong> {selectedDoc.version}
                </div>
                <div className="info-row">
                  <strong>{t('apiDocs.modal.lastUpdated')}:</strong> {selectedDoc.lastUpdated}
                </div>
                <div className="info-row">
                  <strong>{t('apiDocs.modal.fileSize')}:</strong> {selectedDoc.fileSize}
                </div>
                <div className="info-row">
                  <strong>{t('apiDocs.modal.description')}:</strong> {selectedDoc.description}
                </div>
              </div>
              <div className="modal-actions">
                <button 
                  className="btn-primary"
                  onClick={() => {
                    handleDownload(selectedDoc);
                    setSelectedDoc(null);
                  }}
                >
                  {t('apiDocs.downloadPdf')}
                </button>
                <button 
                  className="btn-outline"
                  onClick={() => setSelectedDoc(null)}
                >
                  {t('apiDocs.close')}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      <SiteFooter />
    </div>
  );
}

export default ApiDocs;
