import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Code, BookOpen, FileJson } from 'lucide-react';
import { SettingsMenuOrderPage } from './SettingsMenuOrder';
import { SettingsThemePage } from './SettingsTheme';
import { SettingsPluginsPage } from './SettingsPlugins';

export function SettingsSystemPage() {
  const { t } = useTranslation();
  const [activeTab, setActiveTab] = useState('menu');

  const tabs = [
    { key: 'menu', label: t('settings.menuOrder', 'Menü') },
    { key: 'theme', label: t('settings.theme', 'Theme') },
    { key: 'plugins', label: t('settings.plugins', 'Plugins') },
    { key: 'entwickler', label: t('settings.developer', 'Entwickler') },
  ];

  return (
    <div className="space-y-6" data-testid="settings-system-page">
      <h1 className="text-2xl font-bold text-secondary-900">System</h1>

      <div className="border-b border-secondary-200">
        <nav className="flex gap-4" role="tablist" aria-label="System Tabs">
          {tabs.map((tab) => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              role="tab"
              aria-selected={activeTab === tab.key}
              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                activeTab === tab.key
                  ? 'border-primary-500 text-primary-700'
                  : 'border-transparent text-secondary-600 hover:text-secondary-900 hover:border-secondary-300'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </nav>
      </div>

      <div role="tabpanel">
        {activeTab === 'menu' && <SettingsMenuOrderPage />}
        {activeTab === 'theme' && <SettingsThemePage />}
        {activeTab === 'plugins' && <SettingsPluginsPage />}
        {activeTab === 'entwickler' && (
          <div className="space-y-4" data-testid="settings-developer-section">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
              <a
                href="/docs"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-start gap-3 p-4 rounded-lg border border-secondary-200 bg-white hover:border-primary-300 hover:shadow-sm transition-all min-h-touch"
              >
                <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-primary-50 text-primary-600 flex items-center justify-center">
                  <Code className="w-5 h-5" aria-hidden="true" strokeWidth={2} />
                </div>
                <div className="min-w-0">
                  <p className="text-sm font-semibold text-secondary-900">
                    {t('settings.apiDocsSwagger', 'API Dokumentation (Swagger)')}
                  </p>
                  <p className="text-xs text-secondary-500 mt-0.5">/docs</p>
                </div>
              </a>
              <a
                href="/redoc"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-start gap-3 p-4 rounded-lg border border-secondary-200 bg-white hover:border-primary-300 hover:shadow-sm transition-all min-h-touch"
              >
                <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-primary-50 text-primary-600 flex items-center justify-center">
                  <BookOpen className="w-5 h-5" aria-hidden="true" strokeWidth={2} />
                </div>
                <div className="min-w-0">
                  <p className="text-sm font-semibold text-secondary-900">
                    {t('settings.apiDocsRedoc', 'API Dokumentation (ReDoc)')}
                  </p>
                  <p className="text-xs text-secondary-500 mt-0.5">/redoc</p>
                </div>
              </a>
              <a
                href="/openapi.json"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-start gap-3 p-4 rounded-lg border border-secondary-200 bg-white hover:border-primary-300 hover:shadow-sm transition-all min-h-touch"
              >
                <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-primary-50 text-primary-600 flex items-center justify-center">
                  <FileJson className="w-5 h-5" aria-hidden="true" strokeWidth={2} />
                </div>
                <div className="min-w-0">
                  <p className="text-sm font-semibold text-secondary-900">
                    {t('settings.openApiSchema', 'OpenAPI Schema')}
                  </p>
                  <p className="text-xs text-secondary-500 mt-0.5">/openapi.json</p>
                </div>
              </a>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}