import { Input } from "@/components/ui/input";
import { CardEditGroup, CardEditPanel } from "./CardEditLayout";
import { EmojiPickerField } from "./EmojiPickerField";
import {
    defaultSampleReportContent,
    parseProgressSampleReportContent,
} from "@/components/page-blocks/ProgressSampleReportBlock";
import type {
    CompetencyRow,
    MasteryRow,
    MasteryScaleLevel,
    NarrativeSection,
    ReadinessItem,
    ReflectionItem,
    SpiderPoint,
} from "@/components/page-blocks/progress-report/types";

type BlockContent = Record<string, unknown>;

const formRow = "mb-4";
const labelCls = "block text-sm font-medium text-slate-700 mb-1.5";
const sectionCls = "mt-6 mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500";

const COLOR_OPTIONS = [
    { value: "moss", label: "Moss" },
    { value: "deep-sea", label: "Deep Sea" },
    { value: "sunflower", label: "Sunflower" },
    { value: "valencia", label: "Valencia" },
];

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;
}

function emptyMasteryRow(): MasteryRow {
    return { subject: "", outcome: "", gradeLevel: "", term1: "", term2: "" };
}

function emptyCompetency(): CompetencyRow {
    return { name: "", description: "", term1: "", term2: "" };
}

function emptySpider(): SpiderPoint {
    return { competency: "", term1: 1, term2: 1 };
}

function emptyReadiness(): ReadinessItem {
    return { subject: "", pct: "", status: "" };
}

function emptyReflection(): ReflectionItem {
    return { emoji: "🌟", label: "", text: "" };
}

function emptyNarrative(): NarrativeSection {
    return { emoji: "📝", label: "", text: "", highlight: false };
}

function emptyScale(): MasteryScaleLevel {
    return { level: 1, label: "", color: "valencia", description: "" };
}

