import React, { useState } from 'react';
import { Card, Button, Input } from '../../../components/ui';
import { __ } from '@wordpress/i18n';
import { search, external } from '@wordpress/icons';

const DOCS_URL = 'https://prorank.io/docs/';
const DOCS_SEARCH_URL = 'https://prorank.io/docs?search=';
const SUPPORT_FORUM_URL = 'https://wordpress.org/support/plugin/prorank-seo/';
const CHANGELOG_URL = 'https://wordpress.org/plugins/prorank-seo/#developers';

const DocumentationTab = ({ addNotice }) => {
  const [searchQuery, setSearchQuery] = useState('');

  const handleSearch = () => {
    if (searchQuery.trim()) {
      window.open(`${DOCS_SEARCH_URL}${encodeURIComponent(searchQuery)}`, '_blank');
    }
  };

  const docCategories = [
    {
      emoji: '📖',
      title: __('Getting Started', 'prorank-seo'),
      description: __('Installation guides, setup wizard, and first steps with ProRank SEO', 'prorank-seo'),
      url: `${DOCS_URL}getting-started/installation`,
      color: '#3b82f6',
    },
    {
      emoji: '⚡',
      title: __('Feature Guides', 'prorank-seo'),
      description: __('In-depth tutorials for all ProRank features and modules', 'prorank-seo'),
      url: DOCS_URL,
      color: '#10B981',
    },
    {
      emoji: '🛠️',
      title: __('Troubleshooting & Forum', 'prorank-seo'),
      description: __('Common fixes and the official WordPress.org support forum for the free plugin', 'prorank-seo'),
      url: SUPPORT_FORUM_URL,
      color: '#F59E0B',
    },
  ];

  return (
    <div className="prorank-documentation-tab">
      {/* Hero Section */}
      <Card className="prorank-card--modern prorank-card--hero">
        <div className="prorank-card-body prorank-doc-hero">
          <div className="prorank-doc-hero-content">
            <h2>{__('ProRank SEO Documentation', 'prorank-seo')}</h2>
            <p>
              {__(
                'Comprehensive guides, tutorials, and setup help to get the most out of ProRank SEO.',
                'prorank-seo'
              )}
            </p>
            <Button
              variant="primary"
              icon={external}
              onClick={() => window.open(DOCS_URL, '_blank')}
            >
              {__('Browse Full Documentation', 'prorank-seo')}
            </Button>
          </div>
        </div>
      </Card>

      {/* Search Section */}
      <Card className="prorank-card--modern">
        <div className="prorank-card-header">
          <h3 className="prorank-card-title">{__('Search Documentation', 'prorank-seo')}</h3>
        </div>
        <div className="prorank-card-body">
          <div className="search-box">
            <Input
              placeholder={__('Search for help articles...', 'prorank-seo')}
              value={searchQuery}
              onChange={(value) => setSearchQuery(value)}
              onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
            />
            <Button icon={search} variant="primary" onClick={handleSearch} disabled={!searchQuery.trim()}>
              {__('Search', 'prorank-seo')}
            </Button>
          </div>
          <p className="search-hint">
            {__('Search opens the ProRank documentation site in a new tab.', 'prorank-seo')}
          </p>
        </div>
      </Card>

      {/* Quick Access Cards */}
      <div className="prorank-doc-grid">
        {docCategories.map((category, index) => (
          <Card key={index} className="prorank-card--modern prorank-doc-category">
            <div className="prorank-card-body">
              <div className="doc-category-icon" style={{ backgroundColor: `${category.color}15` }}>
                <span className="doc-emoji">{category.emoji}</span>
              </div>
              <h3>{category.title}</h3>
              <p>{category.description}</p>
              <Button
                variant="secondary"
                icon={external}
                onClick={() => window.open(category.url, '_blank')}
              >
                {__('View Guides', 'prorank-seo')}
              </Button>
            </div>
          </Card>
        ))}
      </div>

      {/* Support Section */}
      <Card className="prorank-card--modern prorank-card--support">
        <div className="prorank-card-body prorank-support-cta">
          <div className="support-content">
            <h3>{__('Need More Help?', 'prorank-seo')}</h3>
            <p>
              {__(
                "For free-plugin help, start with the documentation and the WordPress.org support forum.",
                'prorank-seo'
              )}
            </p>
          </div>
          <div className="support-actions">
            <Button
              variant="secondary"
              onClick={() => window.open(SUPPORT_FORUM_URL, '_blank')}
            >
              {__('Open Support Forum', 'prorank-seo')}
            </Button>
            <Button
              variant="link"
              onClick={() => window.open(CHANGELOG_URL, '_blank')}
            >
              {__('View Changelog', 'prorank-seo')}
            </Button>
          </div>
        </div>
      </Card>
    </div>
  );
};

export default DocumentationTab;