'use client'

import { motion } from 'framer-motion'
import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer'
import { useState, useEffect } from 'react'

export default function Wiki() {
  const [showFullPage, setShowFullPage] = useState(true)
  const [iframeError, setIframeError] = useState(false)
  
  // Wiki URL - konfigurierbar über Umgebungsvariable, Standard: localhost:3033
  const wikiUrl = process.env.NEXT_PUBLIC_WIKI_URL || 'http://localhost:3033'

  useEffect(() => {
    // Reset error when URL changes
    setIframeError(false)
  }, [wikiUrl])

  if (showFullPage) {
    // Vollständige Wiki-Seite als iframe
    return (
      <>
        <Navigation />
        <main style={{ paddingTop: '52px', height: 'calc(100vh - 52px)', display: 'flex', flexDirection: 'column' }}>
          <div style={{ 
            position: 'fixed', 
            top: '52px', 
            left: 0, 
            right: 0, 
            background: 'rgba(0, 0, 0, 0.9)', 
            padding: '10px 20px', 
            display: 'flex', 
            justifyContent: 'space-between', 
            alignItems: 'center',
            zIndex: 999,
            borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
          }}>
            <h2 style={{ fontSize: '18px', fontWeight: '600', margin: 0 }}>doing-it Wiki</h2>
            <button
              onClick={() => setShowFullPage(false)}
              className="btn btn-secondary"
              style={{ padding: '8px 20px', fontSize: '14px' }}
            >
              Zur Übersicht
            </button>
          </div>
          {iframeError ? (
            <div style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              height: '100%',
              padding: '40px',
              marginTop: '50px',
              textAlign: 'center'
            }}>
              <h2 style={{ fontSize: '24px', fontWeight: '600', marginBottom: '20px' }}>
                Wiki konnte nicht geladen werden
              </h2>
              <p style={{ color: 'var(--color-text-secondary)', marginBottom: '30px' }}>
                Bitte versuchen Sie es später erneut oder kontaktieren Sie den Support.
              </p>
              <button
                onClick={() => {
                  setIframeError(false)
                  window.location.reload()
                }}
                className="btn btn-primary"
              >
                Seite neu laden
              </button>
            </div>
          ) : (
            <iframe
              src={wikiUrl}
              style={{
                width: '100%',
                height: '100%',
                border: 'none',
                marginTop: '50px',
                background: '#fff'
              }}
              title="doing-it Wiki"
              onError={() => setIframeError(true)}
              onLoad={(e) => {
                // Check if iframe loaded successfully
                try {
                  const iframe = e.target as HTMLIFrameElement
                  if (iframe.contentDocument?.location.href === 'about:blank') {
                    // Iframe might have error
                    setTimeout(() => setIframeError(true), 3000)
                  }
                } catch (err) {
                  // Cross-origin - can't check, assume it's working
                }
              }}
            />
          )}
        </main>
      </>
    )
  }

  // Übersichtsseite mit Option zum Öffnen des Wikis
  return (
    <>
      <Navigation />
      <main>
        <section className="hero">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="hero-content"
          >
            <h1 className="hero-title">Wiki</h1>
            <p className="hero-subtitle">
              Unser Wissensbereich mit nützlichen Informationen<br />
              rund um IT-Weiterbildung und Schulungen
            </p>
            <div className="hero-buttons" style={{ marginTop: '40px' }}>
              <button 
                onClick={() => setShowFullPage(true)}
                className="btn btn-primary"
                style={{ cursor: 'pointer' }}
              >
                Wiki öffnen
              </button>
              <a 
                href={wikiUrl} 
                target="_blank" 
                rel="noopener noreferrer"
                className="btn btn-secondary"
              >
                In neuem Tab öffnen
              </a>
            </div>
          </motion.div>
        </section>

        <section className="features" style={{ paddingTop: '80px' }}>
          <div className="container">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
            >
              <h2 style={{ fontSize: '48px', fontWeight: '600', marginBottom: '40px', textAlign: 'center' }}>
                Was finden Sie im Wiki?
              </h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '30px', marginTop: '60px' }}>
                <div className="feature-card">
                  <h3 style={{ fontSize: '24px', fontWeight: '600', marginBottom: '16px' }}>
                    IT-Grundlagen
                  </h3>
                  <p style={{ color: 'var(--color-text-secondary)', lineHeight: '1.6' }}>
                    Umfassende Informationen zu grundlegenden IT-Konzepten, Technologien und Best Practices.
                  </p>
                </div>
                <div className="feature-card">
                  <h3 style={{ fontSize: '24px', fontWeight: '600', marginBottom: '16px' }}>
                    Schulungsmethoden
                  </h3>
                  <p style={{ color: 'var(--color-text-secondary)', lineHeight: '1.6' }}>
                    Moderne Ansätze und bewährte Methoden für effektive IT-Schulungen und Weiterbildungen.
                  </p>
                </div>
                <div className="feature-card">
                  <h3 style={{ fontSize: '24px', fontWeight: '600', marginBottom: '16px' }}>
                    Ressourcen
                  </h3>
                  <p style={{ color: 'var(--color-text-secondary)', lineHeight: '1.6' }}>
                    Sammlung von nützlichen Tools, Materialien und weiterführenden Ressourcen.
                  </p>
                </div>
              </div>
            </motion.div>
          </div>
        </section>

        <section className="features" style={{ paddingTop: '80px', paddingBottom: '120px' }}>
          <div className="container">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              style={{ textAlign: 'center' }}
            >
              <h3 style={{ fontSize: '32px', fontWeight: '600', marginBottom: '20px' }}>
                Bereit loszulegen?
              </h3>
              <p style={{ color: 'var(--color-text-secondary)', fontSize: '20px', marginBottom: '40px' }}>
                Klicken Sie auf den Button oben, um direkt zum Wiki zu gelangen.
              </p>
            </motion.div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}