"use client"

import React from 'react';
import { useBuilder } from './BuilderContext';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Button } from '@/components/ui/button';
import { SettingsIcon, TrashIcon, ImageIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
import MediaManager from '@/components/media/media-manager';
import { getCategories } from '@/app/actions/category';
import { ColorPicker } from '@/components/ui/color-picker';

export default function RightSidebar() {
  const { selectedElementId, selectedSectionId, data, setData, updateElementProps, removeSection, removeElement } = useBuilder();
  const [categories, setCategories] = React.useState<any[]>([]);

  React.useEffect(() => {
    getCategories().then(res => {
      if (res.success) setCategories(res.categories || []);
    });
  }, []);

  const handleSetColumns = (layoutType: number) => {
    if (selectedSectionId) {
      setData(prev => {
        const newData = { ...prev };
        const secIndex = newData.sections.findIndex(s => s.id === selectedSectionId);
        if (secIndex > -1) {
          const sec = newData.sections[secIndex];
          let spans: string[] = [];
          if (layoutType === 1) spans = ['col-span-12'];
          else if (layoutType === 2) spans = ['col-span-12 md:col-span-6', 'col-span-12 md:col-span-6'];
          else if (layoutType === 3) spans = ['col-span-12 md:col-span-4', 'col-span-12 md:col-span-4', 'col-span-12 md:col-span-4'];
          else if (layoutType === 4) spans = ['col-span-12 md:col-span-6 lg:col-span-3', 'col-span-12 md:col-span-6 lg:col-span-3', 'col-span-12 md:col-span-6 lg:col-span-3', 'col-span-12 md:col-span-6 lg:col-span-3'];
          
          const newCols = spans.map((span, idx) => {
             const existingCol = sec.columns[idx];
             return {
               id: existingCol ? existingCol.id : `col_${Date.now()}_${idx}`,
               span,
               elements: existingCol ? existingCol.elements : []
             };
          });
          
          // Re-assign mutated section to trigger re-render
          newData.sections[secIndex] = { ...sec, columns: newCols };
        }
        return newData;
      });
    }
  };

  // Find the selected element or section
  let selectedElement = null;
  let isSection = false;

  if (selectedElementId) {
    for (const s of data.sections) {
      for (const c of s.columns) {
        const el = c.elements.find(e => e.id === selectedElementId);
        if (el) { selectedElement = el; break; }
      }
      if (selectedElement) break;
    }
  }

  const handlePropChange = (key: string, value: any) => {
    if (selectedElement) {
      updateElementProps(selectedElement.id, { [key]: value });
    }
  };

  if (!selectedElementId && !selectedSectionId) {
    return (
      <div className="w-80 border-r bg-white dark:bg-slate-900 shrink-0 h-full z-10 shadow-lg flex flex-col items-center justify-center text-muted-foreground p-6 text-center">
        <SettingsIcon className="w-12 h-12 mb-4 opacity-20" />
        <p className="text-sm">یک المان یا سکشن را برای مشاهده و ویرایش تنظیمات آن انتخاب کنید.</p>
      </div>
    );
  }

  return (
    <div className="w-80 border-r bg-white dark:bg-slate-900 shrink-0 flex flex-col h-full z-10 shadow-lg">
      <div className="p-4 border-b flex justify-between items-center bg-slate-50 dark:bg-slate-800">
        <h2 className="font-bold text-sm">
          {selectedElement ? `تنظیمات: ${selectedElement.type}` : 'تنظیمات سکشن'}
        </h2>
        {selectedSectionId && !selectedElement && (
          <Button variant="ghost" size="icon" className="text-rose-500 hover:bg-rose-100 hover:text-rose-600 h-8 w-8" onClick={() => removeSection(selectedSectionId)} title="حذف سکشن">
            <TrashIcon className="w-4 h-4" />
          </Button>
        )}
        {selectedElement && (
          <Button variant="ghost" size="icon" className="text-rose-500 hover:bg-rose-100 hover:text-rose-600 h-8 w-8" onClick={() => removeElement(selectedElement.id)} title="حذف المان">
            <TrashIcon className="w-4 h-4" />
          </Button>
        )}
      </div>

      <div className="flex-1 overflow-y-auto p-4 space-y-6">
        {selectedSectionId && !selectedElement && (
          <div className="space-y-4">
             <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">ساختار ستون‌ها</h3>
             <div className="grid grid-cols-2 gap-2">
               <Button variant="outline" className="h-12" onClick={() => handleSetColumns(1)}>یک ستونه</Button>
               <Button variant="outline" className="h-12" onClick={() => handleSetColumns(2)}>دو ستونه</Button>
               <Button variant="outline" className="h-12" onClick={() => handleSetColumns(3)}>سه ستونه</Button>
               <Button variant="outline" className="h-12" onClick={() => handleSetColumns(4)}>چهار ستونه</Button>
             </div>
             <p className="text-[10px] text-muted-foreground mt-2">توجه: کاهش ستون‌ها ممکن است باعث حذف المان‌های درون آن‌ها شود.</p>
          </div>
        )}

        {selectedElement && selectedElement.type === 'heading' && (
          <>
            <div className="space-y-2">
              <Label>متن تیتر</Label>
              <Input 
                value={selectedElement.props.text || ''} 
                onChange={e => handlePropChange('text', e.target.value)} 
                placeholder="عنوان خود را وارد کنید..."
              />
            </div>
            <div className="space-y-2">
              <Label>نوع تگ</Label>
              <select 
                className="w-full flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                value={selectedElement.props.tag || 'h2'}
                onChange={e => handlePropChange('tag', e.target.value)}
              >
                <option value="h1">Heading 1 (H1)</option>
                <option value="h2">Heading 2 (H2)</option>
                <option value="h3">Heading 3 (H3)</option>
                <option value="h4">Heading 4 (H4)</option>
              </select>
            </div>
          </>
        )}

        {selectedElement && selectedElement.type === 'text' && (
          <div className="space-y-2">
            <Label>محتوا</Label>
            <Textarea 
              rows={8}
              value={selectedElement.props.text || ''} 
              onChange={e => handlePropChange('text', e.target.value)} 
              placeholder="متن خود را اینجا بنویسید..."
            />
          </div>
        )}

        {selectedElement && selectedElement.type === 'button' && (
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>عنوان دکمه</Label>
              <Input 
                value={selectedElement.props.text || ''} 
                onChange={e => handlePropChange('text', e.target.value)} 
                placeholder="کلیک کنید"
              />
            </div>
            <div className="space-y-2">
              <Label>لینک مقصد</Label>
              <Input 
                value={selectedElement.props.href || ''} 
                onChange={e => handlePropChange('href', e.target.value)} 
                dir="ltr"
                placeholder="/shop"
              />
            </div>
            <div className="space-y-2">
              <Label>نوع دکمه (shadcn variant)</Label>
              <select 
                className="w-full flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                value={selectedElement.props.variant || 'default'}
                onChange={e => handlePropChange('variant', e.target.value)}
              >
                <option value="default">اصلی (Default)</option>
                <option value="secondary">ثانویه (Secondary)</option>
                <option value="destructive">حذف/هشدار (Destructive)</option>
                <option value="outline">حاشیه‌دار (Outline)</option>
                <option value="ghost">بدون پس‌زمینه (Ghost)</option>
                <option value="link">لینک متنی (Link)</option>
              </select>
            </div>
          </div>
        )}

        {selectedElement && selectedElement.type === 'image' && (
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>تصویر (Media Picker)</Label>
              <MediaManager
                mode="single"
                title="انتخاب تصویر"
                value={selectedElement.props.url ? { url: selectedElement.props.url, id: '' } : null}
                trigger={<Button type='button' variant='outline' className='w-full justify-start text-muted-foreground'><ImageIcon className='w-4 h-4 ml-2' /> انتخاب تصویر...</Button>}
                onChange={(m: any) => handlePropChange('url', m?.url || '')}
              />
              {selectedElement.props.url && <img src={selectedElement.props.url} alt="preview" className="mt-2 rounded-lg border h-32 w-full object-contain bg-slate-50" />}
            </div>
            <div className="space-y-2">
               <Label>متن جایگزین (Alt)</Label>
               <Input value={selectedElement.props.alt || ''} onChange={e => handlePropChange('alt', e.target.value)} />
            </div>
          </div>
        )}

        {selectedElement && selectedElement.type === 'slideshow' && (
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>سرعت تغییر اسلاید (میلی‌ثانیه)</Label>
              <Input 
                type="number"
                value={selectedElement.props.speed || 3000} 
                onChange={e => handlePropChange('speed', parseInt(e.target.value) || 3000)} 
              />
            </div>
            <div className="space-y-2 border-t pt-4">
               <Label className="font-bold flex justify-between items-center mb-2">
                 لیست اسلایدها
                 <Button variant="outline" size="sm" onClick={() => {
                   const slides = selectedElement.props.slides || [];
                   handlePropChange('slides', [...slides, { id: Date.now().toString(), url: '', title: '', text: '', link: '', btnText: '' }]);
                 }}>افزودن اسلاید</Button>
               </Label>
               <div className="space-y-4 max-h-[400px] overflow-y-auto pr-1">
                 {(selectedElement.props.slides || []).map((slide: any, i: number) => (
                    <div key={slide.id} className="border rounded-xl p-3 bg-muted/20 space-y-3 relative">
                      <Button variant="ghost" size="icon" className="absolute top-1 left-1 h-6 w-6 text-rose-500" onClick={() => {
                         const slides = [...selectedElement.props.slides];
                         slides.splice(i, 1);
                         handlePropChange('slides', slides);
                      }}><TrashIcon className="w-3 h-3" /></Button>
                      <div className="text-xs font-bold mb-2">اسلاید {i + 1}</div>
                      
                      <MediaManager
                        mode="single"
                        title="تصویر اسلاید"
                        value={slide.url ? { url: slide.url, id: '' } : null}
                        trigger={<Button type='button' variant='outline' size="sm" className='w-full justify-start text-xs text-muted-foreground h-8'><ImageIcon className='w-3 h-3 ml-2' /> انتخاب تصویر</Button>}
                        onChange={(m: any) => {
                          const slides = [...selectedElement.props.slides];
                          slides[i].url = m?.url || '';
                          handlePropChange('slides', slides);
                        }}
                      />
                      {slide.url && <img src={slide.url} alt="slide" className="h-16 w-full object-cover rounded-md border" />}
                      
                      <Input placeholder="عنوان اسلاید" className="text-xs h-8" value={slide.title || ''} onChange={e => {
                         const slides = [...selectedElement.props.slides];
                         slides[i].title = e.target.value;
                         handlePropChange('slides', slides);
                      }} />
                      <Input placeholder="توضیحات کوتاه" className="text-xs h-8" value={slide.text || ''} onChange={e => {
                         const slides = [...selectedElement.props.slides];
                         slides[i].text = e.target.value;
                         handlePropChange('slides', slides);
                      }} />
                      <div className="flex gap-2">
                        <Input placeholder="لینک (URL)" dir="ltr" className="text-xs h-8 flex-1" value={slide.link || ''} onChange={e => {
                           const slides = [...selectedElement.props.slides];
                           slides[i].link = e.target.value;
                           handlePropChange('slides', slides);
                        }} />
                        <Input placeholder="متن دکمه" className="text-xs h-8 w-1/3" value={slide.btnText || ''} onChange={e => {
                           const slides = [...selectedElement.props.slides];
                           slides[i].btnText = e.target.value;
                           handlePropChange('slides', slides);
                        }} />
                      </div>
                    </div>
                 ))}
                 {(!selectedElement.props.slides || selectedElement.props.slides.length === 0) && (
                   <p className="text-xs text-center text-muted-foreground p-4">هیچ اسلایدی اضافه نشده است.</p>
                 )}
               </div>
            </div>
          </div>
        )}

        {selectedElement && selectedElement.type === 'product_slider' && (
          <div className="space-y-4 border rounded-xl p-3 bg-slate-50 dark:bg-slate-800">
            <h4 className="text-xs font-bold text-indigo-600 mb-2">تنظیمات ویترین محصول</h4>
            <div className="space-y-2">
              <Label className="text-xs">نحوه نمایش</Label>
              <select 
                className="w-full flex h-8 rounded-md border border-input bg-background px-3 py-1 text-xs"
                value={selectedElement.props.displayType || 'slider'}
                onChange={e => handlePropChange('displayType', e.target.value)}
              >
                <option value="slider">اسلایدر (کشویی)</option>
                <option value="grid">شبکه‌ای (Grid)</option>
              </select>
            </div>
            <div className="space-y-2">
              <Label className="text-xs">دسته‌بندی (فیلتر)</Label>
              <select 
                className="w-full flex h-8 rounded-md border border-input bg-background px-3 py-1 text-xs"
                value={selectedElement.props.categoryId || 'all'}
                onChange={e => handlePropChange('categoryId', e.target.value)}
              >
                <option value="all">همه دسته‌بندی‌ها</option>
                {categories.map(c => (
                  <option key={c.id} value={c.id}>{c.name}</option>
                ))}
              </select>
            </div>
            <div className="space-y-2">
              <Label className="text-xs">ترتیب نمایش</Label>
              <select 
                className="w-full flex h-8 rounded-md border border-input bg-background px-3 py-1 text-xs"
                value={selectedElement.props.sortBy || 'newest'}
                onChange={e => handlePropChange('sortBy', e.target.value)}
              >
                <option value="newest">جدیدترین‌ها</option>
                <option value="bestselling">پرفروش‌ترین‌ها</option>
                <option value="price_desc">گران‌ترین‌ها</option>
                <option value="price_asc">ارزان‌ترین‌ها</option>
              </select>
            </div>
          </div>
        )}

        {/* Global Block Settings */}
        {selectedElement && (
          <div className="pt-4 border-t space-y-4">
             <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground flex items-center gap-1">عنوان و ظاهر باکس المان</h3>
             
             <div className="space-y-3 bg-muted/10 p-3 rounded-lg border">
               <div className="space-y-2">
                  <Label className="text-xs">عنوان بالای المان</Label>
                  <Input 
                    value={selectedElement.props.blockTitle || ''} 
                    onChange={e => handlePropChange('blockTitle', e.target.value)} 
                    placeholder="مثال: محصولات ویژه"
                    className="h-8 text-xs"
                  />
               </div>
               
               <div className="space-y-2">
                 <Label className="text-xs">رنگ متن عنوان</Label>
                 <ColorPicker value={selectedElement.props.blockTitleColor || '#333333'} onChange={val => handlePropChange('blockTitleColor', val)} />
               </div>

               <div className="space-y-2 pt-2 border-t">
                  <Label className="text-xs">آیکون کنار عنوان</Label>
                  <MediaManager
                    mode="single"
                    title="انتخاب آیکون"
                    value={selectedElement.props.blockIcon ? { url: selectedElement.props.blockIcon, id: '' } : null}
                    trigger={<Button type='button' variant='outline' className='w-full justify-start text-xs text-muted-foreground h-8'><ImageIcon className='w-3 h-3 ml-2' /> انتخاب آیکون...</Button>}
                    onChange={(m: any) => handlePropChange('blockIcon', m?.url || '')}
                  />
                  {selectedElement.props.blockIcon && <img src={selectedElement.props.blockIcon} alt="icon preview" className="mt-2 rounded border h-10 w-10 object-contain bg-slate-50 p-1" />}
               </div>
               
               <div className="space-y-2">
                 <Label className="text-xs">رنگ پس‌زمینه آیکون</Label>
                 <ColorPicker value={selectedElement.props.blockIconBgColor || '#f0f0f0'} onChange={val => handlePropChange('blockIconBgColor', val)} />
               </div>
               
               <p className="text-[10px] text-muted-foreground leading-tight">در صورتی که عنوان را خالی بگذارید، نمایش داده نخواهد شد.</p>
             </div>
          </div>
        )}

        {/* Common styling section (Tailwind classes) */}
        {selectedElement && (
          <div className="pt-4 border-t space-y-4">
             <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">استایل‌های سفارشی</h3>
             <div className="space-y-2">
                <Label>کلاس‌های Tailwind</Label>
                <Input 
                  value={selectedElement.props.className || ''} 
                  onChange={e => handlePropChange('className', e.target.value)} 
                  placeholder="مثال: text-red-500 font-bold"
                  dir="ltr"
                />
             </div>
          </div>
        )}
      </div>
    </div>
  );
}