// ============================================
// CUE CATALOG — admin tool pra cadastrar/editar tacos
// ============================================
// Edita em memória (window.MastershotData.CUES); botão "Exportar JSON"
// gera o array pronto pra colar em src/menu/data.js. Sem backend ainda —
// mudanças se perdem ao recarregar a página.
//
// Spec do skin: PNG horizontal em src/cues/, naming `NN_Nome+Com+Mais.png`
// (id do cue = filename sem ".png"). main.js detecta o padrão NN_ e
// carrega como skin via buildSkinnedCue.

function CueCatalogScreen({ navigate }) {
    const [cues, setCues] = React.useState(() => [...(window.MastershotData?.CUES || [])]);
    const [editing, setEditing] = React.useState(null);   // null | "new" | {cue}
    const [filter, setFilter]   = React.useState("all");  // all | skin | legacy

    function commitList(next) {
        setCues(next);
        if (window.MastershotData) window.MastershotData.CUES = next;
    }

    function saveCue(cue) {
        const isNew = editing === "new";
        if (isNew && cues.some(c => c.id === cue.id)) {
            window.MastershotAlert(window.t('Já existe taco com id "{id}". Escolha outro id.', { id: cue.id }));
            return;
        }
        const next = isNew
            ? [...cues, cue]
            : cues.map(c => c.id === editing.id ? cue : c);
        commitList(next);
        setEditing(null);
    }

    async function removeCue(id) {
        if (!(await window.MastershotConfirm({ title: window.t('Excluir taco'), message: window.t('Excluir taco "{id}"?', { id }), confirmLabel: window.t('Excluir'), danger: true }))) return;
        commitList(cues.filter(c => c.id !== id));
    }

    function exportJson() {
        const json = JSON.stringify(cues, null, 4);
        try {
            navigator.clipboard.writeText(json);
            window.MastershotAlert(window.t("JSON de {n} tacos copiado pra clipboard.\nCole no array CUES em src/menu/data.js.", { n: cues.length }));
        } catch (e) {
            window.prompt(window.t("Copie manualmente:"), json);
        }
    }

    if (editing) {
        return <CueEditor
            initial={editing === "new" ? null : editing}
            onSave={saveCue}
            onCancel={() => setEditing(null)}
        />;
    }

    const filtered = cues.filter(c => {
        if (filter === "skin")   return !!c.skin;
        if (filter === "legacy") return !c.skin;
        return true;
    });

    return (
        <div className="screen active" style={{ opacity: 1 }}>
            <AmbientBackdrop/>
            <TopBar navigate={navigate}/>

            <div style={{ position: "absolute", top: 88, left: 48, zIndex: 20 }}>
                <button className="back-btn" onClick={() => navigate("admin")}>
                    <span dangerouslySetInnerHTML={{ __html: window.Icon.back(14) }}/><span>{window.t("Admin")}</span>
                </button>
            </div>

            <div style={{
                position: "relative", zIndex: 5,
                paddingTop: 110, paddingBottom: 32, paddingLeft: 48, paddingRight: 48,
                maxWidth: 1400, margin: "0 auto",
                height: "100%", display: "flex", flexDirection: "column", gap: 16,
            }}>
                {/* Header */}
                <div className="panel cc-header" style={{ padding: 24, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <div>
                        <div style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--gold-300)", fontWeight: 700 }}>
                            {window.t("Catálogo de Tacos")}
                        </div>
                        <div style={{ fontSize: 12, color: "var(--ink-300)", marginTop: 4, maxWidth: 720 }}>
                            {window.t("Cadastra/edita tacos. Skin = PNG horizontal (~1512×39) em src/cues/.")}
                            {" "}{window.t("ID do taco precisa bater com o nome do arquivo sem .png (ex:")} <code>01_Chalk+Cue</code>).
                        </div>
                    </div>
                    <div className="cc-actions" style={{ display: "flex", gap: 10 }}>
                        <button className="btn-secondary" onClick={exportJson}>{window.t("Exportar JSON")}</button>
                        <button className="btn-primary" onClick={() => setEditing("new")}>{window.t("+ Adicionar Taco")}</button>
                    </div>
                </div>

                {/* Filtros */}
                <div className="cc-filters" style={{ display: "flex", gap: 8 }}>
                    {[["all", window.t("Todos ({n})", { n: cues.length })], ["skin", window.t("Com skin ({n})", { n: cues.filter(c=>c.skin).length })], ["legacy", window.t("Legacy 3D ({n})", { n: cues.filter(c=>!c.skin).length })]].map(([k, l]) => (
                        <button key={k} className={`tab ${filter===k?"active":""}`} onClick={() => setFilter(k)}>{l}</button>
                    ))}
                </div>

                {/* Lista */}
                <div className="cc-table-wrap" style={{ flex: 1, minHeight: 0, overflowY: "auto", paddingRight: 8 }}>
                    <div className="cc-table-head" style={{
                        display: "grid",
                        gridTemplateColumns: "120px 1fr 100px 120px 140px 100px",
                        gap: 10, padding: "8px 14px",
                        fontSize: 10, fontWeight: 600, letterSpacing: "0.14em",
                        textTransform: "uppercase", color: "var(--ink-400)",
                    }}>
                        <div>{window.t("Preview")}</div><div>{window.t("Nome / ID")}</div><div>{window.t("Tier")}</div><div>{window.t("Unlock")}</div><div>{window.t("P / A / S")}</div><div>{window.t("Ações")}</div>
                    </div>
                    {filtered.map(c => <CueRow key={c.id} cue={c} onEdit={() => setEditing(c)} onDelete={() => removeCue(c.id)}/>)}
                    {filtered.length === 0 && (
                        <div className="panel" style={{ padding: 24, textAlign: "center", color: "var(--ink-400)" }}>
                            {window.t("Nenhum taco neste filtro.")}
                        </div>
                    )}
                </div>
            </div>

            <style>{`
                @media (max-width: 768px) {
                    .cc-header { flex-wrap: wrap !important; gap: 14px !important; padding: 16px !important; }
                    .cc-actions { flex-wrap: wrap !important; }
                    .cc-filters { flex-wrap: wrap !important; }
                    .cc-table-wrap {
                        overflow-x: auto !important;
                        padding-right: 0 !important;
                        overscroll-behavior-x: contain;
                        -webkit-overflow-scrolling: touch;
                    }
                    .cc-table-head, .cc-row { min-width: 660px; }
                }
                @media (max-width: 480px) {
                    .cc-header { flex-direction: column !important; align-items: stretch !important; }
                    .cc-actions button { flex: 1 1 auto; }
                }
            `}</style>
        </div>
    );
}

