import { Thread } from '@/components/assistant-ui/thread';
import { PersonaRuntimeProvider, PersonaConsoleLogger, Session } from '@applica-software-guru/persona-chat-sdk';
import { useMemo } from 'react';
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
import { ThreadListSidebar } from '@/components/assistant-ui/threadlist-sidebar';
import { SunIcon, MoonIcon, RefreshCcwDot } from 'lucide-react';
import { useColorScheme } from './hooks/theme';

const logger = new PersonaConsoleLogger();

function generateSID() {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let sid = '';
  for (let i = 0; i < 16; i++) {
    sid += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return sid;
}

function getQueryParam(param: string): string | null {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(param);
}

function Chat() {
  const sidebar = getQueryParam('sidebar') === 'true';
  const enableAttachments = getQueryParam('enableAttachments') !== 'false';
  const agentId = getQueryParam('agentId');
  const userId = getQueryParam('userId') || 'anonymous';
  const apiKey = getQueryParam('apiKey');
  const sid = getQueryParam('sid');

  const session = useMemo((): Session => {
    if (sid) {
      return sid;
    }
    return generateSID();
  }, [sid]);

  return (
    <PersonaRuntimeProvider
      // dev
      // baseUrl="http://localhost:8000"
      logger={logger}
      context={{
        data: {
          username: 'Roberto',
          userAgent: 'Playground Client v1.0',
        },
      }}
      tools={[]}
      protocols={{
        rest: true,
        webrtc: false,
        websocket: true,
      }}
      session={session}
      apiKey={apiKey!}
      userId={userId}
      agentId={agentId!}
      enableAttachments={enableAttachments}
      threads={sidebar}
      onThreadCreate={(threadId) => {
        logger.info('Thread created:', threadId);
      }}
      onThreadSwitch={(threadId) => {
        logger.info('Switched to thread:', threadId);
      }}
      onThreadRename={(threadId, newTitle) => {
        logger.info('Thread renamed:', threadId, newTitle);
      }}
      onThreadArchive={(threadId) => {
        logger.info('Thread archived:', threadId);
      }}
      onThreadDelete={(threadId) => {
        logger.info('Thread deleted:', threadId);
      }}
    >
      {sidebar ? (
        <SidebarProvider>
          <div className="flex h-dvh w-full">
            <ThreadListSidebar />
            <SidebarInset>
              <SidebarTrigger className="absolute top-4 left-4" />
              <ThemeToggle />
              <Thread />
            </SidebarInset>
          </div>
        </SidebarProvider>
      ) : (
        <div className="relative h-dvh w-full">
          <ThemeToggle />
          <Thread />
        </div>
      )}
    </PersonaRuntimeProvider>
  );
}

function ThemeToggle() {
  const { theme, toggle } = useColorScheme();
  const title = theme === 'auto' ? 'System theme (auto)' : theme === 'dark' ? 'Dark mode' : 'Light mode';

  return (
    <button
      onClick={toggle}
      aria-label={`Toggle theme, current: ${title}`}
      title={`Toggle theme, current: ${title}`}
      type="button"
      className="absolute top-4 right-4 z-50 pointer-events-auto inline-flex h-10 w-10 items-center justify-center rounded-full border border-border bg-card p-2 text-foreground shadow-sm hover:cursor-pointer"
    >
      {theme === 'dark' ? <MoonIcon /> : theme === 'light' ? <SunIcon /> : <RefreshCcwDot />}
    </button>
  );
}

export { Chat };