// frontend/src/components/Editor/EditorPanel.jsx
import React from 'react';
import { DndContext, closestCenter, DragEndEvent } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
import SectionEditor from './SectionEditor';

const EditorPanel = ({ data, onChange, sectionsOrder, onReorderSections }) => {
  const handleDragEnd = (event) => {
    const { active, over } = event;
    if (active.id !== over.id) {
      const oldIndex = sectionsOrder.indexOf(active.id);
      const newIndex = sectionsOrder.indexOf(over.id);
      onReorderSections(arrayMove(sectionsOrder, oldIndex, newIndex));
    }
  };
  
  const updatePersonalInfo = (field, value) => {
    onChange({ ...data, personal: { ...data.personal, [field]: value } });
  };
  
  const updateSection = (section, value) => {
    onChange({ ...data, [section]: value });
  };
  
  return (
    <div className="w-1/2 bg-white border-r border-gray-200 overflow-y-auto p-6">
      <div className="max-w-2xl mx-auto">
        <div className="mb-8">
          <h2 className="text-2xl font-bold mb-4">Personal Information</h2>
          <div className="space-y-4">
            <input 
              type="text" 
              placeholder="Full Name"
              value={data.personal.name}
              onChange={(e) => updatePersonalInfo('name', e.target.value)}
              className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
            />
            <input 
              type="text" 
              placeholder="Professional Title"
              value={data.personal.title}
              onChange={(e) => updatePersonalInfo('title', e.target.value)}
              className="w-full px-4 py-2 border rounded-lg"
            />
            <div className="grid grid-cols-2 gap-4">
              <input type="email" placeholder="Email" value={data.personal.email} onChange={(e) => updatePersonalInfo('email', e.target.value)} className="px-4 py-2 border rounded-lg" />
              <input type="tel" placeholder="Phone" value={data.personal.phone} onChange={(e) => updatePersonalInfo('phone', e.target.value)} className="px-4 py-2 border rounded-lg" />
            </div>
          </div>
        </div>
        
        <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
          <SortableContext items={sectionsOrder} strategy={verticalListSortingStrategy}>
            {sectionsOrder.map((section) => (
              <SectionEditor 
                key={section}
                type={section}
                data={data[section]}
                onChange={(value) => updateSection(section, value)}
              />
            ))}
          </SortableContext>
        </DndContext>
      </div>
    </div>
  );
};

export default EditorPanel;