export function ProgressSampleReportForm({
    content,
    onChange,
}: {
    content: BlockContent;
    onChange: (content: BlockContent) => void;
}) {
    const data = parseProgressSampleReportContent(
        Object.keys(content).length > 0 ? content : defaultSampleReportContent() as unknown as BlockContent,
    );
    const set = (patch: Partial<BlockContent>) => onChange({ ...content, ...data, ...patch });

    return (
        <>
            <p className="text-[11px] text-slate-500 mb-4 rounded-lg bg-slate-50 border border-slate-200 px-3 py-2">
                Content for the Progress Report &quot;Sample Report&quot; tab. Pair with Grade Hero → Competition
                Navigation targeting this component.
            </p>

            <p className={sectionCls}>Report header</p>
            <div className={formRow}>
                <label className={labelCls}>School label</label>
                <Input value={data.schoolLabel} onChange={(e) => set({ schoolLabel: e.target.value })} />
            </div>
            <div className={formRow}>
                <label className={labelCls}>Report title</label>
                <Input value={data.reportTitle} onChange={(e) => set({ reportTitle: e.target.value })} />
            </div>
            <div className="grid sm:grid-cols-2 gap-3 mb-4">
                <div>
                    <label className={labelCls}>Student name</label>
                    <Input value={data.studentName} onChange={(e) => set({ studentName: e.target.value })} />
                </div>
                <div>
                    <label className={labelCls}>Grade</label>
                    <Input value={data.studentGrade} onChange={(e) => set({ studentGrade: e.target.value })} />
                </div>
                <div>
                    <label className={labelCls}>Term</label>
                    <Input value={data.studentTerm} onChange={(e) => set({ studentTerm: e.target.value })} />
                </div>
                <div>
                    <label className={labelCls}>Teacher</label>
                    <Input value={data.studentTeacher} onChange={(e) => set({ studentTeacher: e.target.value })} />
                </div>
            </div>

            <p className={sectionCls}>Mastery scale chips</p>
            <div className={formRow}>
                <label className={labelCls}>Scale note</label>
                <textarea
                    value={data.scaleNote}
                    onChange={(e) => set({ scaleNote: e.target.value })}
                    rows={2}
                    className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                />
            </div>
            <div className={formRow}>
                <CardEditGroup
                    label="Scale levels"
                    layout="grid-2"
                    onAdd={() => set({ masteryScale: [...data.masteryScale, emptyScale()] })}
                    addLabel="Add level"
                    isEmpty={data.masteryScale.length === 0}
                >
                    {data.masteryScale.map((level, index) => (
                        <CardEditPanel
                            key={`scale-${index}`}
                            index={index}
                            total={data.masteryScale.length}
                            layout="grid-2"
                            positionLabel={`Level ${index + 1}`}
                            label={level.label || `Level ${level.level}`}
                            preview={{ title: `${level.level} – ${level.label}` }}
                            onMoveUp={index > 0 ? () => set({ masteryScale: moveItem(data.masteryScale, index, -1) }) : undefined}
                            onMoveDown={index < data.masteryScale.length - 1 ? () => set({ masteryScale: moveItem(data.masteryScale, index, 1) }) : undefined}
                            onInsertAfter={() => set({
                                masteryScale: [...data.masteryScale.slice(0, index + 1), emptyScale(), ...data.masteryScale.slice(index + 1)],
                            })}
                            onRemove={data.masteryScale.length > 1
                                ? () => set({ masteryScale: data.masteryScale.filter((_, i) => i !== index) })
                                : undefined}
                        >
                            <div className="grid grid-cols-2 gap-3 mb-3">
                                <div>
                                    <label className={labelCls}>Level #</label>
                                    <Input
                                        type="number"
                                        value={level.level}
                                        onChange={(e) => set({
                                            masteryScale: data.masteryScale.map((item, i) => (
                                                i === index ? { ...item, level: Number(e.target.value) || 0 } : item
                                            )),
                                        })}
                                    />
                                </div>
                                <div>
                                    <label className={labelCls}>Color</label>
                                    <select
                                        value={level.color}
                                        onChange={(e) => set({
                                            masteryScale: data.masteryScale.map((item, i) => (
                                                i === index ? { ...item, color: e.target.value } : item
                                            )),
                                        })}
                                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                                    >
                                        {COLOR_OPTIONS.map((option) => (
                                            <option key={option.value} value={option.value}>{option.label}</option>
                                        ))}
                                    </select>
                                </div>
                            </div>
                            <div>
                                <label className={labelCls}>Label</label>
                                <Input
                                    value={level.label}
                                    onChange={(e) => set({
                                        masteryScale: data.masteryScale.map((item, i) => (
                                            i === index ? { ...item, label: e.target.value } : item
                                        )),
                                    })}
                                />
                            </div>
                        </CardEditPanel>
                    ))}
                </CardEditGroup>
            </div>

            <p className={sectionCls}>Mastery Progress table</p>
            <div className={formRow}>
                <label className={labelCls}>Title</label>
                <Input value={data.masteryProgressTitle} onChange={(e) => set({ masteryProgressTitle: e.target.value })} />
            </div>
            <div className={formRow}>
                <label className={labelCls}>Subtitle</label>
                <Input value={data.masteryProgressSubtitle} onChange={(e) => set({ masteryProgressSubtitle: e.target.value })} />
            </div>
            <div className={formRow}>
                <CardEditGroup
                    label="Mastery rows"
                    layout="vertical"
                    onAdd={() => set({ masteryProgress: [...data.masteryProgress, emptyMasteryRow()] })}
                    addLabel="Add row"
                    isEmpty={data.masteryProgress.length === 0}
                >
                    {data.masteryProgress.map((row, index) => (
                        <CardEditPanel
                            key={`mastery-${index}`}
                            index={index}
                            total={data.masteryProgress.length}
                            layout="vertical"
                            positionLabel={`Row ${index + 1}`}
                            label={row.outcome || `${row.subject} row ${index + 1}`}
                            preview={{ title: row.subject, subtitle: row.outcome }}
                            onMoveUp={index > 0 ? () => set({ masteryProgress: moveItem(data.masteryProgress, index, -1) }) : undefined}
                            onMoveDown={index < data.masteryProgress.length - 1 ? () => set({ masteryProgress: moveItem(data.masteryProgress, index, 1) }) : undefined}
                            onInsertAfter={() => set({
                                masteryProgress: [
                                    ...data.masteryProgress.slice(0, index + 1),
                                    emptyMasteryRow(),
                                    ...data.masteryProgress.slice(index + 1),
                                ],
                            })}
                            onRemove={data.masteryProgress.length > 1
                                ? () => set({ masteryProgress: data.masteryProgress.filter((_, i) => i !== index) })
                                : undefined}
                        >
                            <div className="grid sm:grid-cols-2 gap-3 mb-3">
                                <div>
                                    <label className={labelCls}>Subject</label>
                                    <Input
                                        value={row.subject}
                                        onChange={(e) => set({
                                            masteryProgress: data.masteryProgress.map((item, i) => (
                                                i === index ? { ...item, subject: e.target.value } : item
                                            )),
                                        })}
                                    />
                                </div>
                                <div>
                                    <label className={labelCls}>Grade level</label>
                                    <Input
                                        value={row.gradeLevel}
                                        onChange={(e) => set({
                                            masteryProgress: data.masteryProgress.map((item, i) => (
                                                i === index ? { ...item, gradeLevel: e.target.value } : item
                                            )),
                                        })}
                                    />
                                </div>
                            </div>
                            <div className="mb-3">
                                <label className={labelCls}>Learning outcome</label>
                                <Input
                                    value={row.outcome}
                                    onChange={(e) => set({
                                        masteryProgress: data.masteryProgress.map((item, i) => (
                                            i === index ? { ...item, outcome: e.target.value } : item
                                        )),
                                    })}
                                />
                            </div>
                            <div className="grid sm:grid-cols-2 gap-3">
                                <div>
                                    <label className={labelCls}>Term 1</label>
                                    <Input
                                        value={row.term1}
                                        onChange={(e) => set({
                                            masteryProgress: data.masteryProgress.map((item, i) => (
                                                i === index ? { ...item, term1: e.target.value } : item
                                            )),
                                        })}
                                        placeholder="3 - Meeting"
                                    />
                                </div>
                                <div>
                                    <label className={labelCls}>Term 2</label>
                                    <Input
                                        value={row.term2}
                                        onChange={(e) => set({
                                            masteryProgress: data.masteryProgress.map((item, i) => (
                                                i === index ? { ...item, term2: e.target.value } : item
                                            )),
                                        })}
                                        placeholder="3 - Meeting"
                                    />
                                </div>
                            </div>
                        </CardEditPanel>
                    ))}
                </CardEditGroup>
            </div>

            <p className={sectionCls}>Competency Progress</p>
            <div className={formRow}>
                <label className={labelCls}>Title</label>
                <Input value={data.competencyTitle} onChange={(e) => set({ competencyTitle: e.target.value })} />
            </div>
            <div className={formRow}>
                <label className={labelCls}>Subtitle</label>
                <Input value={data.competencySubtitle} onChange={(e) => set({ competencySubtitle: e.target.value })} />
            </div>
            <div className={formRow}>
                <CardEditGroup
                    label="Competencies"
                    layout="vertical"
                    onAdd={() => set({ competencyProgress: [...data.competencyProgress, emptyCompetency()] })}
                    addLabel="Add competency"
                    isEmpty={data.competencyProgress.length === 0}
                >
                    {data.competencyProgress.map((row, index) => (
                        <CardEditPanel
                            key={`comp-${index}`}
                            index={index}
                            total={data.competencyProgress.length}
                            layout="vertical"
                            positionLabel={`Competency ${index + 1}`}
                            label={row.name || `Competency ${index + 1}`}
                            preview={{ title: row.name, subtitle: `${row.term1} → ${row.term2}` }}
                            onMoveUp={index > 0 ? () => set({ competencyProgress: moveItem(data.competencyProgress, index, -1) }) : undefined}
                            onMoveDown={index < data.competencyProgress.length - 1 ? () => set({ competencyProgress: moveItem(data.competencyProgress, index, 1) }) : undefined}
                            onInsertAfter={() => set({
                                competencyProgress: [
                                    ...data.competencyProgress.slice(0, index + 1),
                                    emptyCompetency(),
                                    ...data.competencyProgress.slice(index + 1),
                                ],
                            })}
                            onRemove={data.competencyProgress.length > 1
                                ? () => set({ competencyProgress: data.competencyProgress.filter((_, i) => i !== index) })
                                : undefined}
                        >
                            <div className="mb-3">
                                <label className={labelCls}>Name</label>
                                <Input
                                    value={row.name}
                                    onChange={(e) => set({
                                        competencyProgress: data.competencyProgress.map((item, i) => (
                                            i === index ? { ...item, name: e.target.value } : item
                                        )),
                                    })}
                                />
                            </div>
                            <div className="mb-3">
                                <label className={labelCls}>Description</label>
                                <textarea
                                    value={row.description}
                                    onChange={(e) => set({
                                        competencyProgress: data.competencyProgress.map((item, i) => (
                                            i === index ? { ...item, description: e.target.value } : item
                                        )),
                                    })}
                                    rows={2}
                                    className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                                />
                            </div>
                            <div className="grid sm:grid-cols-2 gap-3">
                                <div>
                                    <label className={labelCls}>Term 1</label>
                                    <Input
                                        value={row.term1}
                                        onChange={(e) => set({
                                            competencyProgress: data.competencyProgress.map((item, i) => (
                                                i === index ? { ...item, term1: e.target.value } : item
                                            )),
                                        })}
                                    />
                                </div>
                                <div>
                                    <label className={labelCls}>Term 2</label>
                                    <Input
                                        value={row.term2}
                                        onChange={(e) => set({
                                            competencyProgress: data.competencyProgress.map((item, i) => (
                                                i === index ? { ...item, term2: e.target.value } : item
                                            )),
                                        })}
                                    />
                                </div>
                            </div>
                        </CardEditPanel>
                    ))}
                </CardEditGroup>
            </div>

            <p className={sectionCls}>Spiderweb</p>
            <div className={formRow}>
                <label className={labelCls}>Title</label>
                <Input value={data.spiderTitle} onChange={(e) => set({ spiderTitle: e.target.value })} />
            </div>
            <div className={formRow}>
                <label className={labelCls}>Subtitle</label>
                <Input value={data.spiderSubtitle} onChange={(e) => set({ spiderSubtitle: e.target.value })} />
            </div>
            <div className={formRow}>
                <CardEditGroup
                    label="Spider points"
                    layout="grid-2"
                    onAdd={() => set({ spiderPoints: [...data.spiderPoints, emptySpider()] })}
                    addLabel="Add point"
                    isEmpty={data.spiderPoints.length === 0}
                >
                    {data.spiderPoints.map((point, index) => (
                        <CardEditPanel
                            key={`spider-${index}`}
                            index={index}
                            total={data.spiderPoints.length}
                            layout="grid-2"
                            positionLabel={`Point ${index + 1}`}
                            label={point.competency || `Point ${index + 1}`}
                            preview={{ title: point.competency, subtitle: `T1 ${point.term1} / T2 ${point.term2}` }}
                            onMoveUp={index > 0 ? () => set({ spiderPoints: moveItem(data.spiderPoints, index, -1) }) : undefined}
                            onMoveDown={index < data.spiderPoints.length - 1 ? () => set({ spiderPoints: moveItem(data.spiderPoints, index, 1) }) : undefined}
                            onInsertAfter={() => set({
                                spiderPoints: [...data.spiderPoints.slice(0, index + 1), emptySpider(), ...data.spiderPoints.slice(index + 1)],
                            })}
                            onRemove={data.spiderPoints.length > 1
                                ? () => set({ spiderPoints: data.spiderPoints.filter((_, i) => i !== index) })
                                : undefined}
                        >
                            <div className="mb-3">
                                <label className={labelCls}>Competency</label>
                                <Input
                                    value={point.competency}
                                    onChange={(e) => set({
                                        spiderPoints: data.spiderPoints.map((item, i) => (
                                            i === index ? { ...item, competency: e.target.value } : item
                                        )),
                                    })}
                                />
                            </div>
                            <div className="grid grid-cols-2 gap-3">
                                <div>
                                    <label className={labelCls}>Term 1 (0–4)</label>
                                    <Input
                                        type="number"
                                        min={0}
                                        max={4}
                                        value={point.term1}
                                        onChange={(e) => set({
                                            spiderPoints: data.spiderPoints.map((item, i) => (
                                                i === index ? { ...item, term1: Number(e.target.value) || 0 } : item
                                            )),
                                        })}
                                    />
                                </div>
                                <div>
                                    <label className={labelCls}>Term 2 (0–4)</label>
                                    <Input
                                        type="number"
                                        min={0}
                                        max={4}
                                        value={point.term2}
                                        onChange={(e) => set({
                                            spiderPoints: data.spiderPoints.map((item, i) => (
                                                i === index ? { ...item, term2: Number(e.target.value) || 0 } : item
                                            )),
                                        })}
                                    />
                                </div>
                            </div>
                        </CardEditPanel>
                    ))}
                </CardEditGroup>
            </div>

            <p className={sectionCls}>Readiness</p>
            <div className={formRow}>
                <label className={labelCls}>Title</label>
                <Input value={data.readinessTitle} onChange={(e) => set({ readinessTitle: e.target.value })} />
            </div>
            <div className={formRow}>
                <label className={labelCls}>Subtitle</label>
                <Input value={data.readinessSubtitle} onChange={(e) => set({ readinessSubtitle: e.target.value })} />
            </div>
            <div className={formRow}>
                <CardEditGroup
                    label="Readiness cards"
                    layout="grid-3"
                    onAdd={() => set({ readiness: [...data.readiness, emptyReadiness()] })}
                    addLabel="Add subject"
                    isEmpty={data.readiness.length === 0}
                >
                    {data.readiness.map((item, index) => (
                        <CardEditPanel
                            key={`ready-${index}`}
                            index={index}
                            total={data.readiness.length}
                            layout="grid-3"
                            positionLabel={`Subject ${index + 1}`}
                            label={item.subject || `Subject ${index + 1}`}
                            preview={{ title: item.subject, subtitle: `${item.pct} · ${item.status}` }}
                            onMoveUp={index > 0 ? () => set({ readiness: moveItem(data.readiness, index, -1) }) : undefined}
                            onMoveDown={index < data.readiness.length - 1 ? () => set({ readiness: moveItem(data.readiness, index, 1) }) : undefined}
                            onInsertAfter={() => set({
                                readiness: [...data.readiness.slice(0, index + 1), emptyReadiness(), ...data.readiness.slice(index + 1)],
                            })}
                            onRemove={data.readiness.length > 1
                                ? () => set({ readiness: data.readiness.filter((_, i) => i !== index) })
                                : undefined}
                        >
                            <div className="mb-3">
                                <label className={labelCls}>Subject</label>
                                <Input
                                    value={item.subject}
                                    onChange={(e) => set({
                                        readiness: data.readiness.map((row, i) => (i === index ? { ...row, subject: e.target.value } : row)),
                                    })}
                                />
                            </div>
                            <div className="mb-3">
                                <label className={labelCls}>Percent</label>
                                <Input
                                    value={item.pct}
                                    onChange={(e) => set({
                                        readiness: data.readiness.map((row, i) => (i === index ? { ...row, pct: e.target.value } : row)),
                                    })}
                                />
                            </div>
                            <div>
                                <label className={labelCls}>Status</label>
                                <Input
                                    value={item.status}
                                    onChange={(e) => set({
                                        readiness: data.readiness.map((row, i) => (i === index ? { ...row, status: e.target.value } : row)),
                                    })}
                                />
                            </div>
                        </CardEditPanel>
                    ))}
                </CardEditGroup>
            </div>

            <p className={sectionCls}>Student reflection</p>
            <div className={formRow}>
                <label className={labelCls}>Title</label>
                <Input value={data.reflectionTitle} onChange={(e) => set({ reflectionTitle: e.target.value })} />
            </div>
            <div className={formRow}>
                <CardEditGroup
                    label="Reflection items"
                    layout="vertical"
                    onAdd={() => set({ reflectionItems: [...data.reflectionItems, emptyReflection()] })}
                    addLabel="Add reflection"
                    isEmpty={data.reflectionItems.length === 0}
                >
                    {data.reflectionItems.map((item, index) => (
                        <CardEditPanel
                            key={`reflect-${index}`}
                            index={index}
                            total={data.reflectionItems.length}
                            layout="vertical"
                            positionLabel={`Item ${index + 1}`}
                            label={item.label || `Item ${index + 1}`}
                            preview={{ emoji: item.emoji, title: item.label, subtitle: item.text }}
                            onMoveUp={index > 0 ? () => set({ reflectionItems: moveItem(data.reflectionItems, index, -1) }) : undefined}
                            onMoveDown={index < data.reflectionItems.length - 1 ? () => set({ reflectionItems: moveItem(data.reflectionItems, index, 1) }) : undefined}
                            onInsertAfter={() => set({
                                reflectionItems: [
                                    ...data.reflectionItems.slice(0, index + 1),
                                    emptyReflection(),
                                    ...data.reflectionItems.slice(index + 1),
                                ],
                            })}
                            onRemove={data.reflectionItems.length > 1
                                ? () => set({ reflectionItems: data.reflectionItems.filter((_, i) => i !== index) })
                                : undefined}
                        >
                            <div className="grid sm:grid-cols-[auto_1fr] gap-3 mb-3">
                                <div>
                                    <label className={labelCls}>Emoji</label>
                                    <EmojiPickerField
                                        compact
                                        value={item.emoji}
                                        onChange={(value) => set({
                                            reflectionItems: data.reflectionItems.map((row, i) => (
                                                i === index ? { ...row, emoji: value } : row
                                            )),
                                        })}
                                    />
                                </div>
                                <div>
                                    <label className={labelCls}>Label</label>
                                    <Input
                                        value={item.label}
                                        onChange={(e) => set({
                                            reflectionItems: data.reflectionItems.map((row, i) => (
                                                i === index ? { ...row, label: e.target.value } : row
                                            )),
                                        })}
                                    />
                                </div>
                            </div>
                            <div>
                                <label className={labelCls}>Text</label>
                                <textarea
                                    value={item.text}
                                    onChange={(e) => set({
                                        reflectionItems: data.reflectionItems.map((row, i) => (
                                            i === index ? { ...row, text: e.target.value } : row
                                        )),
                                    })}
                                    rows={3}
                                    className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                                />
                            </div>
                        </CardEditPanel>
                    ))}
                </CardEditGroup>
            </div>

            <p className={sectionCls}>Teacher narrative</p>
            <div className={formRow}>
                <label className={labelCls}>Title</label>
                <Input value={data.narrativeTitle} onChange={(e) => set({ narrativeTitle: e.target.value })} />
            </div>
            <div className={formRow}>
                <CardEditGroup
                    label="Narrative sections"
                    layout="vertical"
                    onAdd={() => set({ narrativeSections: [...data.narrativeSections, emptyNarrative()] })}
                    addLabel="Add section"
                    isEmpty={data.narrativeSections.length === 0}
                >
                    {data.narrativeSections.map((section, index) => (
                        <CardEditPanel
                            key={`narrative-${index}`}
                            index={index}
                            total={data.narrativeSections.length}
                            layout="vertical"
                            positionLabel={`Section ${index + 1}`}
                            label={section.label || `Section ${index + 1}`}
                            preview={{ emoji: section.emoji, title: section.label, subtitle: section.text }}
                            onMoveUp={index > 0 ? () => set({ narrativeSections: moveItem(data.narrativeSections, index, -1) }) : undefined}
                            onMoveDown={index < data.narrativeSections.length - 1 ? () => set({ narrativeSections: moveItem(data.narrativeSections, index, 1) }) : undefined}
                            onInsertAfter={() => set({
                                narrativeSections: [
                                    ...data.narrativeSections.slice(0, index + 1),
                                    emptyNarrative(),
                                    ...data.narrativeSections.slice(index + 1),
                                ],
                            })}
                            onRemove={data.narrativeSections.length > 1
                                ? () => set({ narrativeSections: data.narrativeSections.filter((_, i) => i !== index) })
                                : undefined}
                        >
                            <div className="grid sm:grid-cols-[auto_1fr_auto] gap-3 mb-3 items-end">
                                <div>
                                    <label className={labelCls}>Emoji</label>
                                    <EmojiPickerField
                                        compact
                                        value={section.emoji}
                                        onChange={(value) => set({
                                            narrativeSections: data.narrativeSections.map((row, i) => (
                                                i === index ? { ...row, emoji: value } : row
                                            )),
                                        })}
                                    />
                                </div>
                                <div>
                                    <label className={labelCls}>Label</label>
                                    <Input
                                        value={section.label}
                                        onChange={(e) => set({
                                            narrativeSections: data.narrativeSections.map((row, i) => (
                                                i === index ? { ...row, label: e.target.value } : row
                                            )),
                                        })}
                                    />
                                </div>
                                <label className="flex items-center gap-2 text-sm text-slate-700 pb-2">
                                    <input
                                        type="checkbox"
                                        checked={Boolean(section.highlight)}
                                        onChange={(e) => set({
                                            narrativeSections: data.narrativeSections.map((row, i) => (
                                                i === index ? { ...row, highlight: e.target.checked } : row
                                            )),
                                        })}
                                    />
                                    Highlight
                                </label>
                            </div>
                            <div>
                                <label className={labelCls}>Text</label>
                                <textarea
                                    value={section.text}
                                    onChange={(e) => set({
                                        narrativeSections: data.narrativeSections.map((row, i) => (
                                            i === index ? { ...row, text: e.target.value } : row
                                        )),
                                    })}
                                    rows={3}
                                    className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                                />
                            </div>
                        </CardEditPanel>
                    ))}
                </CardEditGroup>
            </div>

            <p className={sectionCls}>Learning Journey Archive</p>
            <div className={formRow}>
                <label className={labelCls}>Title</label>
                <Input value={data.archiveTitle} onChange={(e) => set({ archiveTitle: e.target.value })} />
            </div>
            <div className={formRow}>
                <label className={labelCls}>Archive items (one per line)</label>
                <textarea
                    value={data.archiveItems.join("\n")}
                    onChange={(e) => set({
                        archiveItems: e.target.value.split("\n").map((line) => line.trim()).filter(Boolean),
                    })}
                    rows={4}
                    className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                />
            </div>
        </>
    );
}