import { Input } from "@/components/ui/input";
import { CardEditGroup, CardEditPanel } from "./CardEditLayout";
import { EmojiPickerField } from "./EmojiPickerField";
import {
    defaultSwotQuadrants,
    parseSwotQuadrants,
    SWOT_COLOR_OPTIONS,
    type SwotItem,
    type SwotQuadrant,
} from "@/components/page-blocks/SwotAnalysisGridBlock";

type BlockContent = Record<string, unknown>;

const formRow = "mb-4";
const labelCls = "block text-sm font-medium text-slate-700 mb-1.5";

function emptyItem(): SwotItem {
    return { text: "", dimension: "" };
}

function emptyQuadrant(index: number): SwotQuadrant {
    return {
        id: `quadrant-${index + 1}`,
        label: "",
        emoji: "💪",
        color: "moss",
        items: [emptyItem()],
    };
}

function moveItem<T>(items: T[], index: number, direction: -1 | 1): T[] {
    const target = index + direction;
    if (target < 0 || target >= items.length) return items;
    const next = [...items];
    [next[index], next[target]] = [next[target], next[index]];
    return next;
}

export function SwotAnalysisGridForm({
    content,
    onChange,
}: {
    content: BlockContent;
    onChange: (content: BlockContent) => void;
}) {
    const stepLabel = typeof content.stepLabel === "string" ? content.stepLabel : "Step 1";
    const stepLabelColor = typeof content.stepLabelColor === "string" ? content.stepLabelColor : "deep-sea";
    const title = typeof content.title === "string" ? content.title : "SWOT Analysis";
    const subtitle = typeof content.subtitle === "string"
        ? content.subtitle
        : "Teachers and families collaborate to identify each student's Strengths, Weaknesses, Opportunities, and Threats across all PoL dimensions.";
    const quadrants = Array.isArray(content.quadrants) && content.quadrants.length > 0
        ? parseSwotQuadrants(content)
        : defaultSwotQuadrants;

    const set = (patch: Partial<BlockContent>) => onChange({ ...content, ...patch });
    const setQuadrants = (next: SwotQuadrant[]) => set({ quadrants: next });
    const updateQuadrant = (index: number, patch: Partial<SwotQuadrant>) => {
        setQuadrants(quadrants.map((item, itemIndex) => (
            itemIndex === index ? { ...item, ...patch } : item
        )));
    };
    const setItems = (quadrantIndex: number, items: SwotItem[]) => {
        updateQuadrant(quadrantIndex, { items });
    };

    return (
        <>
            <p className="text-[11px] text-slate-500 mb-4 rounded-lg bg-slate-50 border border-slate-200 px-3 py-2">
                SWOT Analysis grid matching the My Growth Plan Step 1 layout. Optional step label, title, and
                subtitle hide when empty. Each quadrant has its own nested items repeater.
            </p>

            <div className={formRow}>
                <label className={labelCls}>Step label (optional)</label>
                <Input
                    value={stepLabel}
                    onChange={(event) => set({ stepLabel: event.target.value })}
                    placeholder="e.g. Step 1"
                />
            </div>
            <div className={formRow}>
                <label className={labelCls}>Step label color</label>
                <select
                    value={stepLabelColor}
                    onChange={(event) => set({ stepLabelColor: event.target.value })}
                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                >
                    {SWOT_COLOR_OPTIONS.map((option) => (
                        <option key={option.value} value={option.value}>{option.label}</option>
                    ))}
                </select>
            </div>
            <div className={formRow}>
                <label className={labelCls}>Title (optional)</label>
                <Input
                    value={title}
                    onChange={(event) => set({ title: event.target.value })}
                    placeholder="Leave empty to hide"
                />
            </div>
            <div className={formRow}>
                <label className={labelCls}>Subtitle (optional)</label>
                <textarea
                    value={subtitle}
                    onChange={(event) => set({ subtitle: event.target.value })}
                    rows={2}
                    className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                    placeholder="Leave empty to hide"
                />
            </div>

            <div className={formRow}>
                <CardEditGroup
                    label="Quadrants"
                    layout="grid-2"
                    onAdd={() => setQuadrants([...quadrants, emptyQuadrant(quadrants.length)])}
                    addLabel="Add quadrant"
                    isEmpty={quadrants.length === 0}
                    emptyMessage="No quadrants configured."
                >
                    {quadrants.map((quadrant, index) => (
                        <CardEditPanel
                            key={`${quadrant.id}-${index}`}
                            index={index}
                            total={quadrants.length}
                            layout="grid-2"
                            positionLabel={`Quadrant ${index + 1}`}
                            label={quadrant.label || quadrant.id}
                            preview={{
                                emoji: quadrant.emoji,
                                title: quadrant.label || quadrant.id,
                                subtitle: `${quadrant.items.length} item(s)`,
                            }}
                            onMoveUp={index > 0
                                ? () => setQuadrants(moveItem(quadrants, index, -1))
                                : undefined}
                            onMoveDown={index < quadrants.length - 1
                                ? () => setQuadrants(moveItem(quadrants, index, 1))
                                : undefined}
                            onInsertAfter={() => setQuadrants([
                                ...quadrants.slice(0, index + 1),
                                emptyQuadrant(index + 1),
                                ...quadrants.slice(index + 1),
                            ])}
                            onRemove={quadrants.length > 1
                                ? () => setQuadrants(quadrants.filter((_, itemIndex) => itemIndex !== index))
                                : undefined}
                        >
                            <div className="grid sm:grid-cols-[auto_1fr] gap-3">
                                <div>
                                    <label className={labelCls}>Emoji</label>
                                    <EmojiPickerField
                                        compact
                                        value={quadrant.emoji}
                                        onChange={(value) => updateQuadrant(index, { emoji: value })}
                                    />
                                </div>
                                <div>
                                    <label className={labelCls}>Label</label>
                                    <Input
                                        value={quadrant.label}
                                        onChange={(event) => updateQuadrant(index, { label: event.target.value })}
                                        placeholder="e.g. Strengths"
                                    />
                                </div>
                            </div>
                            <div>
                                <label className={labelCls}>ID</label>
                                <Input
                                    value={quadrant.id}
                                    onChange={(event) => updateQuadrant(index, { id: event.target.value })}
                                    placeholder="e.g. strengths"
                                />
                            </div>
                            <div>
                                <label className={labelCls}>Accent color</label>
                                <select
                                    value={quadrant.color}
                                    onChange={(event) => updateQuadrant(index, { color: event.target.value })}
                                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                                >
                                    {SWOT_COLOR_OPTIONS.map((option) => (
                                        <option key={option.value} value={option.value}>{option.label}</option>
                                    ))}
                                </select>
                            </div>

                            <CardEditGroup
                                label="Items"
                                layout="vertical"
                                onAdd={() => setItems(index, [...quadrant.items, emptyItem()])}
                                addLabel="Add item"
                                isEmpty={quadrant.items.length === 0}
                                emptyMessage="No items yet."
                            >
                                {quadrant.items.map((item, itemIndex) => (
                                    <CardEditPanel
                                        key={`item-${index}-${itemIndex}`}
                                        index={itemIndex}
                                        total={quadrant.items.length}
                                        layout="vertical"
                                        positionLabel={`Item ${itemIndex + 1}`}
                                        label={item.text || `Item ${itemIndex + 1}`}
                                        onMoveUp={itemIndex > 0
                                            ? () => setItems(index, moveItem(quadrant.items, itemIndex, -1))
                                            : undefined}
                                        onMoveDown={itemIndex < quadrant.items.length - 1
                                            ? () => setItems(index, moveItem(quadrant.items, itemIndex, 1))
                                            : undefined}
                                        onInsertAfter={() => setItems(index, [
                                            ...quadrant.items.slice(0, itemIndex + 1),
                                            emptyItem(),
                                            ...quadrant.items.slice(itemIndex + 1),
                                        ])}
                                        onRemove={quadrant.items.length > 1
                                            ? () => setItems(
                                                index,
                                                quadrant.items.filter((_, i) => i !== itemIndex),
                                            )
                                            : undefined}
                                    >
                                        <div>
                                            <label className={labelCls}>Text</label>
                                            <textarea
                                                value={item.text}
                                                onChange={(event) => {
                                                    const next = quadrant.items.map((row, rowIndex) => (
                                                        rowIndex === itemIndex
                                                            ? { ...row, text: event.target.value }
                                                            : row
                                                    ));
                                                    setItems(index, next);
                                                }}
                                                rows={2}
                                                className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                                                placeholder="Observation text"
                                            />
                                        </div>
                                        <div>
                                            <label className={labelCls}>Dimension (optional)</label>
                                            <Input
                                                value={item.dimension}
                                                onChange={(event) => {
                                                    const next = quadrant.items.map((row, rowIndex) => (
                                                        rowIndex === itemIndex
                                                            ? { ...row, dimension: event.target.value }
                                                            : row
                                                    ));
                                                    setItems(index, next);
                                                }}
                                                placeholder="e.g. Bold Visionary Leader"
                                            />
                                        </div>
                                    </CardEditPanel>
                                ))}
                            </CardEditGroup>
                        </CardEditPanel>
                    ))}
                </CardEditGroup>
            </div>
        </>
    );
}