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

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

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

function blankItem(): Item {
    return { q: '', a: '' };
}

export default function FaqEditor({ 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}-supportText`}
                label="Support text (optional)"
                value={value.supportText ?? ''}
                onChange={(html) => onChange({ ...value, supportText: html })}
                error={e.supportText}
                placeholder="Can't find what you're looking for? Drop a line on the contact page."
                minHeight={80}
                hint="Renders next to the heading. Add a link to your contact/support page."
            />

            <div>
                <p className="mb-2 text-[11px] font-medium text-foreground">Questions</p>
                <ItemList<Item>
                    items={value.items}
                    onChange={(items) => onChange({ ...value, items })}
                    blank={blankItem}
                    addLabel="Add question"
                    emptyLabel="No questions yet."
                    confirmDelete={(it) =>
                        `Delete question "${(it.q ?? '').slice(0, 40) || 'untitled'}"?`
                    }
                    renderRow={(item, idx, h) => {
                        const itemErr = (k: string) => e[`items.${idx}.${k}`];
                        return (
                            <div
                                key={`${value.id}-faq-${idx}`}
                                className="rounded-lg border border-border bg-background/40 p-3"
                            >
                                <div className="flex justify-end">
                                    <RowTools
                                        idx={idx}
                                        count={value.items.length}
                                        onMove={h.move}
                                        onRemove={h.remove}
                                        moveLabel="question"
                                        removeLabel="question"
                                    />
                                </div>
                                <div className="mt-2 space-y-3">
                                    <Field
                                        id={`${value.id}-faq-${idx}-q`}
                                        label="Question"
                                        value={item.q ?? ''}
                                        onChange={(ev) => h.update({ q: ev.target.value })}
                                        error={itemErr('q')}
                                    />
                                    <LabeledRichText
                                        id={`${value.id}-faq-${idx}-a`}
                                        label="Answer"
                                        value={item.a ?? ''}
                                        onChange={(v) => h.update({ a: v })}
                                        error={itemErr('a')}
                                    />
                                </div>
                            </div>
                        );
                    }}
                />
            </div>
        </div>
    );
}
