import React, { useState } from 'react';
import { Icons } from '../components/IconSet';

// Fallback icons for missing icons
const FallbackIcon = ({ className }: { className?: string }) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
    <circle cx="12" cy="12" r="10"/>
    <path d="M12 8v8M8 12h8"/>
  </svg>
);

interface FAQItem {
  question: string;
  answer: string;
  category: 'account' | 'city' | 'map' | 'support' | 'technical';
}

interface DocumentationSection {
  title: string;
  description: string;
  icon: keyof typeof Icons;
  color: string;
  items: {
    title: string;
    description: string;
    link?: string;
    isNew?: boolean;
    isUpdated?: boolean;
  }[];
}

const DocumentationPage: React.FC = () => {
  const [activeCategory, setActiveCategory] = useState<string>('all');

  // FAQ Daten
  const faqData: FAQItem[] = [
    {
      question: "Wie verlinke ich meinen Account?",
      answer: "Gehe zu 'Bürger' im Menü, klicke auf 'Account verknüpfen' und folge den Anweisungen. Du benötigst einen Discord-Account für diesen Vorgang. Nach der Verifizierung erhältst du Zugriff auf alle Bürger-Funktionen.",
      category: 'account'
    },
    {
      question: "Wie gründe ich eine Stadt?",
      answer: "Du benötigst mindestens 5 aktive Bürger und eine geeignete Landfläche. Kontaktiere den Bürgermeister oder besuche das Rathaus für weitere Informationen. Alternativ kannst du im 'Projekte'-Bereich einen Gründungsantrag stellen.",
      category: 'city'
    },
    {
      question: "Wo finde ich die Weltkarte?",
      answer: "Die Weltkarte ist im Hauptmenü unter 'Weltkarte' zu finden. Dort kannst du alle Städte, Unternehmen und wichtige Orte im Tal einsehen. Die Karte wird regelmäßig aktualisiert und zeigt Echtzeit-Informationen.",
      category: 'map'
    },
    {
      question: "Wie bekomme ich Support?",
      answer: "Für technische Probleme wende dich an das Admin-Team. Für inhaltliche Fragen kannst du die FAQ durchsuchen oder im Discord-Server nachfragen. Support ist werktags von 18:00-22:00 Uhr verfügbar.",
      category: 'support'
    },
    {
      question: "Wie funktioniert die Datapack-Integration?",
      answer: "Lade das neueste Datapack aus dem Download-Bereich herunter. Platziere es im 'datapacks'-Ordner deines Minecraft-Servers und starte den Server neu. Alle Funktionen sind dann automatisch verfügbar.",
      category: 'technical'
    },
    {
      question: "Wie melde ich Bugs oder Fehler?",
      answer: "Gehe zu 'Feedback & Bugs' im Schnellzugriff oder erstelle ein Issue auf GitHub. Beschreibe das Problem detailliert und füge Screenshots bei, wenn möglich. Unser Team bearbeitet Meldungen innerhalb von 48 Stunden.",
      category: 'support'
    },
    {
      question: "Wie gründe ich ein Unternehmen?",
      answer: "Im 'Projekte'-Bereich kannst du einen Unternehmensantrag stellen. Du benötigst mindestens 3 Gründungsmitglieder und ein Geschäftsmodell. Nach Genehmigung durch die Wirtschaftsbehörde erhältst du Unternehmensrechte.",
      category: 'city'
    },
    {
      question: "Wie funktioniert die Rangsystematik?",
      answer: "Der Rang basiert auf Aktivität, Beiträgen und Reputation im Tal. Aktive Bürger erhalten regelmäßig Rang-Upgrades. Besondere Leistungen werden mit besonderen Rängen ausgezeichnet.",
      category: 'account'
    }
  ];

  // Dokumentationsabschnitte
  const documentationSections: DocumentationSection[] = [
    {
      title: "Bürger-Handbuch",
      description: "Für alle neuen und erfahrenen Tal-Bewohner",
      icon: "Users",
      color: "accentInfo",
      items: [
        {
          title: "Häufig gestellte Fragen",
          description: "Die wichtigsten Fragen und Antworten",
          link: "#faq"
        },
        {
          title: "Stadtgründung",
          description: "Schritt-für-Schritt Anleitung zur Gründung deiner eigenen Stadt",
          link: "/docs/city-foundation",
          isNew: true
        },
        {
          title: "Unternehmensgründung",
          description: "So startest du dein eigenes Unternehmen im Tal",
          link: "/docs/business-foundation"
        },
        {
          title: "Weltkarte nutzen",
          description: "Wie du die interaktive Weltkarte effektiv nutzt",
          link: "/docs/map-usage",
          isUpdated: true
        },
        {
          title: "Account-Verwaltung",
          description: "Verwaltung deines Bürger-Accounts und Einstellungen",
          link: "/docs/account-management"
        },
        {
          title: "Rechte und Pflichten",
          description: "Übersicht über Bürgerrechte und -pflichten im Tal",
          link: "/docs/citizen-rights"
        }
      ]
    },
    {
      title: "Technische Dokumentation",
      description: "Für Entwickler und Server-Administratoren",
      icon: "Terminal",
      color: "accentWarn",
      items: [
        {
          title: "Datenbank-Struktur",
          description: "Übersicht über das Datenbankschema und die API-Endpunkte",
          link: "/docs/database-schema"
        },
        {
          title: "Datapack-Integration",
          description: "Wie du das Tal-Datapack in deinem Server integrierst",
          link: "/docs/datapack-integration",
          isNew: true
        },
        {
          title: "Server-Setup",
          description: "Komplette Anleitung zum Aufbau eines Tal-Servers",
          link: "/docs/server-setup"
        },
        {
          title: "API-Dokumentation",
          description: "REST-API für Entwickler und externe Anwendungen",
          link: "/docs/api-reference"
        },
        {
          title: "Plugin-Entwicklung",
          description: "Entwicklung eigener Plugins für den Tal-Server",
          link: "/docs/plugin-development"
        },
        {
          title: "Sicherheitshinweise",
          description: "Wichtige Sicherheitshinweise für Server-Admins",
          link: "/docs/security-guidelines"
        }
      ]
    },
    {
      title: "Projekt-Management",
      description: "Für Projektmanager und Teamleiter",
      icon: "Layers",
      color: "accentSuccess",
      items: [
        {
          title: "Projekt-Setup",
          description: "Einrichtung und Konfiguration neuer Projekte",
          link: "/docs/project-setup"
        },
        {
          title: "Team-Management",
          description: "Verwaltung von Projektteams und Berechtigungen",
          link: "/docs/team-management"
        },
        {
          title: "Milestones",
          description: "Verwaltung von Projekt-Milestones und Zielen",
          link: "/docs/milestones"
        },
        {
          title: "Reporting",
          description: "Erstellung von Projektberichten und Statistiken",
          link: "/docs/reporting"
        }
      ]
    }
  ];

  const categories = [
    { id: 'all', label: 'Alle', count: faqData.length },
    { id: 'account', label: 'Account', count: faqData.filter(f => f.category === 'account').length },
    { id: 'city', label: 'Städte & Unternehmen', count: faqData.filter(f => f.category === 'city').length },
    { id: 'map', label: 'Weltkarte', count: faqData.filter(f => f.category === 'map').length },
    { id: 'support', label: 'Support', count: faqData.filter(f => f.category === 'support').length },
    { id: 'technical', label: 'Technik', count: faqData.filter(f => f.category === 'technical').length }
  ];

  const filteredFAQ = activeCategory === 'all' 
    ? faqData 
    : faqData.filter(faq => faq.category === activeCategory);

  return (
    <div className="space-y-12">
      {/* Header Section */}
      <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 pb-4 border-b border-border">
        <div>
          <h2 className="text-sm font-bold text-accentInfo tracking-widest uppercase mb-2">Hilfe & Anleitungen</h2>
          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">Dokumentation</h1>
        </div>
        <p className="text-textMuted text-right hidden md:block max-w-xs leading-relaxed">
          Alles Wichtige rund um das Projekt: Vollidion und die Tal-Welt. Hier findest du Anleitungen, 
          technische Dokumentation und Antworten auf häufig gestellte Fragen.
        </p>
      </div>

      {/* Documentation Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
        {/* Left Column - Main Documentation */}
        <div className="lg:col-span-8 space-y-8">
          {/* Dokumentationsabschnitte */}
          {documentationSections.map((section, index) => (
            <div key={index} className="bg-surface/30 border border-border rounded-2xl p-8">
              <div className="flex items-center gap-4 mb-6">
                <div className={`w-12 h-12 bg-${section.color}/20 rounded-xl flex items-center justify-center`}>
                  {/*<Icons[section.icon] className={`w-6 h-6 text-${section.color}`} />*/}
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-textMain">{section.title}</h3>
                  <p className="text-textMuted text-sm">{section.description}</p>
                </div>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {section.items.map((item, itemIndex) => (
                  <div key={itemIndex} className="p-4 bg-surfaceHighlight/50 rounded-lg hover:bg-surfaceHighlight/80 transition-colors group">
                    <div className="flex items-start justify-between gap-3">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <span className="font-medium text-textMain group-hover:text-accentInfo transition-colors">
                            {item.title}
                          </span>
                          {item.isNew && (
                            <span className="px-2 py-1 bg-accentSuccess/20 text-accentSuccess text-xs rounded-full">
                              Neu
                            </span>
                          )}
                          {item.isUpdated && (
                            <span className="px-2 py-1 bg-accentWarn/20 text-accentWarn text-xs rounded-full">
                              Aktualisiert
                            </span>
                          )}
                        </div>
                        <p className="text-textMuted text-sm">{item.description}</p>
                      </div>
                      {item.link && (
                        <FallbackIcon className="w-4 h-4 text-textMuted group-hover:text-accentInfo transition-colors mt-1" />
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}

          {/* FAQ Section */}
          <div className="bg-surface/30 border border-border rounded-2xl p-8">
            <div className="flex items-center gap-4 mb-6">
              <div className="w-12 h-12 bg-accentSuccess/20 rounded-xl flex items-center justify-center">
                <Icons.Scroll className="w-6 h-6 text-accentSuccess" />
              </div>
              <div>
                <h3 className="text-xl font-semibold text-textMain">Häufig gestellte Fragen</h3>
                <p className="text-textMuted text-sm">Die wichtigsten Fragen und Antworten</p>
              </div>
            </div>

            {/* Kategorien-Filter */}
            <div className="flex flex-wrap gap-2 mb-6">
              {categories.map((category) => (
                <button
                  key={category.id}
                  onClick={() => setActiveCategory(category.id)}
                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                    activeCategory === category.id
                      ? 'bg-accentInfo/20 text-accentInfo border border-accentInfo/30'
                      : 'bg-surfaceHighlight/50 text-textMuted hover:bg-surfaceHighlight/80'
                  }`}
                >
                  {category.label} ({category.count})
                </button>
              ))}
            </div>
            
            <div className="space-y-4">
              {filteredFAQ.map((faq, index) => (
                <div key={index} className="border-b border-border pb-4 last:border-b-0">
                  <div className="flex items-start justify-between gap-4 mb-2">
                    <h4 className="font-medium text-textMain flex-1">{faq.question}</h4>
                    <span className={`px-2 py-1 rounded-full text-xs ${
                      faq.category === 'account' ? 'bg-accentInfo/20 text-accentInfo' :
                      faq.category === 'city' ? 'bg-accentWarn/20 text-accentWarn' :
                      faq.category === 'map' ? 'bg-accentSuccess/20 text-accentSuccess' :
                      faq.category === 'support' ? 'bg-accentError/20 text-accentError' :
                      'bg-accentMuted/20 text-accentMuted'
                    }`}>
                      {faq.category === 'account' ? 'Account' :
                       faq.category === 'city' ? 'Städte' :
                       faq.category === 'map' ? 'Karte' :
                       faq.category === 'support' ? 'Support' : 'Technik'}
                    </span>
                  </div>
                  <p className="text-textMuted text-sm leading-relaxed">{faq.answer}</p>
                </div>
              ))}
              
              {filteredFAQ.length === 0 && (
                <div className="text-center py-8 text-textMuted">
                  <p>Keine Fragen in dieser Kategorie gefunden.</p>
                  <p className="text-sm mt-2">Wähle eine andere Kategorie oder schaue dir alle Fragen an.</p>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Right Column - Quick Links */}
        <div className="lg:col-span-4 space-y-8">
          <div className="bg-gradient-to-br from-surface/50 to-surface/20 border border-border rounded-2xl p-8">
            <h3 className="text-lg font-semibold mb-6 text-textMain">Schnellzugriffe</h3>
            
            <div className="space-y-4">
              <button className="w-full text-left p-4 bg-surfaceHighlight/50 rounded-lg hover:bg-surfaceHighlight/80 transition-colors group">
                <div className="flex items-center justify-between">
                  <span className="font-medium text-textMain group-hover:text-accentInfo transition-colors">Download-Bereich</span>
                  <FallbackIcon className="w-4 h-4 text-textMuted group-hover:text-accentInfo transition-colors" />
                </div>
                <div className="text-xs text-textMuted mt-1">Alle benötigten Dateien und Tools</div>
              </button>
              
              <button className="w-full text-left p-4 bg-surfaceHighlight/50 rounded-lg hover:bg-surfaceHighlight/80 transition-colors group">
                <div className="flex items-center justify-between">
                  <span className="font-medium text-textMain group-hover:text-accentInfo transition-colors">Video-Tutorials</span>
                  <FallbackIcon className="w-4 h-4 text-textMuted group-hover:text-accentInfo transition-colors" />
                </div>
                <div className="text-xs text-textMuted mt-1">Schritt-für-Schritt Anleitungen</div>
              </button>
              
              <button className="w-full text-left p-4 bg-surfaceHighlight/50 rounded-lg hover:bg-surfaceHighlight/80 transition-colors group">
                <div className="flex items-center justify-between">
                  <span className="font-medium text-textMain group-hover:text-accentInfo transition-colors">Discord-Community</span>
                  <FallbackIcon className="w-4 h-4 text-textMuted group-hover:text-accentInfo transition-colors" />
                </div>
                <div className="text-xs text-textMuted mt-1">Direkter Support und Austausch</div>
              </button>
              
              <button className="w-full text-left p-4 bg-surfaceHighlight/50 rounded-lg hover:bg-surfaceHighlight/80 transition-colors group">
                <div className="flex items-center justify-between">
                  <span className="font-medium text-textMain group-hover:text-accentInfo transition-colors">Feedback & Bugs</span>
                  <FallbackIcon className="w-4 h-4 text-textMuted group-hover:text-accentInfo transition-colors" />
                </div>
                <div className="text-xs text-textMuted mt-1">Fehler melden oder Vorschläge machen</div>
              </button>
              
              <button className="w-full text-left p-4 bg-surfaceHighlight/50 rounded-lg hover:bg-surfaceHighlight/80 transition-colors group">
                <div className="flex items-center justify-between">
                  <span className="font-medium text-textMain group-hover:text-accentInfo transition-colors">Changelog</span>
                  <FallbackIcon className="w-4 h-4 text-textMuted group-hover:text-accentInfo transition-colors" />
                </div>
                <div className="text-xs text-textMuted mt-1">Änderungen und Updates</div>
              </button>
            </div>
          </div>

          {/* Kontakt */}
          <div className="bg-gradient-to-br from-surface/50 to-surface/20 border border-border rounded-2xl p-8">
            <h3 className="text-lg font-semibold mb-6 text-textMain">Kontakt</h3>
            
            <div className="space-y-4 text-textMuted">
              <div className="flex items-center gap-3">
                <FallbackIcon className="w-5 h-5 text-accentInfo" />
                <div>
                  <div className="font-medium text-textMain">Support-Email</div>
                  <div className="text-sm">support@tal-vollidion.de</div>
                </div>
              </div>
              
              <div className="flex items-center gap-3">
                <FallbackIcon className="w-5 h-5 text-accentSuccess" />
                <div>
                  <div className="font-medium text-textMain">Discord</div>
                  <div className="text-sm">tal-vollidion.de/discord</div>
                </div>
              </div>
              
              <div className="flex items-center gap-3">
                <FallbackIcon className="w-5 h-5 text-textMuted" />
                <div>
                  <div className="font-medium text-textMain">GitHub</div>
                  <div className="text-sm">github.com/ceratic/projekt_vollidion</div>
                </div>
              </div>
              
              <div className="flex items-center gap-3">
                <FallbackIcon className="w-5 h-5 text-accentWarn" />
                <div>
                  <div className="font-medium text-textMain">Öffnungszeiten</div>
                  <div className="text-sm">Mo-Do: 18:00-22:00 Uhr</div>
                  <div className="text-sm">Fr: 16:00-20:00 Uhr</div>
                </div>
              </div>
            </div>
          </div>

          {/* Letzte Aktualisierung */}
          <div className="bg-surface/30 border border-border rounded-2xl p-6 text-center">
            <div className="text-xs text-textMuted mb-2">Letzte Aktualisierung</div>
            <div className="text-sm font-mono text-textMain">2024-01-02</div>
            <div className="text-xs text-textMuted mt-2">Version 1.0.0</div>
            
            <div className="mt-4 pt-4 border-t border-border">
              <div className="text-xs text-textMuted mb-2">Nächste geplante Updates</div>
              <div className="space-y-1 text-xs">
                <div className="flex justify-between">
                  <span className="text-textMuted">Video-Tutorials</span>
                  <span className="text-accentWarn">Q1 2024</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-textMuted">API-Dokumentation</span>
                  <span className="text-accentWarn">Q2 2024</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-textMuted">Mobile App</span>
                  <span className="text-accentWarn">Q3 2024</span>
                </div>
              </div>
            </div>
          </div>

          {/* Statistiken */}
          <div className="bg-gradient-to-br from-surface/50 to-surface/20 border border-border rounded-2xl p-8">
            <h3 className="text-lg font-semibold mb-6 text-textMain">Statistiken</h3>
            
            <div className="space-y-4">
              <div className="flex justify-between items-center">
                <span className="text-textMuted">Dokumente</span>
                <span className="font-bold text-textMain">15</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-textMuted">FAQ-Einträge</span>
                <span className="font-bold text-textMain">8</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-textMuted">Aktive Nutzer</span>
                <span className="font-bold text-textMain">156</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-textMuted">Support-Tickets</span>
                <span className="font-bold text-textMain">23</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DocumentationPage;