/* ZEN SUSHI — Painel de blog funcional (/admin).
   Login simples → gerenciar artigos (criar, editar, excluir) com upload
   de imagem. Posts salvos no navegador (localStorage) via window.KZ_BLOG. */
const { Button: AB, Badge: ABd, Card: ACd, Eyebrow: AEy, KatanaDivider: AKD } = window.KAZUKIDesignSystem_63706c;
const adminSeo = window.KZ_SEO;
const BLOG = window.KZ_BLOG;
const CATEGORIAS = ["Novidades", "Cozinha", "Vinhos", "Confeitaria", "Experiências", "Promoções"];
const AUTH_KEY = "zenSushiAdminAuth";

/* Redimensiona a imagem enviada para no máx. 1280px e exporta JPEG (q .82),
   mantendo o localStorage leve. Retorna data URL (base64). */
function fileToOptimizedDataURL(file, maxW) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      const img = new Image();
      img.onload = () => {
        const scale = Math.min(1, maxW / img.width);
        const w = Math.round(img.width * scale);
        const h = Math.round(img.height * scale);
        const c = document.createElement("canvas");
        c.width = w; c.height = h;
        c.getContext("2d").drawImage(img, 0, 0, w, h);
        try { resolve(c.toDataURL("image/jpeg", 0.82)); }
        catch (e) { resolve(reader.result); }
      };
      img.onerror = reject;
      img.src = reader.result;
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

function emptyDraft() {
  return {
    titulo: "", resumo: "", autor: "Equipe ZEN SUSHI",
    categoria: "Novidades", data: new Date().toISOString().slice(0, 10),
    img: "", imgAlt: "",
    topicos: [{ h2: "", p: "" }],
    dicas: { h3: "", p: "" },
    cta: "Reserve sua mesa no ZEN SUSHI",
    slug: "",
  };
}

