d4rkbot/frontend/src/components/EmbedComposer.jsx

// Composer v2 (Vorbild: message.style / embed-generator): voller Embed-Builder
// mit Live-Vorschau im Discord-Look + speicherbaren Vorlagen.
import { useEffect, useState } from 'react';
import { apiGet, apiPost, apiPut, apiDelete } from '../api.js';
import { Markdown } from '../markdown.jsx';

const EMPTY_EMBED = {
    author_name: '', author_icon: '', title: '', url: '', description: '',
    color: '#f5c518', thumbnail: '', image: '', footer: '', timestamp: true,
    fields: [],
};

/** Builder-State → Discord-Embed-Objekt (nur gesetzte Felder) */
function toApiEmbed(e) {
    const out = {};
    if (e.author_name.trim()) {
        out.author = { name: e.author_name.trim() };
        if (e.author_icon.trim()) out.author.icon_url = e.author_icon.trim();
    }
    if (e.title.trim()) out.title = e.title.trim();
    if (e.url.trim()) out.url = e.url.trim();
    if (e.description.trim()) out.description = e.description;
    out.color = parseInt(e.color.replace('#', ''), 16) || 0xf5c518;
    if (e.thumbnail.trim()) out.thumbnail = { url: e.thumbnail.trim() };
    if (e.image.trim()) out.image = { url: e.image.trim() };
    if (e.footer.trim()) out.footer = { text: e.footer.trim() };
    if (e.timestamp) out.timestamp = new Date().toISOString();
    const fields = e.fields.filter((f) => f.name.trim() && f.value.trim());
    if (fields.length) out.fields = fields;
    return out;
}

/** Discord-Embed-Objekt (aus Vorlage) → Builder-State */
function fromApiEmbed(embed) {
    if (!embed) return { ...EMPTY_EMBED, fields: [] };
    return {
        author_name: embed.author?.name ?? '',
        author_icon: embed.author?.icon_url ?? '',
        title: embed.title ?? '',
        url: embed.url ?? '',
        description: embed.description ?? '',
        color: `#${Number(embed.color ?? 0xf5c518).toString(16).padStart(6, '0')}`,
        thumbnail: embed.thumbnail?.url ?? '',
        image: embed.image?.url ?? '',
        footer: embed.footer?.text ?? '',
        timestamp: Boolean(embed.timestamp),
        fields: (embed.fields ?? []).map((f) => ({ name: f.name, value: f.value, inline: Boolean(f.inline) })),
    };
}

