"use client"

import React from 'react';
import { Droppable, Draggable } from '@hello-pangea/dnd';
import { TypeIcon, ImageIcon, ColumnsIcon, BoxSelectIcon, HeadingIcon, SplineIcon, StarIcon, SearchCodeIcon, ShoppingBagIcon, UserIcon, CreditCardIcon, GalleryHorizontalIcon, ContactIcon, ShoppingCartIcon } from 'lucide-react';
import { useBuilder } from './BuilderContext';
import { ElementType } from './types';

const elementsList: { type: ElementType; label: string; icon: React.ReactNode }[] = [
  { type: 'heading', label: 'تیتر (Heading)', icon: <HeadingIcon className="w-5 h-5" /> },
  { type: 'text', label: 'متن ساده', icon: <TypeIcon className="w-5 h-5" /> },
  { type: 'image', label: 'تصویر', icon: <ImageIcon className="w-5 h-5" /> },
  { type: 'button', label: 'دکمه', icon: <BoxSelectIcon className="w-5 h-5" /> },
  { type: 'slideshow', label: 'اسلایدشو', icon: <GalleryHorizontalIcon className="w-5 h-5" /> },
  { type: 'product_slider', label: 'ویترین محصولات', icon: <StarIcon className="w-5 h-5" /> },
  { type: 'add_to_cart', label: 'افزودن به سبد', icon: <ShoppingCartIcon className="w-5 h-5" /> },
  { type: 'cart_widget', label: 'سبد خرید', icon: <ShoppingBagIcon className="w-5 h-5" /> },
  { type: 'checkout_form', label: 'فرم تسویه حساب', icon: <CreditCardIcon className="w-5 h-5" /> },
  { type: 'contact_form', label: 'فرم تماس با ما', icon: <ContactIcon className="w-5 h-5" /> },
  { type: 'profile_widget', label: 'پروفایل کاربر', icon: <UserIcon className="w-5 h-5" /> },
  { type: 'spacer', label: 'فاصله‌انداز', icon: <SplineIcon className="w-5 h-5" /> },
  { type: 'divider', label: 'خط جداکننده', icon: <SearchCodeIcon className="w-5 h-5" /> },
];

export default function LeftSidebar() {
  return (
    <div className="w-72 border-l bg-white dark:bg-slate-900 shrink-0 flex flex-col h-full z-10 shadow-lg">
      <div className="p-4 border-b">
        <h2 className="font-bold text-sm">المان‌ها (Elements)</h2>
        <p className="text-xs text-muted-foreground mt-1">بکشید و در صفحه رها کنید.</p>
      </div>

      <div className="flex-1 overflow-y-auto p-4">
        <Droppable droppableId="elements_panel" isDropDisabled={true}>
          {(provided) => (
            <div ref={provided.innerRef} {...provided.droppableProps} className="grid grid-cols-2 gap-3">
              {elementsList.map((item, index) => (
                <Draggable key={item.type} draggableId={`new_${item.type}`} index={index}>
                  {(provided, snapshot) => (
                    <React.Fragment>
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        className={`flex flex-col items-center justify-center p-4 border rounded-xl gap-2 transition-all ${snapshot.isDragging ? 'bg-indigo-50 border-indigo-500 shadow-xl scale-105 z-50' : 'hover:border-indigo-300 hover:bg-slate-50 dark:hover:bg-slate-800 bg-white dark:bg-slate-900'}`}
                      >
                        <div className="text-slate-500">{item.icon}</div>
                        <span className="text-xs font-medium text-center">{item.label}</span>
                      </div>
                      {/* Clone element for original place when dragging */}
                      {snapshot.isDragging && (
                        <div className="flex flex-col items-center justify-center p-4 border rounded-xl gap-2 opacity-30 bg-slate-100">
                          <div className="text-slate-500">{item.icon}</div>
                          <span className="text-xs font-medium text-center">{item.label}</span>
                        </div>
                      )}
                    </React.Fragment>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </div>
    </div>
  );
}