function AdminPage() {
  const [authed, setAuthed] = React.useState(() => sessionStorage.getItem(AUTH_KEY) === "1");
  const [user, setUser] = React.useState("");
  const [pass, setPass] = React.useState("");
  const [err, setErr] = React.useState(false);

  const [mode, setMode] = React.useState("list"); // list | edit
  const [draft, setDraft] = React.useState(emptyDraft());
  const [originalSlug, setOriginalSlug] = React.useState(null);
  const [refresh, setRefresh] = React.useState(0);
  const [toast, setToast] = React.useState("");
  const [busy, setBusy] = React.useState(false);

  React.useEffect(() => { adminSeo.track("admin_access", { autenticado: authed }); }, []);
  React.useEffect(() => {
    if (!toast) return;
    const t = setTimeout(() => setToast(""), 2600);
    return () => clearTimeout(t);
  }, [toast]);

  const login = (e) => {
    e.preventDefault();
    if (user.trim() && pass.trim()) {
      setAuthed(true); setErr(false);
      sessionStorage.setItem(AUTH_KEY, "1");
      adminSeo.track("admin_access", { autenticado: true, usuario: user });
    } else { setErr(true); }
  };
  const logout = () => { setAuthed(false); sessionStorage.removeItem(AUTH_KEY); };

  /* ---------- LOGIN ---------- */
  if (!authed) {
    return (
      <div className="kz-admin-login-wrap">
        <ACd pattern className="kz-admin-login">
          <span className="kz-admin-lock">🔒</span>
          <h1 className="kz-h2" style={{ marginTop: 0 }}>Área Restrita</h1>
          <p className="kz-body">Painel de blog do ZEN SUSHI. Esta página é <code>noindex, nofollow</code>.</p>
          <form className="kz-form" onSubmit={login} noValidate>
            <div className="kz-field">
              <label htmlFor="a-user">Usuário</label>
              <input id="a-user" value={user} onChange={(e) => setUser(e.target.value)} placeholder="admin" autoComplete="username" />
            </div>
            <div className="kz-field">
              <label htmlFor="a-pass">Senha</label>
              <input id="a-pass" type="password" value={pass} onChange={(e) => setPass(e.target.value)} placeholder="••••••••" autoComplete="current-password" />
            </div>
            {err && <span className="kz-err">Preencha usuário e senha (demo: qualquer valor).</span>}
            <AB variant="gold" size="lg" fullWidth type="submit" iconRight="→">Entrar no painel</AB>
          </form>
          <p className="kz-admin-redirect">Acesso somente para a equipe.</p>
        </ACd>
      </div>
    );
  }

  /* ---------- helpers de edição ---------- */
  const startNew = () => { setDraft(emptyDraft()); setOriginalSlug(null); setMode("edit"); };
  const startEdit = (post) => {
    setDraft({
      titulo: post.titulo || "", resumo: post.resumo || "", autor: post.autor || "Equipe ZEN SUSHI",
      categoria: post.categoria || "Novidades", data: post.data || new Date().toISOString().slice(0, 10),
      img: post.img || "", imgAlt: post.imgAlt || "",
      topicos: (post.topicos && post.topicos.length ? post.topicos.map((t) => ({ h2: t.h2 || "", p: t.p || "" })) : [{ h2: "", p: "" }]),
      dicas: post.dicas ? { h3: post.dicas.h3 || "", p: post.dicas.p || "" } : { h3: "", p: "" },
      cta: post.cta || "Reserve sua mesa no ZEN SUSHI",
      slug: post.slug || "",
    });
    setOriginalSlug(post.slug);
    setMode("edit");
  };
  const set = (k, v) => setDraft((d) => ({ ...d, [k]: v }));
  const setTopico = (i, k, v) => setDraft((d) => { const t = d.topicos.slice(); t[i] = { ...t[i], [k]: v }; return { ...d, topicos: t }; });
  const addTopico = () => setDraft((d) => ({ ...d, topicos: d.topicos.concat([{ h2: "", p: "" }]) }));
  const removeTopico = (i) => setDraft((d) => ({ ...d, topicos: d.topicos.filter((_, j) => j !== i) }));

  const onImage = async (file) => {
    if (!file) return;
    setBusy(true);
    try {
      const url = await fileToOptimizedDataURL(file, 1280);
      set("img", url);
      if (!draft.imgAlt) set("imgAlt", (draft.titulo || "Imagem") + " — ZEN SUSHI, restaurante em Cotia");
    } catch (e) { setToast("Falha ao carregar a imagem."); }
    setBusy(false);
  };

  const canSave = draft.titulo.trim() && draft.resumo.trim();
  const save = (publishView) => {
    if (!canSave) { setToast("Preencha pelo menos o título e o resumo."); return; }
    let slug;
    try {
      slug = BLOG.save(draft, originalSlug);
    } catch (e) { setToast("Não foi possível salvar (armazenamento cheio?)."); return; }
    adminSeo.track("blog_post_save", { slug, novo: !originalSlug });
    setRefresh((n) => n + 1);
    if (publishView) { location.hash = "#/blog/" + slug; }
    else { setMode("list"); setToast("Artigo salvo com sucesso."); }
  };
  const del = (post) => {
    if (!window.confirm('Excluir o artigo "' + post.titulo + '"? Esta ação não pode ser desfeita.')) return;
    BLOG.remove(post.slug);
    adminSeo.track("blog_post_delete", { slug: post.slug });
    setRefresh((n) => n + 1);
    setToast("Artigo excluído.");
  };

  const userPosts = BLOG.listUser().slice().sort((a, b) => (b.data || "").localeCompare(a.data || ""));
  const staticPosts = (window.KZ_DATA.BLOG || []);

  /* ---------- EDITOR ---------- */
  if (mode === "edit") {
    return (
      <div className="kz-section kz-admin">
        {toast && <div className="kz-toast">{toast}</div>}
        <div className="kz-admin-head">
          <div>
            <AEy rule="left">{originalSlug ? "Editando artigo" : "Novo artigo"}</AEy>
            <h1 className="kz-h2" style={{ margin: 0 }}>{originalSlug ? "Editar" : "Escrever"}</h1>
          </div>
          <AB variant="ghost" onClick={() => setMode("list")}>← Voltar à lista</AB>
        </div>

        <div className="kz-editor">
          <div className="kz-editor-main">
            <div className="kz-field">
              <label>Título do artigo</label>
              <input value={draft.titulo} onChange={(e) => set("titulo", e.target.value)} placeholder="Ex.: 5 segredos do sushi perfeito" />
            </div>
            <div className="kz-field">
              <label>Resumo (aparece na lista e no SEO)</label>
              <textarea rows="2" value={draft.resumo} onChange={(e) => set("resumo", e.target.value)} placeholder="Uma frase que convida o leitor a abrir o artigo." />
            </div>

            <h3 className="kz-h3 kz-editor-sec">Conteúdo</h3>
            {draft.topicos.map((t, i) => (
              <div className="kz-editor-block" key={i}>
                <div className="kz-editor-block-head">
                  <span>Bloco {i + 1}</span>
                  {draft.topicos.length > 1 && <button type="button" className="kz-link-btn" onClick={() => removeTopico(i)}>remover</button>}
                </div>
                <div className="kz-field">
                  <label>Subtítulo</label>
                  <input value={t.h2} onChange={(e) => setTopico(i, "h2", e.target.value)} placeholder="Ex.: O arroz certo" />
                </div>
                <div className="kz-field">
                  <label>Texto</label>
                  <textarea rows="4" value={t.p} onChange={(e) => setTopico(i, "p", e.target.value)} placeholder="Escreva o parágrafo deste bloco..." />
                </div>
              </div>
            ))}
            <AB variant="ghost" size="sm" onClick={addTopico}>+ Adicionar bloco</AB>

            <h3 className="kz-h3 kz-editor-sec">Dica do chef (opcional)</h3>
            <div className="kz-field">
              <label>Título da dica</label>
              <input value={draft.dicas.h3} onChange={(e) => set("dicas", { ...draft.dicas, h3: e.target.value })} placeholder="Ex.: Dica para repetir em casa" />
            </div>
            <div className="kz-field">
              <label>Texto da dica</label>
              <textarea rows="2" value={draft.dicas.p} onChange={(e) => set("dicas", { ...draft.dicas, p: e.target.value })} placeholder="Uma dica prática..." />
            </div>
          </div>

          <aside className="kz-editor-side">
            <ACd>
              <h3 className="kz-h4" style={{ marginTop: 0 }}>Imagem de capa</h3>
              <div className="kz-upload" role="button" tabIndex="0"
                onClick={() => document.getElementById("kz-img-input").click()}
                onDragOver={(e) => { e.preventDefault(); }}
                onDrop={(e) => { e.preventDefault(); onImage(e.dataTransfer.files[0]); }}>
                {draft.img
                  ? <img src={draft.img} alt="Pré-visualização da capa" className="kz-upload-preview" />
                  : <span>{busy ? "Processando..." : "Arraste uma imagem ou clique para enviar"}</span>}
              </div>
              <input id="kz-img-input" type="file" accept="image/*" style={{ display: "none" }} onChange={(e) => onImage(e.target.files[0])} />
              {draft.img && <button type="button" className="kz-link-btn" onClick={() => set("img", "")}>remover imagem</button>}
              <div className="kz-field" style={{ marginTop: "var(--space-3)" }}>
                <label>Descrição da imagem (alt / SEO)</label>
                <input value={draft.imgAlt} onChange={(e) => set("imgAlt", e.target.value)} placeholder="Descreva a foto com palavras-chave" />
              </div>
            </ACd>
            <ACd>
              <h3 className="kz-h4" style={{ marginTop: 0 }}>Detalhes</h3>
              <div className="kz-field">
                <label>Categoria</label>
                <select value={draft.categoria} onChange={(e) => set("categoria", e.target.value)}>
                  {CATEGORIAS.map((c) => <option key={c} value={c}>{c}</option>)}
                </select>
              </div>
              <div className="kz-field">
                <label>Autor</label>
                <input value={draft.autor} onChange={(e) => set("autor", e.target.value)} />
              </div>
              <div className="kz-field">
                <label>Data de publicação</label>
                <input type="date" value={draft.data} onChange={(e) => set("data", e.target.value)} />
              </div>
              <div className="kz-field">
                <label>Chamada para ação (CTA)</label>
                <input value={draft.cta} onChange={(e) => set("cta", e.target.value)} />
              </div>
              <div className="kz-field">
                <label>URL (slug) — opcional</label>
                <input value={draft.slug} onChange={(e) => set("slug", e.target.value)} placeholder="gerado do título" />
              </div>
            </ACd>
          </aside>
        </div>

        <div className="kz-editor-actions">
          <AB variant="gold" size="lg" iconRight="→" onClick={() => save(true)} disabled={!canSave}>Salvar e ver no blog</AB>
          <AB variant="outline" size="lg" onClick={() => save(false)} disabled={!canSave}>Salvar e continuar</AB>
          <AB variant="ghost" size="lg" onClick={() => setMode("list")}>Cancelar</AB>
        </div>
      </div>
    );
  }

  /* ---------- LISTA ---------- */
  return (
    <div className="kz-section kz-admin">
      {toast && <div className="kz-toast">{toast}</div>}
      <div className="kz-admin-head">
        <div>
          <AEy rule="left">Painel do blog · privado</AEy>
          <h1 className="kz-h2" style={{ margin: 0 }}>Meu Blog</h1>
        </div>
        <div className="kz-admin-head-actions">
          <AB variant="gold" iconRight="+" onClick={startNew}>Novo artigo</AB>
          <AB variant="ghost" onClick={logout}>Sair</AB>
        </div>
      </div>

      <h3 className="kz-h3 kz-editor-sec">Seus artigos ({userPosts.length})</h3>
      {userPosts.length === 0 && (
        <ACd pattern className="kz-admin-empty">
          <p className="kz-body" style={{ margin: 0 }}>Você ainda não publicou nenhum artigo. Clique em <strong>“Novo artigo”</strong> para escrever o primeiro — ele aparece no blog automaticamente.</p>
        </ACd>
      )}
      <div className="kz-admin-posts">
        {userPosts.map((p) => (
          <article className="kz-admin-post" key={p.slug}>
            <div className="kz-admin-post-thumb" style={p.img ? { backgroundImage: "url(" + p.img + ")" } : undefined}>
              {!p.img && <span className="kz-blog-glyph">◆</span>}
            </div>
            <div className="kz-admin-post-body">
              <span className="kz-blog-meta">{p.categoria} · {p.dataLabel || p.data}</span>
              <h4 className="kz-h3" style={{ margin: "2px 0" }}>{p.titulo}</h4>
              <p className="kz-body kz-admin-post-resumo">{p.resumo}</p>
            </div>
            <div className="kz-admin-post-actions">
              <a className="kz-link-btn" href={"#/blog/" + p.slug} target="_blank" rel="noopener">ver</a>
              <button className="kz-link-btn" onClick={() => startEdit(p)}>editar</button>
              <button className="kz-link-btn is-danger" onClick={() => del(p)}>excluir</button>
            </div>
          </article>
        ))}
      </div>

      <AKD style={{ margin: "var(--space-8) auto" }} />
      <h3 className="kz-h3 kz-editor-sec">Artigos de exemplo ({staticPosts.length})</h3>
      <p className="kz-body" style={{ marginTop: 0 }}>Estes vêm com o site. Você pode usá-los como modelo: clique em “duplicar” para criar uma cópia editável.</p>
      <div className="kz-admin-posts">
        {staticPosts.map((p) => (
          <article className="kz-admin-post is-static" key={p.slug}>
            <div className="kz-admin-post-thumb" style={p.img ? { backgroundImage: "url(" + p.img + ")" } : undefined} />
            <div className="kz-admin-post-body">
              <span className="kz-blog-meta">{p.categoria} · {p.dataLabel}</span>
              <h4 className="kz-h3" style={{ margin: "2px 0" }}>{p.titulo}</h4>
              <p className="kz-body kz-admin-post-resumo">{p.resumo}</p>
            </div>
            <div className="kz-admin-post-actions">
              <a className="kz-link-btn" href={"#/blog/" + p.slug} target="_blank" rel="noopener">ver</a>
              <button className="kz-link-btn" onClick={() => { const cp = Object.assign({}, p, { titulo: p.titulo + " (cópia)", slug: "" }); startEdit(cp); setOriginalSlug(null); }}>duplicar</button>
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

window.AdminPage = AdminPage;