function CueRow({ cue, onEdit, onDelete }) {
    return (
        <div className="panel cc-row" style={{
            display: "grid",
            gridTemplateColumns: "120px 1fr 100px 120px 140px 100px",
            gap: 10, padding: "10px 14px", alignItems: "center",
            marginBottom: 6,
        }}>
            <div style={{
                height: 28, background: "var(--ink-900)", border: "1px solid var(--ink-700)",
                borderRadius: 4, padding: 2, display: "flex", alignItems: "center", justifyContent: "center",
                overflow: "hidden",
            }}>
                {cue.skin
                    ? <img src={cue.skin} alt={cue.name} style={{ width: "100%", height: "100%", objectFit: "contain" }}/>
                    : <span style={{ fontSize: 10, color: "var(--ink-500)" }}>{window.t("3D legacy")}</span>}
            </div>
            <div>
                <div style={{ fontSize: 13, color: "var(--ink-100)", fontWeight: 600 }}>{cue.name}</div>
                <div style={{ fontSize: 10, color: "var(--ink-400)", fontFamily: "var(--font-mono)" }}>{cue.id}</div>
            </div>
            <div style={{ fontSize: 11, color: "var(--gold-400)" }}>{cue.tier || "—"}</div>
            <div style={{ fontSize: 11, color: "var(--ink-200)" }}>
                {cue.unlock?.type === "level"  && window.t("Nv. {n}", { n: cue.unlock.value })}
                {cue.unlock?.type === "coins"  && `$ ${cue.unlock.value?.toLocaleString?.() || cue.price}`}
                {cue.unlock?.type === "chips"  && `💎 ${cue.unlock.value}`}
                {!cue.unlock?.type && (cue.price > 0 ? `$ ${cue.price.toLocaleString()}` : window.t("Grátis"))}
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-200)" }}>
                {cue.power || "—"} / {cue.accuracy || "—"} / {cue.spin || "—"}
            </div>
            <div style={{ display: "flex", gap: 6 }}>
                <button className="btn-secondary" style={{ fontSize: 10, padding: "4px 8px" }} onClick={onEdit}>{window.t("Editar")}</button>
                <button className="btn-secondary" style={{ fontSize: 10, padding: "4px 8px", color: "var(--loss-bright)" }} onClick={onDelete}>×</button>
            </div>
        </div>
    );
}

