/* ============================================================
   INside quote generator — App shell, state, navigation
   ============================================================ */
const AppCtx = React.createContext(null);
window.AppCtx = AppCtx;

const D = window.AppData;
let _qi = 100;

const TWEAK_DEFAULTS = { accent: "#1A1A1A", display: "Jost", surface: "Marfil" };

function Logo() {
  return (
    <div className="nav-logo">
      <img src="cotizador/assets/logo-lockup-black.png" alt="INside Elementos Arquitectónicos" className="nav-logo-img" />
    </div>);

}

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const auth = window.useAuth();
  const [view, setView] = React.useState("home");
  const adminMode = true; // internal tool — costs/margins visible to staff
  const [products, setProducts] = React.useState(D.PRODUCTS);
  const [settings, setSettingsState] = React.useState(D.SETTINGS);
  const [quotes, setQuotes] = React.useState(D.QUOTES);
  const [activeQuoteId, setActiveQuoteId] = React.useState(null); // null = nueva

  const [quoteMeta, setQuoteMetaState] = React.useState({
    quote_number: "IN064",
    project_name: "CENTRAL · Auditorio Corporativo",
    client_name: "Carlos Quintero",
    client_company: "CREATIVE DEV, INC.",
    client_email: "cq@creativedev.com",
    client_phone: "6215-3572",
    prepared_by: "",
    prepared_email: "",
    valid_until: "2026-06-29",
    notes: "Precios incluyen instalación. Tiempo de entrega estimado: 4–6 semanas tras aprobación.",
    discount_pct: 0,
    itbms: false
  });

  const [currentItems, setCurrentItems] = React.useState(() => D.SAMPLE_QUOTE_ITEMS.map((i) => ({ ...i, apu: window.getAPU(i) })));

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--gold", t.accent);
    r.setProperty("--display", `'${t.display}', sans-serif`);
    const tones = {
      Marfil: ["#F4F3EF", "#EFEDE8", "#FFFFFF", "#FAF9F6"],
      Niebla: ["#F1F1F3", "#EAEAED", "#FFFFFF", "#F7F7F9"],
      Blanco: ["#FBFBFA", "#F4F4F2", "#FFFFFF", "#FAFAF9"]
    };
    const [a, b, c, d] = tones[t.surface] || tones.Marfil;
    r.setProperty("--bg", a);r.setProperty("--bg2", b);
    r.setProperty("--surface", c);r.setProperty("--panel", d);
  }, [t]);

  const setQuoteMeta = (patch) => setQuoteMetaState((m) => ({ ...m, ...patch }));
  const setSettings = (patch) => setSettingsState((s) => ({ ...s, ...patch }));

  // ---- product CRUD ----
  const updateProduct = (id, patch) => setProducts((ps) => ps.map((p) => p.id === id ? { ...p, ...patch } : p));
  const addProduct = (prod) => {
    const id = "prod-new-" + Date.now();
    setProducts((ps) => [{ id, active: true, margin_pct: null, image_url: null, ...prod }, ...ps]);
  };
  const removeProduct = (id) => {
    setProducts((ps) => ps.filter((p) => p.id !== id));
    setCurrentItems((items) => items.filter((i) => i.product_id !== id));
  };
  const clearAllProducts = () => {setProducts([]);setCurrentItems([]);};

  // ---- quote (history) CRUD ----
  const updateQuote = (id, patch) => setQuotes((qs) => qs.map((q) => q.id === id ? { ...q, ...patch } : q));
  const removeQuote = (id) => setQuotes((qs) => qs.filter((q) => q.id !== id));
  const duplicateQuote = (id) => setQuotes((qs) => {
    const src = qs.find((q) => q.id === id);if (!src) return qs;
    const n = "IN" + String(Math.max(...qs.map((q) => parseInt((q.quote_number || "IN0").replace(/\D/g, "")) || 0)) + 1).padStart(3, "0");
    return [{ ...src, id: "q-" + Date.now(), quote_number: n, status: "draft", date: new Date().toISOString().slice(0, 10) }, ...qs];
  });

  // ---- current quote items ----
  const addItemToQuote = (product) => {
    setCurrentItems((items) => {
      if (items.some((i) => i.product_id === product.id)) return items;
      const apu = window.getAPU(product);
      return [...items, {
        id: "qi-" + ++_qi, product_id: product.id, zone: product.zone || "",
        color: "Por definir", quantity: 1, unit: product.unit,
        apu, logistica_aparte: false,
        unit_price: window.apuUnitPrice(apu, false), cost_price: product.cost_price,
        item_image_url: null, image_source: "product", image_label: null
      }];
    });
  };
  const addCustomItem = () => setCurrentItems((items) => [...items, {
    id: "qi-" + ++_qi, product_id: null, custom: true, name: "Logística y manejo",
    description: "Transporte, montacargas y manejo en sitio.", zone: "—", color: "—", quantity: 1, unit: "global",
    apu: null, logistica_aparte: false, unit_price: 0, cost_price: 0,
    item_image_url: null, image_source: "product", image_label: null
  }]);
  const updateItem = (id, patch) => setCurrentItems((items) => items.map((i) => i.id === id ? { ...i, ...patch } : i));
  const removeItem = (id) => setCurrentItems((items) => items.filter((i) => i.id !== id));

  const newQuote = () => {
    setActiveQuoteId(null);
    setCurrentItems([]);
    const me = auth.session;
    setQuoteMetaState((m) => ({
      ...m, quote_number: "IN" + String(Math.max(...quotes.map((q) => parseInt((q.quote_number || "IN0").replace(/\D/g, "")) || 0), 63) + 1).padStart(3, "0"),
      project_name: "", client_name: "", client_company: "", client_email: "", client_phone: "",
      prepared_by: me ? me.name : "", prepared_email: me ? me.email : "", notes: "", discount_pct: 0, itbms: false
    }));
    setView("builder");
  };

  const ctx = {
    view, goTo: setView, adminMode, products, settings, setSettings, quotes,
    quoteMeta, setQuoteMeta, currentItems, updateProduct, addProduct, removeProduct, clearAllProducts,
    addItemToQuote, addCustomItem, updateItem, removeItem,
    updateQuote, removeQuote, duplicateQuote, newQuote, auth
  };

  const NAV = [
  { key: "catalog", label: "Catálogo" },
  { key: "builder", label: "Nueva cotización" },
  { key: "quotes", label: "Cotizaciones" },
  { key: "settings", label: "Configuración" }];

  const itemCount = currentItems.length;

  if (!auth.session) {
    return <window.LoginScreen onLogin={auth.login} />;
  }

  const me = auth.session;
  const initials = (me.name || "?").split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();

  return (
    <AppCtx.Provider value={ctx}>
      <div className="app">
        {view !== "home" &&
        <header className="topnav">
            <div className="topnav-inner">
              <div onClick={() => setView("home")}><Logo /></div>
              <nav className="nav-links">
                {NAV.map((n) =>
              <button key={n.key} className={"nav-link" + (view === n.key || n.key === "builder" && view === "pdf" ? " active" : "")}
              onClick={() => setView(n.key)}>
                    {n.label}
                    {n.key === "builder" && itemCount > 0 && <span className="nav-badge">{itemCount}</span>}
                  </button>
              )}
              </nav>
              <div className="nav-right" style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <div className="user-chip" title={me.email}>
                  <div className="user-avatar">{initials}</div>
                  <div>
                    <div className="uc-name">{me.name}</div>
                    <div className="uc-role">{me.role === "admin" ? "Administrador" : "Asesor"}</div>
                  </div>
                </div>
                <button className="logout-btn" title="Cerrar sesión" onClick={auth.logout}><window.Icon name="logout" size={16} /></button>
              </div>
            </div>
          </header>
        }

        <div className="content">
          {view === "home" && <Home goTo={setView} quotes={quotes} products={products} user={me} onLogout={auth.logout} />}
          {view === "catalog" && <window.CatalogView />}
          {view === "builder" && <window.QuoteBuilderView />}
          {view === "quotes" && <window.QuotesView />}
          {view === "settings" && <window.SettingsView />}
          {view === "pdf" && <window.PDFPreview />}
        </div>
      </div>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Marca" />
        <window.TweakColor label="Acento" value={t.accent}
        options={["#1A1A1A", "#5A5A5A", "#C8A96E", "#3A4A5A"]}
        onChange={(v) => setTweak("accent", v)} />
        <window.TweakSection label="Superficie" />
        <window.TweakRadio label="Tono de fondo" value={t.surface}
        options={["Marfil", "Niebla", "Blanco"]}
        onChange={(v) => setTweak("surface", v)} />
      </window.TweaksPanel>
    </AppCtx.Provider>);

}

// ---------- Home / hero (minimal enter page) ----------
function Home({ goTo, user, onLogout }) {
  return (
    <div className="home">
      <div className="home-bg" />
      {user &&
        <div className="home-topbar">
          <span className="home-user">{user.name}</span>
          <button className="home-logout" onClick={onLogout}>
            <window.Icon name="logout" size={14} /> Cerrar sesión
          </button>
        </div>
      }
      <div className="home-center">
        <div className="home-logo" style={{ marginBottom: 0 }}>
          <img src="cotizador/assets/logo-lockup-white.png" alt="INside Elementos Arquitectónicos" className="home-logo-img" />
        </div>
        <div className="home-eyebrow" style={{ fontWeight: "600", letterSpacing: "2px", marginBottom: 0, marginTop: 34 }}>Quote generator</div>
        <div className="home-actions" style={{ marginTop: 44 }}>
          <button className="home-pill" onClick={() => goTo("builder")} style={{ fontWeight: "600" }}>Comenzar a cotizar</button>
        </div>
      </div>
    </div>);

}

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