// Settings screen — profile, link rows, toggles, library + about info.

const SettingsScreen = ({
  darkMode,
  setDarkMode,
  dataSaver,
  setDataSaver,
  favorites,
  wallpapers,
}) => {
  return (
    <div
      style={{ position: "absolute", inset: 0, overflowY: "auto", scrollbarWidth: "none" }}
      className="no-sb"
    >
      <div
        style={{
          padding: "18px 18px 14px",
          borderBottom: "1px solid var(--line)",
        }}
      >
        <div
          style={{
            fontFamily: "var(--font-ui)",
            fontSize: 22,
            fontWeight: 600,
            letterSpacing: "-0.01em",
          }}
        >
          Profile
        </div>
      </div>

      <div style={{ padding: "20px 18px 120px", maxWidth: 640, margin: "0 auto" }}>
        <div
          style={{
            padding: 18,
            border: "1px solid var(--line)",
            borderRadius: 16,
            background: "var(--surface)",
            display: "flex",
            alignItems: "center",
            gap: 16,
          }}
        >
          <img
            src="favicon.png"
            alt="Wallpeppers"
            width={56}
            height={56}
            style={{
              width: 56,
              height: 56,
              borderRadius: 14,
              display: "block",
              objectFit: "cover",
              flexShrink: 0,
            }}
          />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: "var(--font-ui)", fontSize: 16, fontWeight: 600 }}>
              undefyned
            </div>
            <div
              style={{
                marginTop: 2,
                fontFamily: "var(--font-ui)",
                fontSize: 13,
                color: "var(--muted)",
              }}
            >
              Designer · Wallpeppers maker
            </div>
          </div>
        </div>

        <ListGroup title="Links">
          <LinkRow
            icon="github"
            label="GitHub"
            sub="@undefyned"
            href="https://github.com/undefyned"
          />
          <LinkRow
            icon="play"
            label="Play Store"
            sub="Get the app"
            href="https://play.google.com/store/apps/details?id=app.wallpeppers.web"
          />
          <LinkRow
            icon="telegram"
            label="Telegram"
            sub="@imundefyned"
            href="https://t.me/imundefyned"
            last
          />
        </ListGroup>

        <ListGroup title="Preferences">
          <ToggleRow
            icon="moon"
            label="Dark mode"
            sub="OLED-true blacks"
            value={darkMode}
            onChange={setDarkMode}
          />
          <ToggleRow
            icon="bolt"
            label="Data saver"
            sub="Lower-res thumbnails on detail view"
            value={dataSaver}
            onChange={setDataSaver}
            last
          />
        </ListGroup>

        <ListGroup title="Library">
          <InfoRow label="Wallpapers" value={`${wallpapers.length}`} />
          <InfoRow label="Favorites" value={`${favorites.length}`} />
          <InfoRow
            label="Cache"
            value="Local"
            action="Clear"
            onAction={() => {
              try {
                Object.keys(localStorage)
                  .filter((k) => k.startsWith("wp-pal:") || k === "wallpeppers:favorites")
                  .forEach((k) => localStorage.removeItem(k));
              } catch (e) {}
            }}
            last
          />
        </ListGroup>

        <ListGroup title="About">
          <InfoRow label="Version" value="3.0.0" last />
        </ListGroup>

        <div
          style={{
            marginTop: 28,
            display: "flex",
            justifyContent: "center",
            opacity: 0.5,
          }}
        >
          <Wordmark size={14} />
        </div>
      </div>
    </div>
  );
};

const ListGroup = ({ title, children }) => (
  <div style={{ marginTop: 26 }}>
    <div
      style={{
        fontFamily: "var(--font-ui)",
        fontSize: 11,
        letterSpacing: "0.14em",
        textTransform: "uppercase",
        color: "var(--muted)",
        fontWeight: 500,
        padding: "0 14px 8px",
      }}
    >
      {title}
    </div>
    <div
      style={{
        background: "var(--surface)",
        border: "1px solid var(--line)",
        borderRadius: 14,
        overflow: "hidden",
      }}
    >
      {children}
    </div>
  </div>
);

