import type { ReactNode } from "react";
import { ChevronDown, ChevronUp, Plus, Trash2 } from "lucide-react";

export type CardEditLayoutMode = "horizontal" | "vertical" | "grid-2" | "grid-3" | "grid-4";

export type CardEditPreviewData = {
    emoji?: string;
    title?: string;
    subtitle?: string;
    imageUrl?: string;
};

const layoutGridClass: Record<CardEditLayoutMode, string> = {
    horizontal: "grid grid-cols-1 md:grid-cols-2 gap-4",
    vertical: "flex flex-col gap-4",
    "grid-2": "grid grid-cols-1 sm:grid-cols-2 gap-4",
    "grid-3": "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
    "grid-4": "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4",
};

export function getCardGridClass(layout: CardEditLayoutMode = "horizontal"): string {
    return layoutGridClass[layout];
}

/** Human-readable position label based on card index, count, and frontend layout. */
export function getCardPositionLabel(
    index: number,
    total: number,
    layout: CardEditLayoutMode = "horizontal",
): string {
    if (total === 1) {
        return "Card";
    }

    if (total === 2) {
        if (layout === "vertical") {
            return index === 0 ? "Top Card" : "Bottom Card";
        }
        return index === 0 ? "Left Card" : "Right Card";
    }

    if (total === 3) {
        if (layout === "vertical") {
            if (index === 0) return "Top Card";
            if (index === 2) return "Bottom Card";
            return "Middle Card";
        }
        const horizontalLabels = ["Left Card", "Center Card", "Right Card"];
        return horizontalLabels[index] ?? `Card ${index + 1}`;
    }

    if (total === 4 && (layout === "grid-2" || layout === "grid-4" || layout === "horizontal")) {
        const gridLabels = ["Top Left Card", "Top Right Card", "Bottom Left Card", "Bottom Right Card"];
        return gridLabels[index] ?? `Card ${index + 1}`;
    }

    return `Card ${index + 1}`;
}

type CardEditPreviewProps = CardEditPreviewData & {
    className?: string;
};

export function CardEditPreview({ emoji, title, subtitle, imageUrl, className = "" }: CardEditPreviewProps) {
    const hasContent = Boolean(emoji || title || subtitle || imageUrl);
    if (!hasContent) return null;

    return (
        <div
            className={`flex items-center gap-2.5 p-2.5 mb-3 bg-white border border-slate-200 rounded-lg shadow-sm ${className}`}
            aria-hidden
        >
            {imageUrl ? (
                <img
                    src={imageUrl}
                    alt=""
                    className="w-10 h-10 rounded object-cover shrink-0 border border-slate-200"
                />
            ) : emoji ? (
                <span className="text-2xl shrink-0 leading-none w-10 text-center">{emoji}</span>
            ) : (
                <span className="w-10 h-10 shrink-0 rounded bg-slate-100 border border-slate-200 flex items-center justify-center text-[10px] text-slate-400">
                    Card
                </span>
            )}
            <div className="min-w-0 flex-1">
                <p className="text-xs font-semibold text-slate-800 truncate">{title?.trim() || "Untitled"}</p>
                {subtitle?.trim() ? (
                    <p className="text-[10px] text-slate-500 truncate mt-0.5">{subtitle}</p>
                ) : null}
            </div>
        </div>
    );
}

const panelAccentClass: Record<string, string> = {
    default: "border-slate-300",
    left: "border-sunflower",
    right: "border-deep-sea",
    sunflower: "border-sunflower",
    "deep-sea": "border-deep-sea",
    valencia: "border-valencia",
    moss: "border-moss",
    mist: "border-mist",
    salmon: "border-salmon",
};

type CardEditPanelProps = {
    index: number;
    total: number;
    layout?: CardEditLayoutMode;
    /** Override auto-generated position label (e.g. "Academic Growth"). */
    label?: string;
    positionLabel?: string;
    preview?: CardEditPreviewData;
    onInsertAfter?: () => void;
    onMoveUp?: () => void;
    onMoveDown?: () => void;
    onRemove?: () => void;
    accent?: string;
    children: ReactNode;
    className?: string;
};