function CueEditor({ initial, onSave, onCancel }) {
    const [form, setForm] = React.useState(() => initial ? { ...initial } : {
        id: "", name: "", skin: "", tier: "Iniciante",
        unlock: { type: "level", value: 1 },
        price: 0, owned: false,
        power: 65, accuracy: 65, spin: 60,
    });

    function set(patch) { setForm(f => ({ ...f, ...patch })); }
    function setUnlock(patch) { setForm(f => ({ ...f, unlock: { ...f.unlock, ...patch } })); }

    // Auto-deriva skin path quando id muda (se segue padrão NN_*)
    React.useEffect(() => {
        if (/^\d{2}_/.test(form.id) && !form.skin) {
            set({ skin: `src/cues/${form.id}.png` });
        }
    }, [form.id]);

    function submit(e) {
        e.preventDefault();
        if (!form.id.trim()) { window.MastershotAlert(window.t("ID obrigatório.")); return; }
        if (!form.name.trim()) { window.MastershotAlert(window.t("Nome obrigatório.")); return; }
        onSave({ ...form, id: form.id.trim(), name: form.name.trim() });
    }

    return (
        <div className="screen active" style={{ opacity: 1 }}>
            <AmbientBackdrop/>
            <TopBar navigate={() => {}}/>
            <div className="cc-editor-wrap" style={{
                position: "relative", zIndex: 5, paddingTop: 110, paddingLeft: 48, paddingRight: 48,
                maxWidth: 920, margin: "0 auto", display: "flex", flexDirection: "column", gap: 16,
            }}>
                <div className="panel cc-editor-panel" style={{ padding: 24 }}>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--gold-300)", fontWeight: 700, marginBottom: 4 }}>
                        {initial ? window.t("Editar — {name}", { name: initial.name }) : window.t("Novo Taco")}
                    </div>
                    <div style={{ fontSize: 12, color: "var(--ink-400)" }}>
                        {window.t("Para um taco com skin: salve o PNG em")} <code>src/cues/{form.id || "NN_Nome+Com+Mais"}.png</code>.
                    </div>

                    <form className="cc-form" onSubmit={submit} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 20 }}>
                        <Field label={window.t("ID (= filename sem .png)")} hint={window.t("Ex: 01_Chalk+Cue")}>
                            <input value={form.id} onChange={e => set({ id: e.target.value })} placeholder="01_Chalk+Cue"/>
                        </Field>
                        <Field label={window.t("Nome (display)")}>
                            <input value={form.name} onChange={e => set({ name: e.target.value })} placeholder="Chalk Cue"/>
                        </Field>
                        <Field label={window.t("Skin (path do PNG)")} hint={window.t("Auto-derivado do ID se padrão NN_")}>
                            <input value={form.skin} onChange={e => set({ skin: e.target.value })} placeholder="src/cues/..."/>
                        </Field>
                        <Field label={window.t("Tier")}>
                            <select value={form.tier} onChange={e => set({ tier: e.target.value })}>
                                {["Iniciante", "Comum", "Bronze", "Silver", "Gold", "Raro", "Épico", "Lendário"].map(tier => <option key={tier} value={tier}>{t(tier)}</option>)}
                            </select>
                        </Field>
                        <Field label={window.t("Tipo de Unlock")}>
                            <select value={form.unlock?.type || "level"} onChange={e => setUnlock({ type: e.target.value })}>
                                <option value="level">{window.t("Por nível (patente)")}</option>
                                <option value="coins">{window.t("Por moedas")}</option>
                                <option value="chips">{window.t("Por chips (premium)")}</option>
                            </select>
                        </Field>
                        <Field label={form.unlock?.type === "level" ? window.t("Nível mínimo") : window.t("Custo")}>
                            <input type="number" min="0" value={form.unlock?.value ?? 0} onChange={e => setUnlock({ value: parseInt(e.target.value, 10) || 0 })}/>
                        </Field>
                        <Field label={window.t("Force (1-100)")}>
                            <input type="number" min="0" max="100" value={form.power} onChange={e => set({ power: parseInt(e.target.value, 10) || 0 })}/>
                        </Field>
                        <Field label={window.t("Accuracy (1-100)")}>
                            <input type="number" min="0" max="100" value={form.accuracy} onChange={e => set({ accuracy: parseInt(e.target.value, 10) || 0 })}/>
                        </Field>
                        <Field label={window.t("Spin (1-100)")}>
                            <input type="number" min="0" max="100" value={form.spin} onChange={e => set({ spin: parseInt(e.target.value, 10) || 0 })}/>
                        </Field>

                        {/* Preview */}
                        {form.skin && (
                            <div style={{ gridColumn: "1 / -1" }}>
                                <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-400)", letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 6 }}>{window.t("Preview da skin")}</div>
                                <div style={{ background: "var(--ink-900)", border: "1px solid var(--ink-700)", borderRadius: 4, padding: 4 }}>
                                    <img src={form.skin} alt="preview" style={{ width: "100%", height: 60, objectFit: "contain", display: "block" }}
                                        onError={(e) => { e.target.style.opacity = 0.3; }}/>
                                </div>
                            </div>
                        )}

                        <div className="cc-form-actions" style={{ gridColumn: "1 / -1", display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 8 }}>
                            <button type="button" className="btn-secondary" onClick={onCancel}>{window.t("Cancelar")}</button>
                            <button type="submit" className="btn-primary">{window.t("Salvar")}</button>
                        </div>
                    </form>
                </div>
            </div>

            <style>{`
                @media (max-width: 768px) {
                    .cc-editor-wrap { padding-bottom: 32px !important; }
                    .cc-editor-panel { padding: 16px !important; }
                }
                @media (max-width: 480px) {
                    .cc-form { grid-template-columns: 1fr !important; gap: 12px !important; }
                    .cc-form-actions { flex-wrap: wrap !important; }
                    .cc-form-actions button { flex: 1 1 auto; }
                }
            `}</style>
        </div>
    );
}

function Field({ label, hint, children }) {
    return (
        <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            <span style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-400)", letterSpacing: "0.14em", textTransform: "uppercase" }}>{label}</span>
            {children}
            {hint && <span style={{ fontSize: 10, color: "var(--ink-500)" }}>{hint}</span>}
        </label>
    );
}

Object.assign(window, { CueCatalogScreen });