const LinkRow = ({ icon, label, sub, last, href }) => (
  <a
    href={href || "#"}
    target={href ? "_blank" : undefined}
    rel={href ? "noopener noreferrer" : undefined}
    style={{
      width: "100%",
      borderBottom: last ? "none" : "1px solid var(--line)",
      padding: "14px 16px",
      display: "flex",
      alignItems: "center",
      gap: 14,
      cursor: "pointer",
      color: "var(--fg)",
      textAlign: "left",
      textDecoration: "none",
      transition: "background 160ms ease",
    }}
    onMouseEnter={(e) =>
      (e.currentTarget.style.background = "color-mix(in oklab, var(--fg) 4%, transparent)")
    }
    onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
  >
    <div
      style={{
        width: 32,
        height: 32,
        borderRadius: 8,
        background: "var(--bg)",
        border: "1px solid var(--line)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexShrink: 0,
      }}
    >
      <Icon name={icon} size={15} />
    </div>
    <div style={{ flex: 1 }}>
      <div style={{ fontFamily: "var(--font-ui)", fontSize: 14, fontWeight: 500 }}>{label}</div>
      <div
        style={{
          fontFamily: "var(--font-ui)",
          fontSize: 12,
          color: "var(--muted)",
          marginTop: 1,
        }}
      >
        {sub}
      </div>
    </div>
    <Icon name="external" size={14} />
  </a>
);

const ToggleRow = ({ icon, label, sub, value, onChange, last }) => (
  <div
    style={{
      display: "flex",
      alignItems: "center",
      gap: 14,
      padding: "14px 16px",
      borderBottom: last ? "none" : "1px solid var(--line)",
    }}
  >
    <div
      style={{
        width: 32,
        height: 32,
        borderRadius: 8,
        background: "var(--bg)",
        border: "1px solid var(--line)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexShrink: 0,
      }}
    >
      <Icon name={icon} size={15} />
    </div>
    <div style={{ flex: 1 }}>
      <div style={{ fontFamily: "var(--font-ui)", fontSize: 14, fontWeight: 500 }}>{label}</div>
      <div
        style={{
          fontFamily: "var(--font-ui)",
          fontSize: 12,
          color: "var(--muted)",
          marginTop: 1,
        }}
      >
        {sub}
      </div>
    </div>
    <button
      onClick={() => onChange(!value)}
      role="switch"
      aria-checked={value}
      style={{
        appearance: "none",
        border: "none",
        width: 44,
        height: 26,
        borderRadius: 999,
        background: value ? "var(--accent)" : "var(--line)",
        position: "relative",
        cursor: "pointer",
        transition: "background 220ms ease",
        padding: 0,
        flexShrink: 0,
      }}
    >
      <span
        style={{
          position: "absolute",
          top: 3,
          left: value ? 21 : 3,
          width: 20,
          height: 20,
          borderRadius: "50%",
          background: "white",
          transition: "left 220ms cubic-bezier(0.2, 0.7, 0.2, 1)",
          boxShadow: "0 2px 6px rgba(0,0,0,0.25)",
        }}
      />
    </button>
  </div>
);

const InfoRow = ({ label, value, action, onAction, last }) => (
  <div
    style={{
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      padding: "14px 16px",
      borderBottom: last ? "none" : "1px solid var(--line)",
      fontFamily: "var(--font-ui)",
      fontSize: 14,
    }}
  >
    <span style={{ color: "var(--fg)" }}>{label}</span>
    <span style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <span style={{ color: "var(--muted)" }}>{value}</span>
      {action && (
        <button
          onClick={onAction}
          style={{
            appearance: "none",
            border: "1px solid var(--line)",
            background: "transparent",
            color: "var(--fg)",
            padding: "4px 10px",
            borderRadius: 999,
            fontFamily: "var(--font-ui)",
            fontSize: 11,
            cursor: "pointer",
          }}
        >
          {action}
        </button>
      )}
    </span>
  </div>
);

window.SettingsScreen = SettingsScreen;