'use client';

import { useState} from 'react';
import type { Meta, StoryObj } from "@storybook/react";
import { getPublicClient } from "../api";

const client = getPublicClient('f5d86791-d513-48de-8fd2-b6dbdd4abe9b');

const TodoListGenerator = () => {
  const [task, setTask] = useState('');
  const [todos, setTodos] = useState([]) as any;
  const [inputError, setInputError] = useState('');
  const [newTaskText, setNewTaskText] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleTaskChange = (e: any) => {
    setTask(e.target.value);
    setInputError('');  // Reset error message when user starts typing again.
  };

  const handleNewTaskChange = (e: any) => {
    setNewTaskText(e.target.value);
  };

  const addNewTask = () => {
    if (!newTaskText.trim()) {
      return; // Don't add empty tasks
    }
    const newTodo = { id: todos.length, text: newTaskText, completed: false };
    setTodos([...todos, newTodo]);
    setNewTaskText(''); // Reset input after adding
  };

  const generateTodoList = async () => {
    if (!task.trim()) {
      setInputError('Please enter a valid task description.');
      return;
    }

    setIsLoading(true);
    try {
      const response = await client?.getCompletion({
        model: 'gpt-3.5-turbo',
        messages: [{ role: 'system', content: `Generate a to-do list for the task: ${task}` }],
      });

      if (response && response.choices && response.choices.length > 0) {
        const todoItems = response.choices[0].message.content.split('\n').filter((item: any) => item.trim() !== '');
        setTodos((oldTodos: any) => [...oldTodos, ...todoItems.map((item: any, index: number) => ({ id: todos.length + index, text: item, completed: false }))]);
      }
    } catch (error) {
      console.error("Error generating to-do list:", error);
      setInputError('Failed to generate to-do list. Please try again.');
    }
    setIsLoading(false);
  };

  const toggleTodoCompletion = (id: any) => {
    setTodos(todos.map((todo: any) =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  const removeTodo = (id: any) => {
    setTodos(todos.filter((todo: any) => todo.id !== id));
  };

  return (
    <div className="p-4 max-w-md mx-auto bg-white rounded-xl shadow-lg flex flex-col border">
      <input
        type="text"
        value={task}
        onChange={handleTaskChange}
        className="mb-2 p-2 border rounded focus:outline-none focus:ring focus:border-blue-300"
        placeholder="Enter a task description..."
      />
      <button onClick={generateTodoList} className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none">
        {isLoading ? 'Loading...' : 'Generate To Do List'}
      </button>
      {inputError && <p className="text-red-500 text-sm mb-2">{inputError}</p>}
      <input
        type="text"
        value={newTaskText}
        onChange={handleNewTaskChange}
        className="mb-2 p-2 border rounded focus:outline-none focus:ring focus:border-blue-300"
        placeholder="Add a new task..."
      />
      <button onClick={addNewTask} className="mb-4 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 focus:outline-none">
        Add Task
      </button>
      <ul className="list-none pl-0">
        {todos.map((todo: any) => (
          <li key={todo.id} className={`mb-2 flex items-center ${todo.completed ? 'text-gray-400' : 'text-gray-900'}`}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodoCompletion(todo.id)}
              className="mr-2 align-middle"
            />
            {todo.text}
            <button onClick={() => removeTodo(todo.id)} className="ml-auto text-red-500 hover:text-red-700 focus:outline-none">
              Remove
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

function TextCompleterStory() {
  return (
    <div>
      <h1
        className="text-2xl font-bold"
      >To Do List Generator</h1>
      <TodoListGenerator />
    </div>
  );
}

//👇 This default export determines where your story goes in the story list
const meta: Meta<typeof TextCompleterStory> = {
  component: TextCompleterStory,
};

export default meta;

export const DefaultStory: StoryObj<typeof TextCompleterStory> = {
  // harded code values for now 😬
  args: {},
};