import { Meta } from '@storybook/react-vite';
import {
  Chat,
  SessionMessages,
  ChatInput,
  SessionMessagePanel,
  SessionMessage,
  Session,
  AppBar
} from 'reachat';
import {
  fakeSessions,
  legacyConversationSessions,
  sessionWithSources,
  sessionsWithFiles,
  createSendMessageHandler
} from './examples';
import { useState } from 'react';
import Placeholder from './assets/placeholder.svg?react';
import PlaceholderDark from './assets/placeholder-dark.svg?react';
import ReachatLogo from './assets/logo.svg?react';
import IconSearch from './assets/search.svg?react';
import IconClose from './assets/close-fill.svg?react';
import { IconButton } from 'reablocks';

export default {
  title: 'Demos/Chat',
  component: Chat
} as Meta;

export const Compact = () => {
  const [activeId, setActiveId] = useState<string>(fakeSessions[0].id);
  const [sessions, setSessions] = useState<Session[]>([
    ...fakeSessions,
    ...sessionsWithFiles,
    ...sessionWithSources
  ]);

  return (
    <div
      className="dark:bg-gray-950 bg-white"
      style={{
        width: 350,
        height: 500,
        padding: 20,
        borderRadius: 5
      }}
    >
      <Chat
        viewType="chat"
        sessions={sessions}
        activeSessionId={activeId}
        onNewSession={() => {
          const newId = (sessions.length + 1).toLocaleString();
          setSessions([
            ...sessions,
            {
              id: newId,
              title: `New Session #${newId}`,
              createdAt: new Date(),
              updatedAt: new Date(),
              messages: []
            }
          ]);
          setActiveId(newId);
        }}
        onSelectSession={setActiveId}
        onDeleteSession={() => alert('delete!')}
        onSendMessage={createSendMessageHandler(setSessions, activeId)}
      >
        <SessionMessagePanel>
          <SessionMessages />
          <ChatInput />
        </SessionMessagePanel>
      </Chat>
    </div>
  );
};

export const FullScreen = () => {
  const [activeId, setActiveId] = useState<string>(fakeSessions[0].id);
  const [sessions, setSessions] = useState<Session[]>([
    ...fakeSessions,
    ...sessionsWithFiles,
    ...sessionWithSources
  ]);

  return (
    <div
      className="dark:bg-gray-950 bg-white"
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        padding: 20,
        margin: 20,
        borderRadius: 5
      }}
    >
      <Chat
        viewType="chat"
        sessions={sessions}
        activeSessionId={activeId}
        onNewSession={() => {
          const newId = (sessions.length + 1).toLocaleString();
          setSessions([
            ...sessions,
            {
              id: newId,
              title: `New Session #${newId}`,
              createdAt: new Date(),
              updatedAt: new Date(),
              messages: []
            }
          ]);
          setActiveId(newId);
        }}
        onSelectSession={setActiveId}
        onDeleteSession={() => alert('delete!')}
        onSendMessage={createSendMessageHandler(setSessions, activeId)}
      >
        <SessionMessagePanel>
          <SessionMessages />
          <ChatInput />
        </SessionMessagePanel>
      </Chat>
    </div>
  );
};

export const Empty = () => {
  const [activeId, setActiveId] = useState<string>();
  const [sessions, setSessions] = useState<Session[]>([]);

  return (
    <div
      className="dark:bg-gray-950 bg-white"
      style={{
        width: 350,
        height: 500,
        padding: 20,
        borderRadius: 5
      }}
    >
      <Chat
        viewType="chat"
        sessions={sessions}
        activeSessionId={activeId}
        onNewSession={() => {
          const newId = (sessions.length + 1).toLocaleString();
          setSessions([
            ...sessions,
            {
              id: newId,
              title: `New Session #${newId}`,
              createdAt: new Date(),
              updatedAt: new Date(),
              messages: []
            }
          ]);
          setActiveId(newId);
        }}
        onSelectSession={setActiveId}
        onDeleteSession={() => alert('delete!')}
        onSendMessage={createSendMessageHandler(setSessions, activeId)}
      >
        <SessionMessagePanel>
          <SessionMessages
            newSessionContent={
              <div className="flex flex-col gap-2 items-center justify-center h-full">
                <Placeholder className="h-[50%] block dark:hidden max-w-[100%]" />
                <PlaceholderDark className="h-[50%] hidden dark:block max-w-[100%]" />
                <p className="text-gray-500 max-w-[400px] text-center">
                  Welcome to Reachat, a UI library for effortlessly building and
                  customizing chat experiences with Tailwind.
                </p>
              </div>
            }
          >
            {messages =>
              messages.map((message, index) => (
                <SessionMessage
                  key={message.id}
                  message={message}
                  isLast={index === messages.length - 1}
                />
              ))
            }
          </SessionMessages>
          <ChatInput />
        </SessionMessagePanel>
      </Chat>
    </div>
  );
};

