const { useState: useStateApp } = React;

const NAV = [
  { id: "dashboard",  label: "Dashboard",      icon: "dashboard" },
  { id: "articles",   label: "Articles",        icon: "article"   },
  { id: "recipes",    label: "Recipes",         icon: "list"      },
  { id: "ads",        label: "Advertisements",  icon: "megaphone" },
  { id: "categories", label: "Categories",      icon: "tag"       },
  { id: "users",      label: "Users",           icon: "users"     },
];

function App() {
  const [token, setToken] = useStateApp(() => localStorage.getItem('naturmia_token'));
  const [view, setView] = useStateApp("articles");
  const [editingId, setEditingId] = useStateApp(null);
  const [editingTitle, setEditingTitle] = useStateApp(null);
  const [editingAdId, setEditingAdId] = useStateApp(null);
  const [editingAdTitle, setEditingAdTitle] = useStateApp(null);
  const [editingRecipeId, setEditingRecipeId] = useStateApp(null);
  const [editingRecipeTitle, setEditingRecipeTitle] = useStateApp(null);
  const [addingCategory, setAddingCategory] = useStateApp(false);
  const [articleSaveSignal, setArticleSaveSignal] = useStateApp(0);
  const [recipeSaveSignal, setRecipeSaveSignal] = useStateApp(0);

  if (!token) {
    return <LoginView onLogin={(t) => { localStorage.setItem('naturmia_token', t); setToken(t); }}/>;
  }

  const goto = (v) => {
    setView(v);
    setEditingId(null);
    setEditingTitle(null);
    setEditingAdId(null);
    setEditingAdTitle(null);
    setEditingRecipeId(null);
    setEditingRecipeTitle(null);
    setAddingCategory(false);
  };

  const openArticle = (id, title = null) => { setEditingId(id); setEditingTitle(title); setView("article-edit"); };
  const openAd = (id, title = null) => { setEditingAdId(id); setEditingAdTitle(title); setView("ads-edit"); };
  const newAd = () => { setEditingAdId(null); setEditingAdTitle(null); setView("ads-edit"); };
  const openRecipe = (id, title = null) => { setEditingRecipeId(id); setEditingRecipeTitle(title); setView("recipe-edit"); };
  const newRecipe = () => { setEditingRecipeId(null); setEditingRecipeTitle(null); setView("recipe-edit"); };

  const handleLogout = async () => {
    try { await api.logout(); } catch {}
    localStorage.removeItem('naturmia_token');
    window.location.href = '/cms/login';
  };

  const topbar = () => {
    if (view === "dashboard") return { title: "Dashboard", crumb: null, action: null };
    if (view === "articles") return {
      title: "Articles",
      crumb: null,
      action: <button className="btn btn-primary" onClick={() => openArticle(null)}><Icon name="plus" size={14}/> New article</button>,
    };
    if (view === "article-edit") {
      const displayTitle = editingTitle || (editingId ? "Loading…" : "New article");
      return {
        title: null,
        crumb: (
          <div className="crumb" style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <button className="btn btn-sm btn-ghost" onClick={() => goto("articles")} style={{ padding: "4px 6px" }}>
              <Icon name="chevron-left" size={14}/> Articles
            </button>
            <span style={{ color: "var(--muted-2)" }}>/</span>
            <b style={{ maxWidth: 460, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              {displayTitle}
            </b>
          </div>
        ),
        action: (
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn btn-primary" onClick={() => setArticleSaveSignal(s => s + 1)}>
              <Icon name="check" size={14}/> Save
            </button>
          </div>
        ),
      };
    }
    if (view === "recipes") return {
      title: "Recipes",
      crumb: null,
      action: <button className="btn btn-primary" onClick={newRecipe}><Icon name="plus" size={14}/> New recipe</button>,
    };
    if (view === "recipe-edit") {
      const displayTitle = editingRecipeTitle || (editingRecipeId ? "Loading…" : "New recipe");
      return {
        title: null,
        crumb: (
          <div className="crumb" style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <button className="btn btn-sm btn-ghost" onClick={() => goto("recipes")} style={{ padding: "4px 6px" }}>
              <Icon name="chevron-left" size={14}/> Recipes
            </button>
            <span style={{ color: "var(--muted-2)" }}>/</span>
            <b style={{ maxWidth: 460, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              {displayTitle}
            </b>
          </div>
        ),
        action: (
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn btn-primary" onClick={() => setRecipeSaveSignal(s => s + 1)}>
              <Icon name="check" size={14}/> Save
            </button>
          </div>
        ),
      };
    }
    if (view === "ads") return {
      title: "Advertisements",
      crumb: null,
      action: <button className="btn btn-primary" onClick={newAd}><Icon name="plus" size={14}/> New advertisement</button>,
    };
    if (view === "ads-edit") {
      const displayTitle = editingAdTitle || (editingAdId ? "Loading…" : "New advertisement");
      return {
        title: null,
        crumb: (
          <div className="crumb" style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <button className="btn btn-sm btn-ghost" onClick={() => goto("ads")} style={{ padding: "4px 6px" }}>
              <Icon name="chevron-left" size={14}/> Advertisements
            </button>
            <span style={{ color: "var(--muted-2)" }}>/</span>
            <b style={{ maxWidth: 460, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              {displayTitle}
            </b>
          </div>
        ),
        action: null,
      };
    }
    if (view === "categories") return {
      title: "Categories",
      crumb: null,
      action: <button className="btn btn-primary" onClick={() => setAddingCategory(true)}><Icon name="plus" size={14}/> New category</button>,
    };
    if (view === "users")         return { title: "Users",         crumb: null, action: null };
    if (view === "media")         return { title: "Media Library", crumb: null, action: null };
    if (view === "notifications") return { title: "Notifications", crumb: null, action: null };
    return { title: "", crumb: null, action: null };
  };

  const bar = topbar();

  return (
    <div className="app">
      {/* Sidebar */}
      <aside className="sidebar">
        <div className="brand">
          <div className="brand-mark"><Icon name="leaf" size={17}/></div>
          <div className="brand-name">Natur<span>Mia</span></div>
        </div>

        <div className="nav-group-label">Workspace</div>
        {NAV.map(n => (
          <div
            key={n.id}
            className={`nav-item ${
              view === n.id ||
              (n.id === "articles" && view === "article-edit") ||
              (n.id === "recipes" && view === "recipe-edit") ||
              (n.id === "ads" && view === "ads-edit")
                ? "active" : ""
            }`}
            onClick={() => goto(n.id)}
          >
            <Icon name={n.icon} size={17}/>
            <span>{n.label}</span>
          </div>
        ))}

        <div className="nav-group-label">Library</div>
        <div
          className={`nav-item ${view === "media" ? "active" : ""}`}
          onClick={() => goto("media")}
        >
          <Icon name="image" size={17}/><span>Media</span>
        </div>
        <div
          className={`nav-item ${view === "notifications" ? "active" : ""}`}
          onClick={() => goto("notifications")}
        >
          <Icon name="bell" size={17}/><span>Notifications</span>
        </div>

        <div className="sidebar-footer">
          <div className="avatar">CM</div>
          <div className="who">
            <strong>NaturMia</strong>
            <span>Admin · IT</span>
          </div>
          <button
            className="btn btn-sm btn-ghost btn-icon"
            style={{ marginLeft: "auto" }}
            title="Log out"
            onClick={handleLogout}
          >
            <Icon name="logout" size={16}/>
          </button>
        </div>
      </aside>

      {/* Main */}
      <main className="main">
        <header className="topbar">
          {bar.title && <h1>{bar.title}</h1>}
          {bar.crumb}
          <div className="spacer"></div>
          {bar.action}
        </header>
        <section className="page">
          {view === "dashboard"    && <Dashboard onGo={goto}/>}
          {view === "articles"     && <ArticlesList onOpen={openArticle}/>}
          {view === "article-edit" && <ArticleEdit articleId={editingId} onBack={() => goto("articles")} onTitleChange={setEditingTitle} saveSignal={articleSaveSignal}/>}
          {view === "recipes"      && <RecipesList onOpen={openRecipe}/>}
          {view === "recipe-edit"  && <RecipeEdit recipeId={editingRecipeId} onBack={() => goto("recipes")} onTitleChange={setEditingRecipeTitle} saveSignal={recipeSaveSignal}/>}
          {view === "ads"          && <AdsList onOpen={openAd}/>}
          {view === "ads-edit"     && <AdEdit adId={editingAdId} onBack={() => goto("ads")} onTitleChange={setEditingAdTitle}/>}
          {view === "categories"   && <CategoriesView addNew={addingCategory} onAddNewDone={() => setAddingCategory(false)}/>}
          {view === "users"        && <UsersView/>}
          {view === "media"        && <MediaView/>}
          {view === "notifications" && <NotificationsView/>}
        </section>
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);