export function CardEditPanel({
    index,
    total,
    layout = "horizontal",
    label,
    positionLabel,
    preview,
    onInsertAfter,
    onMoveUp,
    onMoveDown,
    onRemove,
    accent = "default",
    children,
    className = "",
}: CardEditPanelProps) {
    const position = positionLabel ?? getCardPositionLabel(index, total, layout);
    const borderClass = panelAccentClass[accent] ?? panelAccentClass.default;

    return (
        <div
            className={`rounded-xl border-2 ${borderClass} bg-slate-50/60 p-4 min-w-0 ${className}`}
            data-card-index={index}
        >
            <div className="flex items-start justify-between gap-2 mb-3">
                <div className="min-w-0">
                    <span className="inline-block text-[10px] font-bold uppercase tracking-wide text-slate-500 bg-white border border-slate-200 rounded px-2 py-0.5">
                        {position}
                    </span>
                    {label ? (
                        <p className="text-sm font-semibold text-slate-800 mt-1.5 truncate">{label}</p>
                    ) : null}
                </div>
                {onInsertAfter || onMoveUp || onMoveDown || onRemove ? (
                    <div className="flex items-center gap-1 shrink-0">
                        {onMoveUp ? (
                            <button
                                type="button"
                                onClick={onMoveUp}
                                className="p-1.5 text-slate-600 hover:bg-slate-100 rounded shrink-0"
                                title={`Move ${position.toLowerCase()} up`}
                                aria-label={`Move ${position.toLowerCase()} up`}
                            >
                                <ChevronUp size={16} />
                            </button>
                        ) : null}
                        {onMoveDown ? (
                            <button
                                type="button"
                                onClick={onMoveDown}
                                className="p-1.5 text-slate-600 hover:bg-slate-100 rounded shrink-0"
                                title={`Move ${position.toLowerCase()} down`}
                                aria-label={`Move ${position.toLowerCase()} down`}
                            >
                                <ChevronDown size={16} />
                            </button>
                        ) : null}
                        {onInsertAfter ? (
                            <button
                                type="button"
                                onClick={onInsertAfter}
                                className="p-1.5 text-slate-600 hover:bg-slate-100 rounded shrink-0"
                                title={`Insert after ${position.toLowerCase()}`}
                                aria-label={`Insert after ${position.toLowerCase()}`}
                            >
                                <Plus size={16} />
                            </button>
                        ) : null}
                        {onRemove ? (
                            <button
                                type="button"
                                onClick={onRemove}
                                className="p-1.5 text-red-600 hover:bg-red-50 rounded shrink-0"
                                title={`Remove ${position.toLowerCase()}`}
                            >
                                <Trash2 size={16} />
                            </button>
                        ) : null}
                    </div>
                ) : null}
            </div>
            {preview ? <CardEditPreview {...preview} /> : null}
            <div className="space-y-3">{children}</div>
        </div>
    );
}

type CardEditGroupProps = {
    label?: string;
    hint?: string;
    layout?: CardEditLayoutMode;
    onAdd?: () => void;
    addLabel?: string;
    children: ReactNode;
    className?: string;
    emptyMessage?: string;
    isEmpty?: boolean;
};

export function CardEditGroup({
    label,
    hint,
    layout = "horizontal",
    onAdd,
    addLabel = "Add card",
    children,
    className = "",
    emptyMessage = "No cards yet. Click “Add” to create one.",
    isEmpty = false,
}: CardEditGroupProps) {
    return (
        <div className={className}>
            {(label || onAdd) ? (
                <div className="flex items-center justify-between gap-2 mb-2">
                    {label ? <label className="block text-sm font-medium text-slate-700">{label}</label> : <span />}
                    {onAdd ? (
                        <button
                            type="button"
                            onClick={onAdd}
                            className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-medium rounded-md border border-slate-300 bg-white hover:bg-slate-50 shrink-0"
                        >
                            + {addLabel}
                        </button>
                    ) : null}
                </div>
            ) : null}
            {hint ? <p className="text-[10px] text-slate-500 mb-2">{hint}</p> : null}
            {isEmpty ? (
                <p className="text-sm text-slate-500 p-3 border border-dashed border-slate-300 rounded-lg bg-slate-50/50">
                    {emptyMessage}
                </p>
            ) : (
                <div className={getCardGridClass(layout)}>{children}</div>
            )}
        </div>
    );
}

/** Two fixed side-by-side cards (left / right) with grouped fields — for split-field content models. */
type CardEditSplitProps = {
    layout?: "horizontal" | "vertical";
    left: {
        positionLabel?: string;
        label?: string;
        preview?: CardEditPreviewData;
        accent?: string;
        children: ReactNode;
    };
    right: {
        positionLabel?: string;
        label?: string;
        preview?: CardEditPreviewData;
        accent?: string;
        children: ReactNode;
    };
    className?: string;
};

export function CardEditSplit({ layout = "horizontal", left, right, className = "" }: CardEditSplitProps) {
    const gridLayout: CardEditLayoutMode = layout === "vertical" ? "vertical" : "horizontal";

    return (
        <div className={className}>
            <p className="text-[10px] text-slate-500 mb-2">
                Edit each card below — layout matches how they appear on the page.
            </p>
            <div className={getCardGridClass(gridLayout)}>
                <CardEditPanel
                    index={0}
                    total={2}
                    layout={gridLayout}
                    positionLabel={left.positionLabel ?? (layout === "vertical" ? "Top Card" : "Left Card")}
                    label={left.label}
                    preview={left.preview}
                    accent={left.accent ?? "left"}
                >
                    {left.children}
                </CardEditPanel>
                <CardEditPanel
                    index={1}
                    total={2}
                    layout={gridLayout}
                    positionLabel={right.positionLabel ?? (layout === "vertical" ? "Bottom Card" : "Right Card")}
                    label={right.label}
                    preview={right.preview}
                    accent={right.accent ?? "right"}
                >
                    {right.children}
                </CardEditPanel>
            </div>
        </div>
    );
}