"use client"

import React from 'react';
import { Droppable, Draggable } from '@hello-pangea/dnd';
import { useBuilder } from './BuilderContext';
import { PlusIcon, TrashIcon } from 'lucide-react';
import { Button } from '@/components/ui/button';

export default function Canvas() {
  const { data, selectedElementId, setSelectedElementId, selectedSectionId, setSelectedSectionId, addSection, removeElement } = useBuilder();

  return (
    <div className="w-full h-full min-h-[500px] flex flex-col" onClick={() => { setSelectedElementId(null); setSelectedSectionId(null); }}>
      
      {data.sections.length === 0 ? (
        <div className="flex-1 flex flex-col items-center justify-center border-2 border-dashed m-8 rounded-2xl border-slate-300 dark:border-slate-800 bg-slate-50 dark:bg-slate-900/50">
           <h3 className="text-xl font-bold mb-2 opacity-50">بوم خالی</h3>
           <p className="text-muted-foreground text-sm mb-6">اولین سکشن خود را برای شروع طراحی اضافه کنید.</p>
           <Button onClick={(e) => { e.stopPropagation(); addSection(); }} className="gap-2 bg-indigo-600 hover:bg-indigo-700 rounded-xl px-8 shadow-lg shadow-indigo-500/20">
             <PlusIcon className="w-5 h-5" />
             افزودن سکشن
           </Button>
        </div>
      ) : (
        <div className="flex flex-col pb-32">
          {data.sections.map((section, idx) => (
            <div 
              key={section.id} 
              onClick={(e) => { e.stopPropagation(); setSelectedSectionId(section.id); setSelectedElementId(null); }}
              className={`relative group/section transition-all w-full ${section.settings.padding || 'py-12'} ${selectedSectionId === section.id ? 'ring-2 ring-indigo-500 z-10' : 'hover:ring-1 hover:ring-indigo-300'}`}
            >
              {/* Section Overlay */}
              <div className={`absolute top-0 left-0 bg-indigo-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-br-lg ${selectedSectionId === section.id ? 'opacity-100' : 'opacity-0 group-hover/section:opacity-100'} transition-opacity`}>
                SECTION
              </div>

              {/* Columns */}
              <div className="container mx-auto px-4 max-w-7xl">
                <div className="grid grid-cols-12 gap-4">
                  {section.columns.map((col, colIdx) => (
                    <div key={col.id} className={`${col.span} relative min-h-[100px] border border-dashed border-transparent hover:border-slate-300 transition-colors`}>
                      <Droppable droppableId={col.id}>
                        {(provided, snapshot) => (
                          <div
                            ref={provided.innerRef}
                            {...provided.droppableProps}
                            className={`h-full w-full p-2 transition-colors ${snapshot.isDraggingOver ? 'bg-indigo-50/50' : ''}`}
                          >
                            {col.elements.length === 0 && (
                              <div className="h-full w-full min-h-[80px] flex items-center justify-center opacity-30 text-xs font-medium">
                                المان‌ها را اینجا رها کنید
                              </div>
                            )}
                            
                            {col.elements.map((el, elIdx) => (
                              <Draggable key={el.id} draggableId={el.id} index={elIdx}>
                                {(provided, snapshot) => (
                                  <div
                                    ref={provided.innerRef}
                                    {...provided.draggableProps}
                                    {...provided.dragHandleProps}
                                    onClick={(e) => { e.stopPropagation(); setSelectedElementId(el.id); setSelectedSectionId(null); }}
                                    className={`relative mb-2 transition-all group/el ${selectedElementId === el.id ? 'ring-2 ring-blue-500' : 'hover:ring-1 hover:ring-blue-300'}`}
                                  >
                                    <div className={`absolute -top-3 left-2 z-20 flex items-center shadow-md overflow-hidden rounded-md transition-opacity ${selectedElementId === el.id ? 'opacity-100' : 'opacity-0 group-hover/el:opacity-100'}`}>
                                      <div className="bg-blue-500 text-white text-[9px] font-bold px-1.5 py-1 flex items-center justify-center">
                                        {el.type.toUpperCase()}
                                      </div>
                                      {selectedElementId === el.id && (
                                        <button 
                                          className="bg-rose-500 hover:bg-rose-600 text-white p-1 transition-colors"
                                          onClick={(e) => { e.stopPropagation(); removeElement(el.id); }}
                                          title="حذف المان"
                                        >
                                          <TrashIcon className="w-3 h-3" />
                                        </button>
                                      )}
                                    </div>
                                    <div className={`w-full ${el.props.className || ''}`}>
                                       {/* Render actual component based on type */}
                                       <div className="flex flex-col w-full">
                                          {/* Global Block Header */}
                                          {el.props.blockTitle && (
                                            <div className="flex items-center gap-3 mb-4 mt-2">
                                              {el.props.blockIcon && (
                                                <div 
                                                  className="w-10 h-10 rounded-xl flex items-center justify-center p-2 shadow-sm"
                                                  style={{ backgroundColor: el.props.blockIconBgColor || '#f0f0f0' }}
                                                >
                                                  <img src={el.props.blockIcon} alt="icon" className="w-full h-full object-contain" />
                                                </div>
                                              )}
                                              <h3 
                                                className="text-xl font-bold"
                                                style={{ color: el.props.blockTitleColor || '#333333' }}
                                              >
                                                {el.props.blockTitle}
                                              </h3>
                                            </div>
                                          )}
                                          
                                          {/* Element Content */}
                                          {el.type === 'heading' && React.createElement(el.props.tag || 'h2', { className: 'text-2xl font-bold' }, el.props.text || 'تیتر تستی')}
                                          {el.type === 'text' && <p>{el.props.text || 'لورم ایپسوم متن ساختگی با تولید سادگی...'}</p>}
                                          {el.type === 'button' && <Button variant={el.props.variant || 'default'} className="w-full sm:w-auto">{el.props.text || 'کلیک کنید'}</Button>}
                                          {el.type === 'image' && (el.props.url ? <img src={el.props.url} alt={el.props.alt || ''} className="max-w-full h-auto rounded-lg" /> : <div className="w-full h-40 bg-slate-200 flex items-center justify-center text-slate-400">تصویر اینجا قرار می‌گیرد</div>)}
                                          {el.type === 'slideshow' && (
                                            <div className="w-full relative rounded-xl overflow-hidden border">
                                              {el.props.slides && el.props.slides.length > 0 ? (
                                                  <div className="relative w-full h-64 bg-slate-900">
                                                    <img src={el.props.slides[0].url || ''} className="w-full h-full object-cover opacity-60" alt={el.props.slides[0].title} />
                                                    <div className="absolute inset-0 flex flex-col items-center justify-center text-white p-6 text-center">
                                                      <h3 className="text-2xl font-bold mb-2">{el.props.slides[0].title || 'عنوان اسلاید'}</h3>
                                                      <p className="text-sm opacity-90 mb-4">{el.props.slides[0].text || 'توضیحات اسلاید'}</p>
                                                      {el.props.slides[0].btnText && <Button variant="default">{el.props.slides[0].btnText}</Button>}
                                                    </div>
                                                  </div>
                                              ) : (
                                                  <div className="w-full h-64 border-2 border-dashed bg-slate-100 text-slate-500 flex flex-col items-center justify-center font-bold text-lg">
                                                    🖼️ اسلایدشو
                                                    <span className="text-sm font-normal mt-2">از پنل تنظیمات اسلاید اضافه کنید</span>
                                                  </div>
                                              )}
                                            </div>
                                          )}
                                          {el.type === 'product_slider' && (
                                            <div className="w-full p-6 border-2 border-dashed bg-pink-50 text-pink-600 rounded-xl flex flex-col items-center justify-center font-bold">
                                              <span className="text-xl">🛒 ویترین محصولات</span>
                                              <div className="text-sm mt-2 flex gap-2 font-normal opacity-80">
                                                <span className="bg-pink-100 px-2 py-1 rounded">دسته‌بندی: {el.props.categoryId === 'all' || !el.props.categoryId ? 'همه' : el.props.categoryId}</span>
                                                <span className="bg-pink-100 px-2 py-1 rounded">ترتیب: {el.props.sortBy || 'newest'}</span>
                                                <span className="bg-pink-100 px-2 py-1 rounded">نمایش: {el.props.displayType || 'slider'}</span>
                                              </div>
                                            </div>
                                          )}
                                          {el.type === 'add_to_cart' && <div className="w-full p-4 border-2 border-dashed bg-orange-50 text-orange-600 rounded-xl text-center font-bold flex items-center justify-center gap-2">🛒 دکمه افزودن به سبد خرید</div>}
                                          {el.type === 'cart_widget' && <div className="w-full p-6 border-2 border-dashed bg-emerald-50 text-emerald-600 rounded-xl text-center font-bold">🛍️ ویجت سبد خرید</div>}
                                          {el.type === 'checkout_form' && <div className="w-full p-6 border-2 border-dashed bg-amber-50 text-amber-600 rounded-xl text-center font-bold">💳 فرم تسویه حساب کاربری</div>}
                                          {el.type === 'contact_form' && <div className="w-full p-6 border-2 border-dashed bg-teal-50 text-teal-600 rounded-xl text-center font-bold">✉️ فرم تماس با ما</div>}
                                          {el.type === 'profile_widget' && <div className="w-full p-6 border-2 border-dashed bg-blue-50 text-blue-600 rounded-xl text-center font-bold">👤 پنل پروفایل کاربری</div>}
                                          {el.type === 'divider' && <hr className="my-4 border-slate-300" />}
                                          {el.type === 'spacer' && <div className="h-10 w-full" />}
                                       </div>
                                    </div>
                                  </div>
                                )}
                              </Draggable>
                            ))}
                            {provided.placeholder}
                          </div>
                        )}
                      </Droppable>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
          
          <div className="w-full flex justify-center mt-8 opacity-50 hover:opacity-100 transition-opacity">
            <Button onClick={(e) => { e.stopPropagation(); addSection(); }} variant="outline" className="gap-2 border-dashed border-2 rounded-xl">
               <PlusIcon className="w-4 h-4" />
               افزودن سکشن جدید
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}