/* pages/settings.jsx — Configurações. Admin-only page that controls:
   - Platform connections (toggle + account ID per platform)
   - Client identity (name, logo, category, market, type, currency)
   - Dashboard access (client + admin credentials)

   All edits flow through onUpdate so the sidebar, login, and platform pages
   reflect the change immediately. */

const { useState: useStateSet } = React;

/* Compact toggle switch, used for platform on/off. */
function SetToggle({ on, onChange, labelOn, labelOff }) {
  return (
    <button
      type="button"
      className={"set-toggle " + (on ? "set-toggle--on" : "")}
      onClick={() => onChange(!on)}
      aria-pressed={on}
    >
      <span className="set-toggle__track"><span className="set-toggle__thumb"/></span>
      <span className="set-toggle__label">{on ? labelOn : labelOff}</span>
    </button>
  );
}

/* Single platform row. Account ID input disables when the platform is off. */
function PlatformRow({ id, name, icon, iconBg, platform, onChange, lang }) {
  const enabled = !!(platform && platform.enabled);
  const accountId = (platform && platform.account_id) || "";
  return (
    <div className="set-platform">
      <div className="set-platform__head">
        <div className="set-platform__mark" style={{background: iconBg}}>
          <Icon name={icon} size={18}/>
        </div>
        <div>
          <div className="set-platform__name">{name}</div>
          <div className={"set-platform__status" + (enabled ? " is-on" : "")}>
            {enabled
              ? (accountId ? (lang === "pt" ? "Conectada" : "Connected") : (lang === "pt" ? "Falta ID" : "Missing ID"))
              : (lang === "pt" ? "Desconectada" : "Disconnected")}
          </div>
        </div>
      </div>
      <SetToggle
        on={enabled}
        onChange={(v) => onChange(id, { enabled: v, account_id: accountId })}
        labelOn={t("set.field.enabled", lang)}
        labelOff={t("set.field.disabled", lang)}
      />
      <div className="set-platform__id">
        <span className="set-field__label">{t("set.field.platform.id", lang)}</span>
        <input
          type="text"
          value={accountId}
          disabled={!enabled}
          placeholder={enabled ? "act_… / GADS-… / GA4-… / …" : "—"}
          onChange={(e) => onChange(id, { enabled, account_id: e.target.value })}
        />
      </div>
    </div>
  );
}

/* Password input with show/hide toggle. */
function PasswordField({ value, onChange, placeholder, lang }) {
  const [show, setShow] = useStateSet(false);
  return (
    <div className="set-pw">
      <input
        type={show ? "text" : "password"}
        className="set-input"
        value={value}
        placeholder={placeholder}
        onChange={(e) => onChange(e.target.value)}
      />
      <button
        type="button"
        className="set-pw__toggle"
        onClick={() => setShow(!show)}
      >
        {show ? t("set.placeholder.hide", lang) : t("set.placeholder.show", lang)}
      </button>
    </div>
  );
}

