App.jsx

import React, { useState } from "react";
import { DndProvider, useDrag, useDrop } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

const ItemTypes = {
  COMPONENT: "component",
};

// Predefined draggable components with default props
const availableComponents = [
  {
    id: "header",
    name: "Header",
    defaultProps: { text: "Your Header Here" },
  },
  {
    id: "paragraph",
    name: "Paragraph",
    defaultProps: { text: "Your paragraph text here." },
  },
  {
    id: "image",
    name: "Image",
    defaultProps: {
      src: "https://via.placeholder.com/300x150",
      alt: "Placeholder Image",
    },
  },
  {
    id: "button",
    name: "Button",
    defaultProps: { text: "Click me", url: "https://example.com" },
  },
];

// Draggable item in sidebar
const DraggableComponent = ({ component }) => {
  const [, drag] = useDrag(() => ({
    type: ItemTypes.COMPONENT,
    item: component,
  }));

  return (
    <div
      ref={drag}
      className="p-3 mb-3 bg-white rounded shadow cursor-move hover:bg-blue-100"
    >
      {component.name}
    </div>
  );
};

// Canvas drop area + list of placed components
const DropZone = ({
  components,
  onDrop,
  selectedId,
  setSelectedId,
  onUpdateComponent,
  onRemoveComponent,
}) => {
  const [, drop] = useDrop(() => ({
    accept: ItemTypes.COMPONENT,
    drop: (item) => onDrop(item),
  }));

  return (
    <div
      ref={drop}
      className="min-h-[500px] p-6 border-2 border-dashed border-gray-400 rounded bg-gray-50"
    >
      {components.length === 0 ? (
        <p className="text-center text-gray-500">
          Drag components here to build your site
        </p>
      ) : (
        components.map((comp, idx) => {
          const isSelected = comp.id === selectedId;
          return (
            <div
              key={comp.id}
              onClick={() => setSelectedId(comp.id)}
              className={`mb-6 p-4 rounded cursor-pointer ${
                isSelected ? "border-2 border-blue-600 bg-blue-50" : "border"
              }`}
            >
              {/* Render component preview */}
              {comp.type === "header" && (
                <h1 className="text-3xl font-bold">{comp.props.text}</h1>
              )}
              {comp.type === "paragraph" && (
                <p className="text-base">{comp.props.text}</p>
              )}
              {comp.type === "image" && (
                <img
                  src={comp.props.src}
                  alt={comp.props.alt}
                  className="max-w-full h-auto"
                />
              )}
              {comp.type === "button" && (
                <a
                  href={comp.props.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
                >
                  {comp.props.text}
                </a>
              )}
              {/* Remove button */}
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  onRemoveComponent(comp.id);
                }}
                className="mt-2 text-sm text-red-600 hover:underline"
              >
                Remove
              </button>
            </div>
          );
        })
      )}
    </div>
  );
};

// Form editor to update selected component props
const ComponentEditor = ({ component, onUpdate }) => {
  if (!component) return <div>Select a component to edit its properties</div>;

  const { type, props } = component;

  // Handlers to update different props based on type
  const handleChange = (key, value) => {
    onUpdate({ ...component, props: { ...props, [key]: value } });
  };

  return (
    <div className="bg-white p-6 rounded shadow space-y-4">
      <h2 className="text-xl font-semibold mb-4">Edit {type} Properties</h2>

      {/* Header & Paragraph: only text */}
      {(type === "header" || type === "paragraph") && (
        <>
          <label className="block font-medium mb-1">Text</label>
          <textarea
            className="w-full border rounded p-2"
            rows={type === "header" ? 2 : 4}
            value={props.text}
            onChange={(e) => handleChange("text", e.target.value)}
          />
        </>
      )}

      {/* Image: src and alt */}
      {type === "image" && (
        <>
          <label className="block font-medium mb-1">Image URL (src)</label>
          <input
            type="text"
            className="w-full border rounded p-2"
            value={props.src}
            onChange={(e) => handleChange("src", e.target.value)}
          />
          <label className="block font-medium mb-1 mt-4">Alt Text</label>
          <input
            type="text"
            className="w-full border rounded p-2"
            value={props.alt}
            onChange={(e) => handleChange("alt", e.target.value)}
          />
        </>
      )}

      {/* Button: text and URL */}
      {type === "button" && (
        <>
          <label className="block font-medium mb-1">Button Text</label>
          <input
            type="text"
            className="w-full border rounded p-2"
            value={props.text}
            onChange={(e) => handleChange("text", e.target.value)}
          />
          <label className="block font-medium mb-1 mt-4">Button URL</label>
          <input
            type="text"
            className="w-full border rounded p-2"
            value={props.url}
            onChange={(e) => handleChange("url", e.target.value)}
          />
        </>
      )}
    </div>
  );
};

// Main app component
export default function WebsiteBuilder() {
  // List of placed components with unique ids, types, and props
  const [components, setComponents] = useState([]);

  // Which component is selected for editing
  const [selectedId, setSelectedId] = useState(null);

  // When user drops a new component on canvas
  const handleDrop = (component) => {
    const newComponent = {
      id: Date.now().toString(), // unique id
      type: component.id,
      props: component.defaultProps,
    };
    setComponents((prev) => [...prev, newComponent]);
    setSelectedId(newComponent.id);
  };

  // Update component props in state
  const updateComponent = (updated) => {
    setComponents((prev) =>
      prev.map((comp) => (comp.id === updated.id ? updated : comp))
    );
  };

  // Remove component by id
  const removeComponent = (id) => {
    setComponents((prev) => prev.filter((comp) => comp.id !== id));
    if (selectedId === id) setSelectedId(null);
  };

  // Find selected component object
  const selectedComponent = components.find((c) => c.id === selectedId) || null;

  return (
    <DndProvider backend={HTML5Backend}>
      <div className="min-h-screen bg-gray-100 p-8 flex flex-col">
        <h1 className="text-4xl font-bold mb-8 text-center">Website Builder</h1>

        <div className="flex flex-grow max-w-7xl mx-auto space-x-8">
          {/* Sidebar: draggable components */}
          <div className="w-64 bg-white p-6 rounded shadow h-fit">
            <h2 className="text-2xl font-semibold mb-6">Components</h2>
            {availableComponents.map((comp) => (
              <DraggableComponent key={comp.id} component={comp} />
            ))}
          </div>

          {/* Canvas area */}
          <div className="flex-1">
            <h2 className="text-2xl font-semibold mb-6">Canvas</h2>
            <DropZone
              components={components}
              onDrop={handleDrop}
              selectedId={selectedId}
              setSelectedId={setSelectedId}
              onUpdateComponent={updateComponent}
              onRemoveComponent={removeComponent}
            />
          </div>

          {/* Editor for selected component */}
          <div className="w-96 bg-white p-6 rounded shadow h-fit">
            <ComponentEditor component={selectedComponent} onUpdate={updateComponent} />
          </div>
        </div>
      </div>
    </DndProvider>
  );
}