Untitled

import React, { useState } from 'react';
import { useWizard } from '@/contexts/RFQWizardContext';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

// Placeholder function for GPT interaction
const generateTableOfContents = async (description: string): Promise<string[]> => {
  // This would be replaced with actual GPT API call
  return ['Introduction', 'Timeline and Guidelines', 'Scope of work'];
};

export default function Step2TableOfContents() {
  const { rfqDescription, tableOfContents, setTableOfContents } = useWizard();
  const [newSection, setNewSection] = useState('');
  const [editIndex, setEditIndex] = useState<number | null>(null);
  const [editValue, setEditValue] = useState('');

  const handleGenerate = async () => {
    const generatedTOC = await generateTableOfContents(rfqDescription);
    setTableOfContents(generatedTOC);
  };

  const handleAdd = () => {
    if (newSection.trim()) {
      setTableOfContents([...tableOfContents, newSection.trim()]);
      setNewSection('');
    }
  };

  const handleEdit = (index: number) => {
    setEditIndex(index); // Enable editing for the selected index
    setEditValue(tableOfContents[index]); // Pre-fill with the current value
  };

  const handleSave = (index: number) => {
    const updatedTOC = [...tableOfContents];
    updatedTOC[index] = editValue.trim(); // Update the section with the edited value
    setTableOfContents(updatedTOC);
    setEditIndex(null); // Exit edit mode
    setEditValue('');
  };

  const handleRemove = (index: number) => {
    setTableOfContents(tableOfContents.filter((_, i) => i !== index));
  };

  return (
    <div className='space-y-4'>
      <Button onClick={handleGenerate}>Generate Table of Contents</Button>
      <ul className='list-disc pl-6 space-y-2'>
        {tableOfContents.map((section, index) => (
          <li key={index} className='flex items-center justify-between'>
            {editIndex === index ? (
              // Render an input for the section being edited
              <Input value={editValue} onChange={(e) => setEditValue(e.target.value)} placeholder='Edit section title' className='flex-1' />
            ) : (
              <span>{section}</span>
            )}
            <div className='flex gap-2'>
              {editIndex === index ? (
                <Button size='sm' onClick={() => handleSave(index)}>
                  Save
                </Button>
              ) : (
                <Button size='sm' onClick={() => handleEdit(index)}>
                  Edit
                </Button>
              )}
              <Button variant='destructive' size='sm' onClick={() => handleRemove(index)}>
                Remove
              </Button>
            </div>
          </li>
        ))}
      </ul>
      <div className='flex items-end gap-2'>
        <div className='flex-1'>
          <Label htmlFor='new-section'>Add New Section</Label>
          <Input id='new-section' value={newSection} onChange={(e) => setNewSection(e.target.value)} placeholder='Enter new section title' />
        </div>
        <Button onClick={handleAdd}>Add</Button>
      </div>
    </div>
  );
}