function SettingsPage({ lang, client, onUpdate }) {
  const [saved, setSaved] = useStateSet(false);

  const flashSaved = () => {
    setSaved(true);
    setTimeout(() => setSaved(false), 1800);
  };

  /* Field helpers — patch a single top-level field and reset the saved chip. */
  const set = (edits) => {
    onUpdate(edits);
    setSaved(false);
  };
  const setPlatform = (id, patch) => {
    onUpdate({
      platforms: { ...client.platforms, [id]: patch }
    });
    setSaved(false);
  };
  const setUsers = (role, patch) => {
    onUpdate({
      users: {
        ...client.users,
        [role]: { ...client.users[role], ...patch }
      }
    });
    setSaved(false);
  };

  const onLogoFile = (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    const url = URL.createObjectURL(file);
    set({ logo_url: url });
  };

  return (
    <div className="canvas">
      <section className="page-head" style={{marginBottom: 22}}>
        <span className="page-head__eyebrow">{t("nav.account", lang)}</span>
        <h1 className="page-head__title">{t("set.title", lang)}</h1>
        <p className="page-head__sub" style={{maxWidth: 640}}>
          {t("set.sub", lang)}
        </p>
      </section>

      <div className="set-sections">
        {/* ============ PLATFORM CONNECTIONS ============ */}
        <section className="set-section">
          <div className="set-section__head">
            <div>
              <h2 className="set-section__title">
                <Icon name="zap" size={16}/>
                {t("set.platforms", lang)}
              </h2>
              <p className="set-section__sub">{t("set.platforms.sub", lang)}</p>
            </div>
          </div>

          <div className="set-grid">
            <PlatformRow
              id="meta" name={t("set.platform.meta", lang)} icon="meta"
              iconBg="linear-gradient(135deg, #0866FF 0%, #7600FF 100%)"
              platform={client.platforms.meta} onChange={setPlatform} lang={lang}
            />
            <PlatformRow
              id="google" name={t("set.platform.google", lang)} icon="google"
              iconBg="#fff"
              platform={client.platforms.google} onChange={setPlatform} lang={lang}
            />
            <PlatformRow
              id="tiktok" name={t("set.platform.tiktok", lang)} icon="tiktok"
              iconBg="linear-gradient(135deg, #25F4EE 0%, #FE2C55 100%)"
              platform={client.platforms.tiktok} onChange={setPlatform} lang={lang}
            />
            <PlatformRow
              id="analytics" name={t("set.platform.analytics", lang)} icon="bar-chart"
              iconBg="linear-gradient(135deg, #F9AB00 0%, #E37400 100%)"
              platform={client.platforms.analytics} onChange={setPlatform} lang={lang}
            />
            <PlatformRow
              id="shopify" name={t("set.platform.shopify", lang)} icon="shopify-bag"
              iconBg="linear-gradient(135deg, #95BF47 0%, #5E8E3E 100%)"
              platform={client.platforms.shopify} onChange={setPlatform} lang={lang}
            />
          </div>
        </section>

        {/* ============ CLIENT SETTINGS ============ */}
        <section className="set-section">
          <div className="set-section__head">
            <div>
              <h2 className="set-section__title">
                <Icon name="users" size={16}/>
                {t("set.client", lang)}
              </h2>
              <p className="set-section__sub">{t("set.client.sub", lang)}</p>
            </div>
          </div>

          <div className="set-grid">
            <div className="set-field">
              <span className="set-field__label">{t("set.field.name", lang)}</span>
              <input
                type="text"
                className="set-input"
                value={client.name}
                onChange={(e) => set({ name: e.target.value })}
              />
            </div>

            <div className="set-field">
              <span className="set-field__label">{t("set.field.logo", lang)}</span>
              <div className="set-logo">
                <div className="set-logo__preview">
                  {client.logo_url
                    ? <img src={client.logo_url} alt={client.name}/>
                    : <Icon name="image" size={20}/>}
                </div>
                <label className="set-logo__upload">
                  <Icon name="upload" size={13}/>
                  {t("set.field.logo.cta", lang)}
                  <input type="file" accept="image/*" style={{display:"none"}} onChange={onLogoFile}/>
                </label>
              </div>
              <span className="set-field__hint">{t("set.field.logo.hint", lang)}</span>
            </div>

            <div className="set-field set-field--wide">
              <span className="set-field__label">{t("set.field.category", lang)}</span>
              <input
                type="text"
                className="set-input"
                value={client.category || ""}
                placeholder={t("set.field.category.ph", lang)}
                onChange={(e) => set({ category: e.target.value })}
              />
              <span className="set-field__hint">
                {lang === "pt"
                  ? "Aparece no sidebar abaixo do nome do cliente."
                  : "Shown in the sidebar under the client name."}
              </span>
            </div>

            <div className="set-field">
              <span className="set-field__label">{t("set.field.market", lang)}</span>
              <select
                className="set-select"
                value={client.market_code}
                onChange={(e) => set({ market_code: e.target.value })}
              >
                <option value="br">{t("set.field.market.br", lang)}</option>
                <option value="intl">{t("set.field.market.intl", lang)}</option>
              </select>
              <span className="set-field__hint">{t("set.field.market.note", lang)}</span>
            </div>

            <div className="set-field">
              <span className="set-field__label">{t("set.field.type", lang)}</span>
              <select
                className="set-select"
                value={client.type}
                onChange={(e) => set({ type: e.target.value })}
              >
                <option value="ecom">{t("set.field.type.ecom", lang)}</option>
                <option value="lead">{t("set.field.type.lead", lang)}</option>
              </select>
            </div>

            <div className="set-field">
              <span className="set-field__label">{t("set.field.currency", lang)}</span>
              <input
                type="text"
                className="set-input"
                value={client.currency || ""}
                placeholder={t("set.field.currency.ph", lang)}
                onChange={(e) => set({ currency: e.target.value.toUpperCase() })}
              />
            </div>
          </div>
        </section>

        {/* ============ DASHBOARD ACCESS ============ */}
        <section className="set-section">
          <div className="set-section__head">
            <div>
              <h2 className="set-section__title">
                <Icon name="key" size={16}/>
                {t("set.access", lang)}
              </h2>
              <p className="set-section__sub">{t("set.access.sub", lang)}</p>
            </div>
          </div>

          <div className="set-grid">
            <div className="set-field">
              <span className="set-field__label">{t("set.field.client.user", lang)}</span>
              <input
                type="text"
                className="set-input"
                value={client.users.client.username}
                onChange={(e) => setUsers("client", { username: e.target.value })}
              />
            </div>
            <div className="set-field">
              <span className="set-field__label">{t("set.field.client.pass", lang)}</span>
              <PasswordField
                value={client.users.client.password}
                onChange={(v) => setUsers("client", { password: v })}
                placeholder="••••••••••"
                lang={lang}
              />
            </div>

            <div className="set-field">
              <span className="set-field__label">{t("set.field.admin.user", lang)}</span>
              <input
                type="text"
                className="set-input"
                value={client.users.admin.username}
                onChange={(e) => setUsers("admin", { username: e.target.value })}
              />
            </div>
            <div className="set-field">
              <span className="set-field__label">{t("set.field.admin.pass", lang)}</span>
              <PasswordField
                value={client.users.admin.password}
                onChange={(v) => setUsers("admin", { password: v })}
                placeholder="••••••••••"
                lang={lang}
              />
            </div>
          </div>
        </section>

        <div className="set-actions">
          {saved && (
            <span className="set-saved-pill">
              <Icon name="check" size={11}/>
              {t("set.saved", lang)}
            </span>
          )}
          <button className="btn btn--gradient" onClick={flashSaved}>
            {t("set.save", lang)}
            <Icon name="check" size={12}/>
          </button>
        </div>
      </div>
    </div>
  );
}
window.SettingsPage = SettingsPage;