export const WithAppBar = () => {
  const [activeId, setActiveId] = useState<string>(fakeSessions[0].id);
  const [sessions, setSessions] = useState<Session[]>([
    ...fakeSessions,
    ...sessionsWithFiles,
    ...sessionWithSources
  ]);

  return (
    <div
      className="dark:bg-gray-950 bg-white"
      style={{
        width: 800,
        height: 600,
        padding: 20,
        borderRadius: 5
      }}
    >
      <Chat
        viewType="chat"
        sessions={sessions}
        activeSessionId={activeId}
        onNewSession={() => {
          const newId = (sessions.length + 1).toLocaleString();
          setSessions([
            ...sessions,
            {
              id: newId,
              title: `New Session #${newId}`,
              createdAt: new Date(),
              updatedAt: new Date(),
              messages: []
            }
          ]);
          setActiveId(newId);
        }}
        onSelectSession={setActiveId}
        onDeleteSession={() => alert('delete!')}
        onSendMessage={createSendMessageHandler(setSessions, activeId)}
      >
        <div className="flex flex-col h-full">
          <AppBar
            content={
              <div className="flex items-center justify-between w-full">
                <div className="flex-shrink-0">
                  <IconButton size="small" variant="outline" className='rounded-full p-3'>
                    <IconSearch className='w-4 h-4' />
                  </IconButton>
                </div>
                <div className="flex-grow flex justify-center items-center">
                  <ReachatLogo className="h-6 w-auto" />
                </div>
                <div className="flex-shrink-0">
                  <IconButton
                    variant="text"
                    size="small"
                    className='rounded-full p-3'
                  >
                    <IconClose className='w-4 h-4' />
                  </IconButton>
                </div>
              </div>
            }
          />
          <SessionMessagePanel>
            <SessionMessages />
            <ChatInput />
          </SessionMessagePanel>
        </div>
      </Chat>
    </div>
  );
};

/**
 * Backwards compatibility: sessions that still use the deprecated
 * `conversations` field are converted to messages internally, so legacy
 * data keeps rendering without any changes.
 */
export const LegacyConversations = () => {
  const [activeId, setActiveId] = useState<string>(
    legacyConversationSessions[0].id
  );
  const [sessions, setSessions] = useState<Session[]>(
    legacyConversationSessions
  );

  return (
    <div
      className="dark:bg-gray-950 bg-white"
      style={{
        width: 350,
        height: 500,
        padding: 20,
        borderRadius: 5
      }}
    >
      <Chat
        viewType="chat"
        sessions={sessions}
        activeSessionId={activeId}
        onSelectSession={setActiveId}
        onDeleteSession={() => alert('delete!')}
        onSendMessage={message =>
          setSessions(prev =>
            prev.map(session =>
              session.id === activeId
                ? {
                    ...session,
                    conversations: [
                      ...session.conversations,
                      {
                        id: Date.now().toString(),
                        question: message,
                        response: 'This is a response to your question.',
                        createdAt: new Date()
                      }
                    ]
                  }
                : session
            )
          )
        }
      >
        <SessionMessagePanel>
          <SessionMessages />
          <ChatInput />
        </SessionMessagePanel>
      </Chat>
    </div>
  );
};