"use client";

import React, { useState } from "react";
import {
  ChatbotWidget,
  LanguageSelector,
  I18nProvider,
  useTheme,
  ThemeName,
  SupportedLanguage,
} from "./index";

// Theme selector component
function ThemeSelector() {
  const { currentTheme, changeTheme, availableThemes } = useTheme();

  return (
    <select
      value={currentTheme}
      onChange={(e) => changeTheme(e.target.value as ThemeName)}
      className="
        bg-[var(--chatbot-surface)] 
        text-[var(--chatbot-text-primary)]
        border border-[var(--chatbot-border)]
        rounded-[var(--chatbot-radius-md)]
        px-[var(--chatbot-spacing-sm)]
        py-[var(--chatbot-spacing-xs)]
        text-[var(--chatbot-font-size-sm)]
        focus:border-[var(--chatbot-primary)]
        focus:ring-2 
        focus:ring-[var(--chatbot-primary)] 
        focus:ring-opacity-50
        transition-all 
        duration-200
      "
    >
      {availableThemes.map((theme) => (
        <option key={theme} value={theme}>
          {theme.charAt(0).toUpperCase() + theme.slice(1)} Theme
        </option>
      ))}
    </select>
  );
}

// Demo component without providers
function ChatbotDemoInternal() {
  const [apiConfig, setApiConfig] = useState({
    apiBaseUrl: process.env.NEXT_PUBLIC_API_URL || "/api",
    apiKey: process.env.NEXT_PUBLIC_API_KEY || "",
  });

  return (
    <div className="min-h-screen bg-[var(--chatbot-background)] p-8">
      <div className="max-w-4xl mx-auto space-y-8">
        <header className="text-center space-y-4">
          <h1 className="text-4xl font-bold text-[var(--chatbot-text-primary)]">
            Chatbot Demo
          </h1>
          <p className="text-[var(--chatbot-text-secondary)]">
            Test the chatbot with different themes and languages
          </p>
        </header>

        {/* Controls */}
        <div className="bg-[var(--chatbot-surface)] rounded-[var(--chatbot-radius-lg)] p-6 shadow-[var(--chatbot-shadow)]">
          <h2 className="text-xl font-semibold text-[var(--chatbot-text-primary)] mb-4">
            Settings
          </h2>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <label className="block text-sm font-medium text-[var(--chatbot-text-primary)]">
                Language
              </label>
              <LanguageSelector
                showFlags={true}
                showNativeNames={true}
                className="w-full"
              />
            </div>

            <div className="space-y-2">
              <label className="block text-sm font-medium text-[var(--chatbot-text-primary)]">
                Theme
              </label>
              <ThemeSelector />
            </div>
          </div>
        </div>

        {/* Feature showcase */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div className="bg-[var(--chatbot-surface)] rounded-[var(--chatbot-radius-lg)] p-6 shadow-[var(--chatbot-shadow)]">
            <h3 className="text-lg font-semibold text-[var(--chatbot-text-primary)] mb-2">
              Multi-language Support
            </h3>
            <p className="text-[var(--chatbot-text-secondary)] text-sm">
              The chatbot supports Korean, English, Japanese, and Arabic with
              proper RTL support.
            </p>
          </div>

          <div className="bg-[var(--chatbot-surface)] rounded-[var(--chatbot-radius-lg)] p-6 shadow-[var(--chatbot-shadow)]">
            <h3 className="text-lg font-semibold text-[var(--chatbot-text-primary)] mb-2">
              Theme System
            </h3>
            <p className="text-[var(--chatbot-text-secondary)] text-sm">
              Switch between default, dark, and compact themes. All components
              adapt automatically.
            </p>
          </div>

          <div className="bg-[var(--chatbot-surface)] rounded-[var(--chatbot-radius-lg)] p-6 shadow-[var(--chatbot-shadow)]">
            <h3 className="text-lg font-semibold text-[var(--chatbot-text-primary)] mb-2">
              RAG Integration
            </h3>
            <p className="text-[var(--chatbot-text-secondary)] text-sm">
              Connected to RAG-based AI system for contextual responses with
              document search.
            </p>
          </div>
        </div>

        {/* Instructions */}
        <div className="bg-[var(--chatbot-surface)] rounded-[var(--chatbot-radius-lg)] p-6 shadow-[var(--chatbot-shadow)]">
          <h2 className="text-xl font-semibold text-[var(--chatbot-text-primary)] mb-4">
            How to Test
          </h2>
          <ul className="space-y-2 text-[var(--chatbot-text-secondary)]">
            <li>• Click the floating chat button in the bottom-right corner</li>
            <li>• Try switching languages and see the interface update</li>
            <li>• Switch themes to see the color scheme change</li>
            <li>• Test suggested questions in different languages</li>
            <li>• Try typing in different languages to test RTL support</li>
          </ul>
        </div>
      </div>

      {/* Chatbot Widget */}
      <ChatbotWidget
        apiBaseUrl={apiConfig.apiBaseUrl}
        apiKey={apiConfig.apiKey}
        position="bottom-right"
        buttonSize="lg"
        enableSuggestedQuestions={true}
        enableTypingIndicator={true}
        enableRetry={true}
        enableLanguageSelector={false}
        enableThemeToggle={false}
        onError={(error) => {
          console.error("Chatbot error:", error);
        }}
        onMessageSent={(message) => {
          console.log("Message sent:", message);
        }}
        onMessageReceived={(message) => {
          console.log("Message received:", message);
        }}
      />
    </div>
  );
}

// Main demo component with providers
export function ChatbotDemo({
  defaultLanguage = "en",
  defaultTheme = "default" as ThemeName,
}: {
  defaultLanguage?: SupportedLanguage;
  defaultTheme?: ThemeName;
}) {
  return (
    <I18nProvider
      defaultLanguage={defaultLanguage}
      enableAutoDetect={!defaultLanguage}
      enablePersistence={true}
    >
      <div data-chatbot>
        <ChatbotDemoInternal />
      </div>
    </I18nProvider>
  );
}

export default ChatbotDemo;