import React from 'react';
import { Tab, InteractiveCodePanel } from '../../../interactive-code-panel';

export const IntegrateGenieGuide: React.FC = () => {
    const tabs: Tab[] = [
        {
            id: 'verify-setup',
            title: '1. Verify Setup',
            icon: '✅',
            language: 'bash',
            content: ``,
            description: `Ensure your Unisphere workspace is properly set up before integrating Genie.`
        },
        {
            id: 'install-genie',
            title: '2. Install Genie Types',
            icon: '📦',
            language: 'bash',
            content: `npm i @unisphere/genie-core`,
            description: `Install the Genie core package to access Genie functionality.`
        },
        {
            id: 'configure-genie',
            title: '3. Load Genie',
            icon: '⚙️',
            language: 'typescript',
            content: `import { GenieSettings } from '@unisphere/genie-core';

// Extract settings to a const using the Genie type
const genieSettings: GenieSettings = {
  getSourceUrl: ({ entryId, startTime }) => {
    return ""; // return your entry URL
  },
  kalturaServerURI: "https://www.kaltura.com",
  ks: "",
  partnerId: "",
  uiconfId: "",
};

// Genie experience configuration
const genieExperience = {
  widgetName: "unisphere.widget.genie",
  runtimeName: "chat",
  settings: genieSettings,
  visuals: [
    {
      type: "page",
      target: "class-genie-container",
      settings: {},
    },
  ],
};`,
            description: `The settings are extracted to a const using the GenieSettings type for better type safety. Copy it to your workspace configuration.`
        },
        {
            id: 'render-genie',
            title: '4. Render Genie',
            icon: '🚀',
            language: 'html',
            content: `
<style>
    :root {
      --host-header-height: 4rem;
    }

    body {
    margin: 0;
    }

    .host-root-container {
    width: 100vw;
    height: calc(100vh - var(--host-header-height));
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: var(--host-header-height);
    }

    .host-root-header {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    height: var(--host-header-height);
    width: 100%;
    background: navy;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    }

    .host-root-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    #class-genie-container {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: calc(100vh - var(--host-header-height));
    }
</style>


<body>
    <div class="host-root-container">
        <header class="host-root-header">Genie Expo</header>
        <main class="host-root-content">
            <div id="class-genie-container"></div>
        </main>
    </div>
</body>
`,
            description: `Copy the HTML code to your application. Make sure you style as shown above`
        },
    ];

    return (
        <>
            <style>{`
        @media (max-width: 768px) {
          .tab-navigation {
            flex-direction: column !important;
          }
          .tab-navigation button {
            flex: none !important;
            border-bottom: 1px solid var(--ifm-color-emphasis-300) !important;
            border-right: none !important;
          }
          .tab-navigation button:last-child {
            border-bottom: none !important;
          }
        }
      `}</style>
            <InteractiveCodePanel
                title="🧞 Integrate Genie Experience"
                description="Complete guide for integrating Genie AI assistant into your Unisphere application"
                tabs={tabs}
                defaultTab="verify-setup"
                defaultExpanded={false}
                showCopyButton={true}
            />
        </>
    );
};