'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 SmartWebForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phoneNumber: '',
    address: ''
  });
  const [isLoading, setIsLoading] = useState(false);
  const [inputText, setInputText] = useState(`Subject: Request for Information Update

Dear Support Team,

My name is Jonathan Smith, and I have recently undergone a change of address and contact details. I would appreciate it if you could update your records accordingly. I live at 4321 West Palm Drive, Apartment 202, Springfield, CA 62704. You can reach me at +1-555-0199 and jonathan.smith@example.com. Additionally, there was an issue with the last transaction I attempted. It seems there was a double charge, and I would like to request a refund for the extra amount charged on my account.

Thank you for addressing these concerns promptly.

Best regards,

Jonathan Smith`);

  const handleInputChange = (e: any) => {
    setInputText(e.target.value);
  };

  const handleFormChange = (e: any) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const extractDetails = async () => {
    try {
      setIsLoading(true);
      const response = await client?.getCompletion({
        model: 'gpt-3.5-turbo',
        messages: [{ role: 'system', content: `Please extract and organize the primary personal and contact details from the text provided in json format. Focus on identifying and listing the following key information: full name (name), primary email address (email), primary phone number (phoneNumber), and complete residential address (address). Ignore any additional information such as secondary contact details or contextual text about other issues like transactions. Use the following text: ${inputText}` }],
      });

      if (response && response.choices && response.choices.length > 0) {
        const details = JSON.parse(response.choices[0].message.content);
        console.log("Extracted details:", details);
        setFormData({
          name: details.name || '',
          email: details.email || '',
          phoneNumber: details.phoneNumber || '',
          address: details.address || ''
        });
      }
    } catch (error) {
      console.error("Error extracting details:", error);
    }
    setIsLoading(false);
  };

  return (
    <div className="p-4 max-w-md mx-auto bg-white rounded-xl shadow-lg flex flex-col border">
      <textarea
        value={inputText}
        onChange={handleInputChange}
        className="mb-4 p-2 h-32 border rounded focus:outline-none focus:ring focus:border-blue-300"
        placeholder="Paste text here that includes your name, email, phone number, and address..."
      ></textarea>
      <button onClick={extractDetails} className="mb-4 px-4 py-2 bg-gray-800 text-white rounded hover:bg-blue-600 focus:outline-none">
        {
          isLoading ? 'Extracting...' : 'Extract Details'
        }
      </button>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleFormChange}
        className="mb-2 p-2 border rounded focus:outline-none focus:ring focus:border-blue-300"
        placeholder="Name"
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleFormChange}
        className="mb-2 p-2 border rounded focus:outline-none focus:ring focus:border-blue-300"
        placeholder="Email"
      />
      <input
        type="text"
        name="phoneNumber"
        value={formData.phoneNumber}
        onChange={handleFormChange}
        className="mb-2 p-2 border rounded focus:outline-none focus:ring focus:border-blue-300"
        placeholder="Phone Number"
      />
      <textarea
        name="address"
        value={formData.address}
        onChange={handleFormChange}
        className="mb-2 p-2 border rounded focus:outline-none focus:ring focus:border-blue-300"
        placeholder="Address"
      ></textarea>
    </div>
  );
};

function ChatActionStory() {
  return (
    <div>
      <h1>Hello</h1>
      <SmartWebForm />
    </div>
  );
}

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

export default meta;
type Story = StoryObj<typeof ChatActionStory>;

export const FirstStory: Story = {
  // harded code values for now 😬
  args: {},
};