'use client'

import React, { useState } from 'react'
import { SDKDocsSidebar } from '@/components/SDKDocsSidebar'
import { Copy, Check, Info, AlertTriangle } from 'lucide-react'

type PackageManager = 'npm' | 'yarn' | 'pnpm'

const installCommands: Record<PackageManager, string> = {
  npm: 'npm install @breakpilot/consent-sdk',
  yarn: 'yarn add @breakpilot/consent-sdk',
  pnpm: 'pnpm add @breakpilot/consent-sdk',
}

function CopyButton({ text }: { text: string }) {
  const [copied, setCopied] = useState(false)

  const handleCopy = async () => {
    await navigator.clipboard.writeText(text)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <button
      onClick={handleCopy}
      className="p-2 hover:bg-gray-700 rounded transition-colors"
      title="Kopieren"
    >
      {copied ? (
        <Check className="w-4 h-4 text-green-400" />
      ) : (
        <Copy className="w-4 h-4 text-gray-400" />
      )}
    </button>
  )
}

function CodeBlock({ code, language = 'typescript' }: { code: string; language?: string }) {
  return (
    <div className="relative bg-gray-900 rounded-lg overflow-hidden">
      <div className="absolute top-2 right-2">
        <CopyButton text={code} />
      </div>
      <pre className="p-4 text-sm text-gray-300 font-mono overflow-x-auto">
        <code>{code}</code>
      </pre>
    </div>
  )
}

function InfoBox({ type = 'info', children }: { type?: 'info' | 'warning'; children: React.ReactNode }) {
  const styles = {
    info: 'bg-blue-50 border-blue-200 text-blue-800',
    warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
  }
  const Icon = type === 'warning' ? AlertTriangle : Info

  return (
    <div className={`p-4 border rounded-lg ${styles[type]} flex items-start gap-3`}>
      <Icon className="w-5 h-5 shrink-0 mt-0.5" />
      <div className="text-sm">{children}</div>
    </div>
  )
}

