import { Field } from '@/Components/ui';
import type { HowItWorksSection } from '@/marketing/cms-types';
import { HEADLINE_EDITOR_PREVIEW, ItemList, LabeledRichText, RowTools } from './shared';

type Item = HowItWorksSection['items'][number];

type Props = {
    value: HowItWorksSection;
    onChange: (next: HowItWorksSection) => void;
    errors?: Record<string, string>;
};

function blankItem(): Item {
    return { n: '', time: '', title: '', body: '' };
}

export default function HowItWorksEditor({ value, onChange, errors }: Props) {
    const e = errors ?? {};

    return (
        <div className="space-y-4">
            <Field
                id={`${value.id}-eyebrow`}
                label="Eyebrow"
                value={value.eyebrow ?? ''}
                onChange={(ev) => onChange({ ...value, eyebrow: ev.target.value })}
                placeholder="Optional badge label (e.g. Features)"
                error={e.eyebrow}
                hint="Plain text — uppercase pill above the heading. Leave blank to hide."
                labelClassName="text-[11px] font-medium"
            />
            <LabeledRichText
                id={`${value.id}-heading`}
                label="Heading"
                value={value.heading ?? ''}
                onChange={(html) => onChange({ ...value, heading: html })}
                error={e.heading}
                hint="Italicize the accent phrase via the toolbar. Block formatting is stripped on render."
                minHeight={70}
                            editorClassName={HEADLINE_EDITOR_PREVIEW}
            />
            <LabeledRichText
                id={`${value.id}-subhead`}
                label="Subhead (optional)"
                value={value.subhead ?? ''}
                onChange={(v) => onChange({ ...value, subhead: v })}
                error={e.subhead}
            />

            <div>
                <p className="mb-2 text-[11px] font-medium text-foreground">Steps</p>
                <ItemList<Item>
                    items={value.items}
                    onChange={(items) => onChange({ ...value, items })}
                    blank={blankItem}
                    addLabel="Add step"
                    emptyLabel="No steps yet."
                    confirmDelete={(it) =>
                        `Delete step "${it.title?.trim() || it.n || 'untitled'}"?`
                    }
                    renderRow={(item, idx, h) => {
                        const itemErr = (k: string) => e[`items.${idx}.${k}`];
                        return (
                            <div
                                key={`${value.id}-step-${idx}`}
                                className="rounded-lg border border-border bg-background/40 p-3"
                            >
                                <div className="grid gap-3 sm:grid-cols-[80px_120px_minmax(0,1fr)_auto]">
                                    <Field
                                        id={`${value.id}-step-${idx}-n`}
                                        label="Number"
                                        value={item.n ?? ''}
                                        onChange={(ev) => h.update({ n: ev.target.value })}
                                        error={itemErr('n')}
                                        placeholder="01"
                                    />
                                    <Field
                                        id={`${value.id}-step-${idx}-time`}
                                        label="Time"
                                        value={item.time ?? ''}
                                        onChange={(ev) => h.update({ time: ev.target.value })}
                                        error={itemErr('time')}
                                        placeholder="30 seconds"
                                    />
                                    <Field
                                        id={`${value.id}-step-${idx}-title`}
                                        label="Title"
                                        value={item.title ?? ''}
                                        onChange={(ev) => h.update({ title: ev.target.value })}
                                        error={itemErr('title')}
                                        placeholder="Pick a kit"
                                    />
                                    <div className="flex items-end">
                                        <RowTools
                                            idx={idx}
                                            count={value.items.length}
                                            onMove={h.move}
                                            onRemove={h.remove}
                                            moveLabel="step"
                                            removeLabel="step"
                                        />
                                    </div>
                                </div>
                                <div className="mt-3">
                                    <LabeledRichText
                                        id={`${value.id}-step-${idx}-body`}
                                        label="Body"
                                        value={item.body ?? ''}
                                        onChange={(v) => h.update({ body: v })}
                                        error={itemErr('body')}
                                    />
                                </div>
                            </div>
                        );
                    }}
                />
            </div>
        </div>
    );
}
