import React, { useState } from 'react';
import {
    DndContext,
    closestCenter,
    KeyboardSensor,
    PointerSensor,
    useSensor,
    useSensors,
    DragEndEvent,
} from '@dnd-kit/core';
import {
    arrayMove,
    SortableContext,
    sortableKeyboardCoordinates,
    useSortable,
    verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { __ } from '@/lib/i18n';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import {
    Plus, ChevronUp, ChevronDown, Trash2, GripVertical,
    LayoutTemplate, Type, Image, Grid3x3, Megaphone, MessageSquare,
    Loader2, GalleryHorizontalEnd, ScanText, LayoutGrid, Pointer
} from 'lucide-react';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from "@/components/ui/alert-dialog";

interface Section {
    id: string;
    type: string;
    layoutVariant?: string;
    colorScheme?: string;
    props: Record<string, any>;
}

interface SectionEditorProps {
    sections: Section[];
    selectedSection: Section | null;
    onSelectSection: (section: Section | null) => void;
    onAddSection: (type: string) => void;
    onDeleteSection: (id: string) => void;
    onMoveSection: (id: string, direction: 'up' | 'down') => void;
    onReorderSections: (sections: Section[]) => void;
    isTemplate: boolean;
    cpt?: string;
    isLoading: boolean;
}

const SECTION_TYPES = [
    { type: 'hero', label: 'Hero', icon: LayoutTemplate },
    { type: 'content', label: 'Content', icon: Type },
    { type: 'image-text', label: 'Image + Text', icon: Image },
    { type: 'feature-grid', label: 'Feature Grid', icon: Grid3x3 },
    { type: 'cta-banner', label: 'CTA Banner', icon: Megaphone },
    { type: 'contact-form', label: 'Contact Form', icon: MessageSquare },
    { type: 'bento-category-grid', label: 'Bento Grid', icon: LayoutGrid },
    { type: 'product-carousel', label: 'Product Carousel', icon: GalleryHorizontalEnd },
    { type: 'shoppable-image', label: 'Shoppable Image', icon: Pointer },
    { type: 'marquee-banner', label: 'Marquee Banner', icon: ScanText },
];

// Sortable Section Card Component
function SortableSectionCard({
    section,
    index,
    totalCount,
    isSelected,
    onSelect,
    onDelete,
    onMove,
}: {
    section: Section;
    index: number;
    totalCount: number;
    isSelected: boolean;
    onSelect: () => void;
    onDelete: () => void;
    onMove: (direction: 'up' | 'down') => void;
}) {
    const {
        attributes,
        listeners,
        setNodeRef,
        transform,
        transition,
        isDragging,
    } = useSortable({ id: section.id });

    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
    };

    const sectionType = SECTION_TYPES.find(s => s.type === section.type);
    const Icon = sectionType?.icon || LayoutTemplate;
    const hasDynamic = Object.values(section.props).some(
        p => typeof p === 'object' && p?.type === 'dynamic'
    );

    return (
        <Card
            ref={setNodeRef}
            style={style}
            className={cn(
                'p-4 cursor-pointer transition-all',
                'hover:shadow-md',
                isSelected ? 'ring-2 ring-primary shadow-md' : '',
                isDragging ? 'opacity-50 shadow-lg ring-2 ring-primary/50' : ''
            )}
            onClick={onSelect}
        >
            <div className="flex items-center gap-3">
                <div
                    {...attributes}
                    {...listeners}
                    className="cursor-grab active:cursor-grabbing touch-none"
                    onClick={(e) => e.stopPropagation()}
                >
                    <GripVertical className="w-4 h-4 text-gray-400 hover:text-gray-600" />
                </div>

                <div className="flex-1 flex items-center gap-3">
                    <div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center">
                        <Icon className="w-5 h-5 text-gray-600" />
                    </div>
                    <div>
                        <div className="font-medium text-sm">
                            {sectionType?.label || section.type}
                        </div>
                        <div className="text-xs text-gray-500">
                            {section.layoutVariant || 'default'}
                            {hasDynamic && (
                                <span className="ml-2 text-primary">◆ {__('Dynamic')}</span>
                            )}
                        </div>
                    </div>
                </div>

                <div className="flex items-center gap-1" onClick={e => e.stopPropagation()}>
                    <Button
                        variant="ghost"
                        size="icon"
                        className="h-8 w-8"
                        onClick={() => onMove('up')}
                        disabled={index === 0}
                    >
                        <ChevronUp className="w-4 h-4" />
                    </Button>
                    <Button
                        variant="ghost"
                        size="icon"
                        className="h-8 w-8"
                        onClick={() => onMove('down')}
                        disabled={index === totalCount - 1}
                    >
                        <ChevronDown className="w-4 h-4" />
                    </Button>
                    <AlertDialog>
                        <AlertDialogTrigger asChild>
                            <button
                                className="p-1.5 rounded text-red-500 hover:text-red-600 hover:bg-red-50 transition"
                                title="Delete"
                            >
                                <Trash2 className="w-4 h-4" />
                            </button>
                        </AlertDialogTrigger>
                        <AlertDialogContent className="z-[60]">
                            <AlertDialogHeader>
                                <AlertDialogTitle>{__('Delete this section?')}</AlertDialogTitle>
                                <AlertDialogDescription>
                                    {__('This action cannot be undone.')}
                                </AlertDialogDescription>
                            </AlertDialogHeader>
                            <AlertDialogFooter>
                                <AlertDialogCancel onClick={(e) => e.stopPropagation()}>{__('Cancel')}</AlertDialogCancel>
                                <AlertDialogAction
                                    className="bg-red-600 hover:bg-red-700"
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        onDelete();
                                    }}
                                >
                                    {__('Delete')}
                                </AlertDialogAction>
                            </AlertDialogFooter>
                        </AlertDialogContent>
                    </AlertDialog>
                </div>
            </div>
        </Card>
    );
}