/** Live-Vorschau im Discord-Look */
function DiscordPreview({ content, embed, useEmbed }) {
    const hasEmbed = useEmbed && (embed.title || embed.description || embed.author_name || embed.fields.some((f) => f.name));
    return (
        <div className="dpv">
            <div className="dpv-msg">
                <div className="dpv-avatar">🤖</div>
                <div className="dpv-body">
                    <div className="dpv-name">d4rkbot <span className="dpv-tag">APP</span> <span className="dpv-time">heute um {new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr</span></div>
                    {content.trim() && <div className="dpv-content"><Markdown text={content} /></div>}
                    {hasEmbed && (
                        <div className="dpv-embed" style={{ borderLeftColor: embed.color }}>
                            <div className="dpv-embed-main">
                                {embed.author_name && (
                                    <div className="dpv-author">
                                        {embed.author_icon && <img src={embed.author_icon} alt="" />}
                                        {embed.author_name}
                                    </div>
                                )}
                                {embed.title && <div className="dpv-title">{embed.title}</div>}
                                {embed.description && <div className="dpv-desc"><Markdown text={embed.description} /></div>}
                                {embed.fields.filter((f) => f.name && f.value).length > 0 && (
                                    <div className="dpv-fields">
                                        {embed.fields.filter((f) => f.name && f.value).map((f, i) => (
                                            <div className={`dpv-field ${f.inline ? 'inline' : ''}`} key={i}>
                                                <div className="dpv-field-name">{f.name}</div>
                                                <div className="dpv-field-value"><Markdown text={f.value} /></div>
                                            </div>
                                        ))}
                                    </div>
                                )}
                                {embed.image && <img className="dpv-image" src={embed.image} alt="" />}
                                {(embed.footer || embed.timestamp) && (
                                    <div className="dpv-footer">
                                        {embed.footer}{embed.footer && embed.timestamp ? ' • ' : ''}{embed.timestamp ? 'heute' : ''}
                                    </div>
                                )}
                            </div>
                            {embed.thumbnail && <img className="dpv-thumb" src={embed.thumbnail} alt="" />}
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}

export default function EmbedComposer({ channelOptions, flash }) {
    const [channel, setChannel] = useState('');
    const [messageId, setMessageId] = useState('');
    const [content, setContent] = useState('');
    const [useEmbed, setUseEmbed] = useState(true);
    const [embed, setEmbed] = useState({ ...EMPTY_EMBED, fields: [] });
    const [templates, setTemplates] = useState([]);
    const [templateName, setTemplateName] = useState('');

    useEffect(() => {
        apiGet('/api/templates').then((d) => setTemplates(d.templates)).catch(() => {});
    }, []);

    const setE = (patch) => setEmbed({ ...embed, ...patch });
    const setField = (i, patch) =>
        setE({ fields: embed.fields.map((f, j) => (j === i ? { ...f, ...patch } : f)) });

    async function send() {
        if (!channel) return flash('✗ Kanal wählen');
        const apiEmbed = useEmbed ? toApiEmbed(embed) : undefined;
        if (!content.trim() && !useEmbed) return flash('✗ Text oder Embed nötig');
        try {
            const res = await apiPost('/api/compose', {
                channel_id: channel,
                message_id: messageId.trim() || undefined,
                content,
                embed: apiEmbed,
            });
            flash(res.edited ? '✓ Aktualisiert' : `✓ Gesendet (ID ${res.message_id})`);
            if (!res.edited) setMessageId(res.message_id);
        } catch {
            flash('✗ Senden fehlgeschlagen');
        }
    }

    async function saveTemplate() {
        if (!templateName.trim()) return flash('✗ Vorlagen-Name nötig');
        try {
            const res = await apiPut(`/api/templates/${encodeURIComponent(templateName.trim())}`, {
                content,
                embed: useEmbed ? toApiEmbed(embed) : null,
            });
            setTemplates(res.templates);
            flash('✓ Vorlage gespeichert');
        } catch {
            flash('✗ Vorlage fehlgeschlagen');
        }
    }

    function loadTemplate(name) {
        const t = templates.find((x) => x.name === name);
        if (!t) return;
        setContent(t.payload.content ?? '');
        setUseEmbed(Boolean(t.payload.embed));
        setEmbed(fromApiEmbed(t.payload.embed));
        setTemplateName(name);
    }

    async function removeTemplate() {
        if (!templateName.trim() || !window.confirm(`Vorlage „${templateName}" löschen?`)) return;
        const res = await apiDelete(`/api/templates/${encodeURIComponent(templateName.trim())}`).catch(() => null);
        if (res) { setTemplates(res.templates); setTemplateName(''); flash('✓ Vorlage gelöscht'); }
    }

    return (
        <div className="settings-section">
            <h2 className="settings-title">// Post verfassen</h2>

            <div className="field">
                <div className="field-row">
                    <select value={channel} onChange={(e) => setChannel(e.target.value)}>
                        <option value="" disabled>— Kanal wählen —</option>
                        {channelOptions}
                    </select>
                    <input type="text" style={{ flex: 'none', width: '13rem' }} placeholder="Message-ID (= bearbeiten)" value={messageId} onChange={(e) => setMessageId(e.target.value)} />
                </div>
            </div>
            <div className="field">
                <div className="field-row">
                    <select style={{ flex: 1 }} value={templateName} onChange={(e) => loadTemplate(e.target.value)}>
                        <option value="">— Vorlage laden —</option>
                        {templates.map((t) => <option key={t.name} value={t.name}>{t.name}</option>)}
                    </select>
                    <input type="text" style={{ flex: 1 }} placeholder="Als Vorlage speichern unter…" value={templateName} onChange={(e) => setTemplateName(e.target.value)} />
                    <button className="btn" onClick={saveTemplate}>💾</button>
                    <button className="card-delete" title="Vorlage löschen" onClick={removeTemplate}>✕</button>
                </div>
            </div>

            <div className="composer-grid">
                <div className="composer-form">
                    <div className="field">
                        <label>Text über dem Embed <span className="field-hint">Discord-Markdown</span></label>
                        <textarea rows={3} value={content} onChange={(e) => setContent(e.target.value)} />
                    </div>
                    <div className="field">
                        <label className="toggle">
                            <input type="checkbox" checked={useEmbed} onChange={(e) => setUseEmbed(e.target.checked)} />
                            <span>Embed anhängen</span>
                        </label>
                    </div>

                    {useEmbed && (
                        <>
                            <div className="field">
                                <div className="field-row">
                                    <input type="color" className="color-pick" title="Embed-Farbe" value={embed.color} onChange={(e) => setE({ color: e.target.value })} />
                                    <input type="text" placeholder="Author-Name" value={embed.author_name} onChange={(e) => setE({ author_name: e.target.value })} />
                                    <input type="text" placeholder="Author-Icon-URL" value={embed.author_icon} onChange={(e) => setE({ author_icon: e.target.value })} />
                                </div>
                            </div>
                            <div className="field">
                                <div className="field-row">
                                    <input type="text" placeholder="Titel" value={embed.title} onChange={(e) => setE({ title: e.target.value })} />
                                    <input type="text" placeholder="Titel-URL" value={embed.url} onChange={(e) => setE({ url: e.target.value })} />
                                </div>
                            </div>
                            <div className="field">
                                <textarea rows={5} placeholder="Beschreibung (Markdown: **fett**, Listen, ## Überschriften …)" value={embed.description} onChange={(e) => setE({ description: e.target.value })} />
                            </div>
                            <div className="field">
                                <div className="field-row">
                                    <input type="text" placeholder="Thumbnail-URL (klein, rechts)" value={embed.thumbnail} onChange={(e) => setE({ thumbnail: e.target.value })} />
                                    <input type="text" placeholder="Bild-URL (groß, unten)" value={embed.image} onChange={(e) => setE({ image: e.target.value })} />
                                </div>
                            </div>
                            <div className="field">
                                <label>Felder</label>
                                {embed.fields.map((f, i) => (
                                    <div className="rr-row" key={i}>
                                        <input type="text" style={{ flex: 'none', width: '11rem' }} placeholder="Feld-Name" value={f.name} onChange={(e) => setField(i, { name: e.target.value })} />
                                        <input type="text" placeholder="Feld-Wert" value={f.value} onChange={(e) => setField(i, { value: e.target.value })} />
                                        <label className="scope-pick" title="Nebeneinander">
                                            <input type="checkbox" checked={f.inline} onChange={(e) => setField(i, { inline: e.target.checked })} />
                                            inline
                                        </label>
                                        <button className="card-delete" onClick={() => setE({ fields: embed.fields.filter((_, j) => j !== i) })}>✕</button>
                                    </div>
                                ))}
                                <button className="btn btn-mini" style={{ marginTop: '.4rem' }} disabled={embed.fields.length >= 25}
                                    onClick={() => setE({ fields: [...embed.fields, { name: '', value: '', inline: true }] })}>+ Feld</button>
                            </div>
                            <div className="field">
                                <div className="field-row">
                                    <input type="text" placeholder="Footer-Text" value={embed.footer} onChange={(e) => setE({ footer: e.target.value })} />
                                    <label className="scope-pick"><input type="checkbox" checked={embed.timestamp} onChange={(e) => setE({ timestamp: e.target.checked })} /> Zeitstempel</label>
                                </div>
                            </div>
                        </>
                    )}

                    <div className="settings-actions">
                        <button className="btn btn-save" onClick={send}>{messageId.trim() ? 'Aktualisieren' : 'Senden'}</button>
                        {messageId.trim() && <button className="btn btn-ghost" onClick={() => setMessageId('')}>Neu statt bearbeiten</button>}
                    </div>
                </div>

                <div className="composer-preview">
                    <label>Vorschau</label>
                    <DiscordPreview content={content} embed={embed} useEmbed={useEmbed} />
                </div>
            </div>
        </div>
    );
}