export default function InstallationPage() {
  const [selectedPM, setSelectedPM] = useState<PackageManager>('npm')

  return (
    <div className="min-h-screen bg-gray-50 flex">
      <SDKDocsSidebar />

      <main className="flex-1 ml-64">
        <div className="max-w-4xl mx-auto px-8 py-12">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Installation</h1>
          <p className="text-lg text-gray-600 mb-8">
            Installieren Sie das Consent SDK in Ihrem Projekt.
          </p>

          {/* Package Installation */}
          <section className="mb-12">
            <h2 className="text-xl font-semibold text-gray-900 mb-4">NPM Package</h2>
            <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
              <div className="px-4 py-3 border-b border-gray-200 flex gap-1 bg-gray-50">
                {(['npm', 'yarn', 'pnpm'] as const).map((pm) => (
                  <button
                    key={pm}
                    onClick={() => setSelectedPM(pm)}
                    className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
                      selectedPM === pm
                        ? 'bg-white text-gray-900 shadow-sm border border-gray-200'
                        : 'text-gray-600 hover:text-gray-900'
                    }`}
                  >
                    {pm}
                  </button>
                ))}
              </div>
              <div className="bg-gray-900 px-4 py-4 flex items-center justify-between">
                <code className="text-green-400 font-mono text-sm">
                  $ {installCommands[selectedPM]}
                </code>
                <CopyButton text={installCommands[selectedPM]} />
              </div>
            </div>
          </section>

          {/* Framework-specific */}
          <section className="mb-12">
            <h2 className="text-xl font-semibold text-gray-900 mb-4">Framework-spezifische Imports</h2>

            <div className="space-y-6">
              <div>
                <h3 className="font-medium text-gray-900 mb-2">Vanilla JavaScript</h3>
                <CodeBlock
                  code={`import { ConsentManager } from '@breakpilot/consent-sdk';

const consent = new ConsentManager({
  apiEndpoint: 'https://api.example.com/consent',
  siteId: 'your-site-id',
});

await consent.init();`}
                />
              </div>

              <div>
                <h3 className="font-medium text-gray-900 mb-2">React</h3>
                <CodeBlock
                  code={`import { ConsentProvider, useConsent } from '@breakpilot/consent-sdk/react';

function App() {
  return (
    <ConsentProvider
      config={{
        apiEndpoint: 'https://api.example.com/consent',
        siteId: 'your-site-id',
      }}
    >
      <YourApp />
    </ConsentProvider>
  );
}`}
                />
              </div>

              <div>
                <h3 className="font-medium text-gray-900 mb-2">Vue 3</h3>
                <CodeBlock
                  code={`import { createApp } from 'vue';
import { ConsentPlugin } from '@breakpilot/consent-sdk/vue';

const app = createApp(App);

app.use(ConsentPlugin, {
  apiEndpoint: 'https://api.example.com/consent',
  siteId: 'your-site-id',
});`}
                />
              </div>
            </div>
          </section>

          {/* Script Blocking Setup */}
          <section className="mb-12">
            <h2 className="text-xl font-semibold text-gray-900 mb-4">Script Blocking einrichten</h2>
            <p className="text-gray-600 mb-4">
              Um Third-Party Scripts automatisch zu blockieren, verwenden Sie das{' '}
              <code className="px-1.5 py-0.5 bg-gray-100 rounded text-sm">data-consent</code> Attribut:
            </p>

            <CodeBlock
              language="html"
              code={`<!-- Analytics Script (blockiert bis Consent) -->
<script
  data-consent="analytics"
  data-src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
  type="text/plain"
></script>

<!-- Marketing Script (blockiert bis Consent) -->
<script data-consent="marketing" type="text/plain">
  fbq('init', 'YOUR_PIXEL_ID');
</script>

<!-- Embedded iFrame (blockiert bis Consent) -->
<iframe
  data-consent="social"
  data-src="https://www.youtube.com/embed/VIDEO_ID"
  width="560"
  height="315"
></iframe>`}
            />
          </section>

          {/* Requirements */}
          <section className="mb-12">
            <h2 className="text-xl font-semibold text-gray-900 mb-4">Systemvoraussetzungen</h2>
            <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                      Anforderung
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                      Minimum
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  <tr>
                    <td className="px-6 py-4 text-sm text-gray-900">Node.js</td>
                    <td className="px-6 py-4 text-sm text-gray-600">&gt;= 18.0.0</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 text-sm text-gray-900">React (optional)</td>
                    <td className="px-6 py-4 text-sm text-gray-600">&gt;= 17.0.0</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 text-sm text-gray-900">Vue (optional)</td>
                    <td className="px-6 py-4 text-sm text-gray-600">&gt;= 3.0.0</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 text-sm text-gray-900">TypeScript (optional)</td>
                    <td className="px-6 py-4 text-sm text-gray-600">&gt;= 4.7.0</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

          {/* Browser Support */}
          <section className="mb-12">
            <h2 className="text-xl font-semibold text-gray-900 mb-4">Browser-Unterstuetzung</h2>
            <InfoBox type="info">
              Das SDK unterstuetzt alle modernen Browser mit ES2017+ Unterstuetzung.
              Fuer aeltere Browser wird ein automatischer Fallback fuer Crypto-Funktionen bereitgestellt.
            </InfoBox>
            <div className="mt-4 bg-white rounded-xl border border-gray-200 overflow-hidden">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                      Browser
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                      Minimum Version
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  <tr>
                    <td className="px-6 py-4 text-sm text-gray-900">Chrome</td>
                    <td className="px-6 py-4 text-sm text-gray-600">&gt;= 60</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 text-sm text-gray-900">Firefox</td>
                    <td className="px-6 py-4 text-sm text-gray-600">&gt;= 55</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 text-sm text-gray-900">Safari</td>
                    <td className="px-6 py-4 text-sm text-gray-600">&gt;= 11</td>
                  </tr>
                  <tr>
                    <td className="px-6 py-4 text-sm text-gray-900">Edge</td>
                    <td className="px-6 py-4 text-sm text-gray-600">&gt;= 79 (Chromium)</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

          {/* Next Steps */}
          <section>
            <h2 className="text-xl font-semibold text-gray-900 mb-4">Naechste Schritte</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <a
                href="/sdk/consent/api-reference"
                className="p-4 bg-white rounded-xl border border-gray-200 hover:border-violet-300 hover:shadow-md transition-all"
              >
                <h3 className="font-medium text-gray-900">API Referenz</h3>
                <p className="text-sm text-gray-500 mt-1">
                  Vollstaendige Dokumentation aller Methoden und Konfigurationsoptionen.
                </p>
              </a>
              <a
                href="/sdk/consent/frameworks"
                className="p-4 bg-white rounded-xl border border-gray-200 hover:border-violet-300 hover:shadow-md transition-all"
              >
                <h3 className="font-medium text-gray-900">Framework Integration</h3>
                <p className="text-sm text-gray-500 mt-1">
                  Detaillierte Anleitungen fuer React, Vue und Angular.
                </p>
              </a>
            </div>
          </section>
        </div>
      </main>
    </div>
  )
}