export function SectionEditor({
    sections,
    selectedSection,
    onSelectSection,
    onAddSection,
    onDeleteSection,
    onMoveSection,
    onReorderSections,
    isTemplate,
    cpt,
    isLoading,
}: SectionEditorProps) {
    const sensors = useSensors(
        useSensor(PointerSensor, {
            activationConstraint: {
                distance: 8,
            },
        }),
        useSensor(KeyboardSensor, {
            coordinateGetter: sortableKeyboardCoordinates,
        })
    );

    const handleDragEnd = (event: DragEndEvent) => {
        const { active, over } = event;

        if (over && active.id !== over.id) {
            const oldIndex = sections.findIndex(s => s.id === active.id);
            const newIndex = sections.findIndex(s => s.id === over.id);
            const newSections = arrayMove(sections, oldIndex, newIndex);
            onReorderSections(newSections);
        }
    };

    if (isLoading) {
        return (
            <div className="h-full flex items-center justify-center">
                <Loader2 className="w-8 h-8 animate-spin text-gray-400" />
            </div>
        );
    }

    return (
        <div className="space-y-4">
            {/* Section Header */}
            <div className="flex items-center justify-between">
                <h2 className="text-lg font-semibold">{__('Sections')}</h2>
                {isTemplate && (
                    <span className="text-xs bg-primary/10 text-primary px-2 py-1 rounded">
                        {__('Template: ')} {cpt}
                    </span>
                )}
            </div>

            {/* Sections List with Drag-and-Drop */}
            <DndContext
                sensors={sensors}
                collisionDetection={closestCenter}
                onDragEnd={handleDragEnd}
            >
                <SortableContext
                    items={sections.map(s => s.id)}
                    strategy={verticalListSortingStrategy}
                >
                    <div className="space-y-3">
                        {sections.map((section, index) => (
                            <SortableSectionCard
                                key={section.id}
                                section={section}
                                index={index}
                                totalCount={sections.length}
                                isSelected={selectedSection?.id === section.id}
                                onSelect={() => onSelectSection(section)}
                                onDelete={() => onDeleteSection(section.id)}
                                onMove={(direction) => onMoveSection(section.id, direction)}
                            />
                        ))}
                    </div>
                </SortableContext>
            </DndContext>

            {sections.length === 0 && (
                <div className="text-center py-12 text-gray-400">
                    <LayoutTemplate className="w-12 h-12 mx-auto mb-4 opacity-50" />
                    <p>{__('No sections yet. Add your first section.')}</p>
                </div>
            )}

            {/* Add Section Button */}
            <DropdownMenu>
                <DropdownMenuTrigger asChild>
                    <Button variant="outline" className="w-full">
                        <Plus className="w-4 h-4 mr-2" />
                        {__('Add Section')}
                    </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent className="w-56">
                    {SECTION_TYPES.map((sectionType) => {
                        const Icon = sectionType.icon;
                        return (
                            <DropdownMenuItem
                                key={sectionType.type}
                                onClick={() => onAddSection(sectionType.type)}
                            >
                                <Icon className="w-4 h-4 mr-2" />
                                {sectionType.label}
                            </DropdownMenuItem>
                        );
                    })}
                </DropdownMenuContent>
            </DropdownMenu>
        </div>
    );
}
