import { useState } from 'react';
import { Chat } from './Chat';
import { I18nProvider } from '../../../providers/I18nProvider';

export default {
  title: 'Views/Chat',
  component: Chat,
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <I18nProvider>
        <div className="h-[600px]">
          <Story />
        </div>
      </I18nProvider>
    ),
  ],
};

export const UserChat = {
  render: () => {
    const [messages, setMessages] = useState([
      {
        sender: 'user',
        text: 'Hola, ¿cómo estás?',
        timestamp: new Date(),
      },
      {
        sender: 'other',
        text: '¡Hola! Estoy bien, gracias. ¿Y tú?',
        timestamp: new Date(),
      },
    ]);

    const handleSend = (text) => {
      setMessages([
        ...messages,
        {
          sender: 'user',
          text,
          timestamp: new Date(),
        },
      ]);
    };

    return (
      <Chat
        mode="user"
        messages={messages}
        onSendMessage={handleSend}
      />
    );
  },
};

export const AIChat = {
  render: () => {
    const [messages, setMessages] = useState([
      {
        sender: 'user',
        text: '¿Qué es React?',
        timestamp: new Date(Date.now() - 60000),
      },
      {
        sender: 'ai',
        text: 'React es una biblioteca de JavaScript para construir interfaces de usuario. Fue desarrollada por Facebook y permite crear componentes reutilizables.',
        timestamp: new Date(Date.now() - 30000),
      },
    ]);

    const handleSend = (text) => {
      const newMessage = {
        sender: 'user',
        text,
        timestamp: new Date(),
      };
      setMessages([...messages, newMessage]);

      // Simular respuesta de IA
      setTimeout(() => {
        setMessages((prev) => [
          ...prev,
          {
            sender: 'ai',
            text: 'Esta es una respuesta simulada de la IA.',
            timestamp: new Date(),
          },
        ]);
      }, 1000);
    };

    return (
      <Chat
        mode="ai"
        messages={messages}
        onSendMessage={handleSend}
      />
    );
  },
};

export const EmptyChat = {
  args: {
    mode: 'user',
    messages: [],
  },
};

export const LoadingState = {
  args: {
    mode: 'ai',
    messages: [
      {
        sender: 'user',
        text: 'Hola, ¿puedes ayudarme?',
        timestamp: new Date(),
      },
    ],
    isLoading: true,
  },
};

export const LongConversation = {
  render: () => {
    const [messages] = useState([
      { sender: 'user', text: 'Hola', timestamp: new Date() },
      { sender: 'ai', text: '¡Hola! ¿En qué puedo ayudarte?', timestamp: new Date() },
      { sender: 'user', text: 'Necesito información sobre el proyecto', timestamp: new Date() },
      { sender: 'ai', text: 'Claro, puedo ayudarte con eso. ¿Qué información específica necesitas?', timestamp: new Date() },
      { sender: 'user', text: 'Quiero saber sobre los componentes disponibles', timestamp: new Date() },
      { sender: 'ai', text: 'Tenemos varios componentes disponibles: Button, Input, Card, Chat, y muchos más. ¿Te gustaría ver ejemplos de alguno en particular?', timestamp: new Date() },
    ]);

    return (
      <Chat
        mode="ai"
        messages={messages}
        onSendMessage={() => {}}
      />
    );
  },
};

